PHPスクリプトの基本０７ - 実践するWEBサイト制作

エスケープシーケンス

「¥」記号を使った特殊な文字列表記

そのままでは文字列に含められない文字はエスケープシーケンスで表記する。
タブコードと改行コードによる変化はWebブラウザ上では表示されず、HTMLソースで違いを確認できる。

文字（記号）	エスケープシーケンス
"	\"
\	\\
タブコード	\t
改行コード	\n

【書式】

《 PHP スクリプト》

<?php
	print "Hello, world!<br>";
	print "Hello, \"world!\"<br>";
	print "\\1,000<br>";
	print "\tHello, world!<br>";
	print "Hello, world!\n<br>";
?>

ソースコード

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="keywords" content="PHPスクリプトの基本">
<meta name="description" content="PHP,スクリプト">
<meta name="viewport" content="width=device-width"> 
<meta charset="utf-8">
<title>PHPスクリプトの基本</title>
<link rel="stylesheet" href="css/style.css" media="all">
<!-- IE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
  article,aside,dialog,figure,footer,header,
  hgroup,menu,nav,section{ display: block;}
</style>
</head>

<body>

<header>
	<h1>PHPスクリプトの基本</h1>
</header>

<article>
<h1>エスケープシーケンス</h1>
	<div class="clearfix">
		<p class="point"><span class="p">P</span>oint</p>
<h2 class="post"><span class="f_col_def">「</span>\<span class="f_col_def">」記号を使った特殊な文字列表記</span></h2>
	<p class="post_p">そのままでは文字列に含められない文字はエスケープシーケンスで表記する。<br>タブコードと改行コードによる変化はWebブラウザ上では表示されず、HTMLソースで違いを確認できる。</p>
	</div>

	<table class="table1">
		<tr>
        	<th>文字（記号）</th><th>エスケープシーケンス</th>
        </tr>
        <tr>
        	<td>"</td><td>\"</td>
        </tr>
        <tr>
        	<td>\</td><td>\\</td>
        </tr>
        <tr>
        	<td>タブコード</td><td>\t</td>
        </tr>
        <tr>
        	<td>改行コード</td><td>\n</td>
        </tr>
	</table>

<section class="sec01">
<?php
	print "Hello, world!<br>";
	print "Hello, \"world!\"<br>";
	print "\\1,000<br>";
	print "\tHello, world!<br>";
	print "Hello, world!\n<br>";
?>
</section>

</article>

<footer>
<h3>PHPスクリプトの基本</h3>
	<small>Copyright&copy; 2013 webry All Rights Reserved.</small>
</footer>

</body>
</html>

ソースコード【 CSS 】

@charset "utf-8";

/* resetcss */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset {

    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family:
      "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro",
      "Hiragino Kaku Gothic Pro W3",
      "メイリオ",
      Meiryo,
      Osaka,
      "ＭＳ Ｐゴシック",
			"MS PGothic",
      sans-serif;
      }

    a {
     text-decoration: none;
    }
 
     ul, ol {
      list-style-type: none;
     }	
	  
    img {
      border: 0;
    }

.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;}


body {
	width: 960px;
	margin: 0 auto;
	color: #333;}

header {
	text-align: center;
	padding: 24px 50px 18px;
	background-color: #36F;
	border-radius: 18px / 18px;
	color: #fff;}

header h1 {
	border-bottom: 5px dotted #fff;}

.f_col_def {
	font-size: 86%;
	color: #333;}

article  {
	width: 91%;
	margin: 0 auto;}

article h1 {
	margin: 30px 0 18px;
	padding: 2px 0 0 0.5em;
	border: 1px solid #39F;
	border-left: 20px solid #36F;}

.point {
	line-height: 1.0;
	font-family: 'Maven Pro', Helverica, Arial, sans-serif;
	float: left;
	background-color: #F60;
	padding: 12px 26px;
	border-radius: 55px / 48px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	color: #fff;}

.point .p {
	display: block;
	font-size: 32px;
	line-height: 1.0;}

h2.post {
	margin: 0 0 6px 30px;
	padding: 0 0 3px 70px;
	font-weight: bold;
	border-bottom: 1px solid #aaa;
	color:#F00;}

.post_p {
	padding: 0 0 0 100px;
	line-height: 1.2;}

footer {
	line-height: 0.8;
	text-align: center;
	padding: 5px 0;
	background-color: #36F;
	border-radius: 6px / 6px;
	color: #fff;
	overflow: hidden;}

section.sec01 {
	margin: 30px 0;
	padding: 20px 15px;
	border: 2px dotted #3FF;
	background-color: #C1FFFF;}

footer h3 {
	font-size: 12px;}

.table1 {
	width: auto;
	margin: 30px auto 0;
	border: 2px #000 solid;
	border-collapse: collapse;
}

.table1 th, .table1 td {
	border: 1px #000 solid;
	padding: 5px 16px;
}

.table1 th {
	background-color: #BFCBFF;}

.p_top {
	margin-top: 30px;}

.p_bottom {
	margin-bottom: 30px;}

ブラウザで表示【 FireFox 】

IEtester【 IE7 】

IEtester【 IE8 】

IEtester【 IE9 】

ブラウザで表示【 Chrome 】

HTML5 Outliner【 Chrome 】

PAGE TOP