正規表現の基礎
☆★データーでの確認★☆
正規表現
ereg 関数
- あいまいで複雑な条件によって処理できるようになる。(例)「文字列内にA〜Gの英字以外が含まれていないか?」「先頭が php で、以降がa〜zで構成されているか?」
- 所定の特殊文字を組み合わせ、あいまいな検索条件(パターン)を表記
\ | ある文字の苗につける事によって、特殊な文字を表示する。 (例)検索する記号→表記 \ → \\ ^ → \^ 改行 → \n タブ → \t Perl 互換関数での「 / 」 → \/ |
---|---|
^ | この記号の次に指定された文字列で始まっていれば条件にマッチしたと判断 |
$ | この記号の前に指定された文字列で終わっていれば条件にマッチしたと判断 |
? | この記号の前に指定された文字が1ヶだけ含まれているか、あるいは1ヶも含まれていない場合に条件がマッチしたと判断 |
* | この記号の前に指定された文字が0ヶ以上含まれている場合、条件にマッチしたと判断 |
+ | この記号の前に指定された文字が1ヶ以上含まれている場合、条件にマッチしたと判断 |
{n} | この記号の前に指定された文字がn個連続している場合、条件にマッチしたと判断 |
{n,} | この記号の前に指定された文字がn個以上連続している場合、条件にマッチしたと判断 |
{n, m} | この記号の前に指定された文字がn個以上でm個以下連続している場合、条件にマッチしたと判断 |
| | この記号の前後に指定されたいずれかの文字列が含まれていれば、条件にマッチしたと判断 |
[ ] | カッコで囲まれた文字範囲がどこかに含まれていれば、条件にマッチしたと判断する。文字範囲は「 - 」で表す。範囲でなく、複数の文字を列挙することも可能 (例)チェックする内容→表記 数字が含まれているか? → {0-9} 大文字アルファベットが含まれているか? → [A-Z] 数字と大文字アルファベットの両方が含まれているか? → [0-9][A-Z] 数字またはアルファベットが含まれているか? → [0-9A-Za-z] |
. | \n(改行)以外の任意の文字を表す |
(指定なし) | 任意の文字列が含まれていれば条件にマッチしてたと判断 |
- 指定した正規表現のパターンにマッチ(適合)する文字列が見つかった場合はTure,見つからない場合はFalseを返す。
【 書式 】
<?php // $data1 = "ABCDEFGBDF"; // $data2 = "950ZYUPQ3X"; // $data3 = "PHP Apache MySQL"; print "例1:" . (ereg("^A", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例2:" . (ereg("D$", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例3:" . (ereg("[A-G]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例4:" . (ereg("[0-9] [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例5:" . (ereg("[0-9] | [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例6:" . (ereg("x*", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例7:" . (ereg("x+", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例8:" . (ereg("MySQL", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例9:" . (ereg("[0-9]", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例10:" . (ereg("....A", $data3)? "マッチ" : "アンマッチ") . "<br>"; ?>
例 | マッチしているか? |
---|---|
例1 | $data1 は「A」で始まっているのでマッチ |
例2 | $data1 は「D」で終わっているのでマッチ |
例3 | $data2 には「A〜G」が含まれていないのでアンマッチ($data1ならマッチ) |
例4 | $data2 には「0-9」と「a-g」の両方は含まれていないのでアンマッチ |
例5 | $data2 には「a-g」は含まれてないが「0-9」含まれているのでマッチ |
例6 | $data3 には「X」が0個以上含まれている(=含まれていなくてよい)のでマッチ |
例7 | $data3 には「X」が1ヶ以上含まれていないのでアンマッチ |
例8 | $data3 には「SQL」が含まれているのでマッチ |
例9 | $data3 には「0-9」が含まれていないのでアンマッチ |
例10 | $data3 は5文字目が「A」なのでマッチ(1-4文字は何でもよい) |
- ereg 関数は大文字と小文字を区別する。区別せずに検索したい場合にはeregi関数を使う。また、Perl文法に基づく正規表現を使いたい場合はpreg_match関数を使う。いずれもereg関数と同様の引数、返り値で扱うことができる。
ソースコード
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="同類のデーターを同じ変数でまとめて管理できる。配列の処理"> <meta name="keywords" content="PHPスクリプトの基本,配列の処理"> <meta name="viewport" content="width=device-width"> <title>PHPスクリプトの基本 | 配列の処理</title> <link href="../css/reset.css" rel="stylesheet" type="text/css" media="all"> <link href="../css/style2.css" rel="stylesheet" type="text/css" media="all"> <!--[if lt IE 9]> <script src="../js/html5shiv.js"></script> <![endif]--> </head> <body> <div id="container"> <header id="header"> <div class="header-top"> <div class="head-top"> <p><a href="http://d.hatena.ne.jp/webry/" target="_blank"><span class="icon">PHP</span></a>webサイト制作</p> </div> </div> <div class="head"> <h1><img src="../images/img-set01/main_img.png" width="960" height="138" alt="Web開発のためのPHP-Webサイト制作-"></h1> <p class="sec-title"><span>正規表現の基礎</span></p> </div> </header> <div id="contents"> <section class="col1"> <h1><span>1-1</span>正規表現</h1> <div id="post01" class="post"> <p class="point">ereg 関数</p> <h2><a href="#post01"><span>ereg 関数</span></a></h2> <div class="post_inner"> <div class="inner"> <ul> <li>あいまいで複雑な条件によって処理できるようになる。(例)「文字列内にA〜Gの英字以外が含まれていないか?」「先頭が php で、以降がa〜zで構成されているか?」</li> <li>所定の特殊文字を組み合わせ、あいまいな検索条件(パターン)を表記</li> </ul> <table> <caption>▼ PHPで使用できる正規表現</caption> <tr> <th>\</th><td>ある文字の苗につける事によって、特殊な文字を表示する。<br>(例)検索する記号→表記<br> \ → \\ ^ → \^ 改行 → \n タブ → \t Perl 互換関数での「 / 」 → \/</td> </tr> <tr> <th>^</th><td>この記号の次に指定された文字列で始まっていれば条件にマッチしたと判断</td> </tr> <tr> <th>$</th><td>この記号の前に指定された文字列で終わっていれば条件にマッチしたと判断</td> </tr> <tr> <th>?</th><td>この記号の前に指定された文字が1ヶだけ含まれているか、あるいは1ヶも含まれていない場合に条件がマッチしたと判断</td> </tr> <tr> <th>*</th><td>この記号の前に指定された文字が0ヶ以上含まれている場合、条件にマッチしたと判断</td> </tr> <tr> <th>+</th><td>この記号の前に指定された文字が1ヶ以上含まれている場合、条件にマッチしたと判断</td> </tr> <tr> <th>{n}</th><td>この記号の前に指定された文字がn個連続している場合、条件にマッチしたと判断</td> </tr> <tr> <th>{n,}</th><td>この記号の前に指定された文字がn個以上連続している場合、条件にマッチしたと判断</td> </tr> <tr> <th>{n, m}</th><td>この記号の前に指定された文字がn個以上でm個以下連続している場合、条件にマッチしたと判断</td> </tr> <tr> <th>|</th><td>この記号の前後に指定されたいずれかの文字列が含まれていれば、条件にマッチしたと判断</td> </tr> <tr> <th>[ ]</th><td>カッコで囲まれた文字範囲がどこかに含まれていれば、条件にマッチしたと判断する。文字範囲は「 - 」で表す。範囲でなく、複数の文字を列挙することも可能<br> (例)チェックする内容→表記<br> 数字が含まれているか? → {0-9}<br> 大文字アルファベットが含まれているか? → [A-Z]<br> 数字と大文字アルファベットの両方が含まれているか? → [0-9][A-Z]<br> 数字またはアルファベットが含まれているか? → [0-9A-Za-z]</td> </tr> <tr> <th>.</th><td>\n(改行)以外の任意の文字を表す</td> </tr> <tr> <th>(指定なし)</th><td>任意の文字列が含まれていれば条件にマッチしてたと判断</td> </tr> </table> <ul> <li>正規表現による文字列内の検索を行うには ereg 関数を使う。この関数では、第1引数に「正規表現の文字列」、第2引数に「検索対象になる文字列」を指定する。</li> <li>指定した正規表現のパターンにマッチ(適合)する文字列が見つかった場合はTure,見つからない場合はFalseを返す。</li> </ul> </div> </div> </div> </section> <section class="col-code"> <div id="post02" class="post"> <h2><a href="#post02"><span>PHPのコードを表示</span></a></h2> <div class="post_inner"> <div class="inner"> <pre> <code> // $data1 = "ABCDEFGBDF"; // $data2 = "950ZYUPQ3X"; // $data3 = "PHP Apache MySQL"; print "例1:" . (ereg("^A", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例2:" . (ereg("D$", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例3:" . (ereg("[A-G]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例4:" . (ereg("[0-9] [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例5:" . (ereg("[0-9] | [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例6:" . (ereg("x*", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例7:" . (ereg("x+", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例8:" . (ereg("MySQL", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例9:" . (ereg("[0-9]", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例10:" . (ereg("....A", $data3)? "マッチ" : "アンマッチ") . "<br>"; </code> </pre> </div> </div> </div> </section> <section class="col2"> <div id="post03" class="post"> <h2><a href="#post03"><span>PHPでの表示</span></a></h2> <div class="post_inner"> <div class="inner"> <div class="php"> <?php // $data1 = "ABCDEFGBDF"; // $data2 = "950ZYUPQ3X"; // $data3 = "PHP Apache MySQL"; print "例1:" . (ereg("^A", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例2:" . (ereg("D$", $data1) ? "マッチ" : "アンマッチ") . "<br>"; print "例3:" . (ereg("[A-G]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例4:" . (ereg("[0-9] [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例5:" . (ereg("[0-9] | [a-g]", $data2) ? "マッチ" : "アンマッチ") . "<br>"; print "例6:" . (ereg("x*", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例7:" . (ereg("x+", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例8:" . (ereg("MySQL", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例9:" . (ereg("[0-9]", $data3) ? "マッチ" : "アンマッチ") . "<br>"; print "例10:" . (ereg("....A", $data3)? "マッチ" : "アンマッチ") . "<br>"; ?> </div> <table> <caption>▼表 結果のまとめ</caption> <tr> <th>例</th><th>マッチしているか?</th> </tr> <tr> <td>例1</td><td>$data1 は「A」で始まっているのでマッチ</td> </tr> <tr> <td>例2</td><td>$data1 は「D」で終わっているのでマッチ</td> </tr> <tr> <td>例3</td><td>$data2 には「A〜G」が含まれていないのでアンマッチ($data1ならマッチ)</td> </tr> <tr> <td>例4</td><td>$data2 には「0-9」と「a-g」の両方は含まれていないのでアンマッチ</td> </tr> <tr> <td>例5</td><td>$data2 には「a-g」は含まれてないが「0-9」含まれているのでマッチ</td> </tr> <tr> <td>例6</td><td>$data3 には「X」が0個以上含まれている(=含まれていなくてよい)のでマッチ</td> </tr> <tr> <td>例7</td><td>$data3 には「X」が1ヶ以上含まれていないのでアンマッチ</td> </tr> <tr> <td>例8</td><td>$data3 には「SQL」が含まれているのでマッチ</td> </tr> <tr> <td>例9</td><td>$data3 には「0-9」が含まれていないのでアンマッチ</td> </tr> <tr> <td>例10</td><td>$data3 は5文字目が「A」なのでマッチ(1-4文字は何でもよい)</td> </tr> </table> <p class="notes">ereg 関数は大文字と小文字を区別する。区別せずに検索したい場合にはeregi関数を使う。また、Perl文法に基づく正規表現を使いたい場合はpreg_match関数を使う。いずれもereg関数と同様の引数、返り値で扱うことができる。</p> </div> </div> </div> </section> <!-- /#contents --> </div> <footer id="footer"> <div class="foot clearfix"> <ul> <li><a href="http://d.hatena.ne.jp/webry/" target="_blank">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/" target="_blank">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://smart4me.net/webry/#!topPage" target="_blank">実践する為のWEBサイト情報 | webnote_mini(Smartphone専用サイト)</a></li> </ul> <ul> <li><a href="http://webrynote.jimdo.com/" target="_blank">動画で確認するscript | FlashとJavaScrip</a></li> <li><a href="http://webry.dousetsu.com/" target="_blank">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li> <li><a href="http://webry.org/" target="_blank">PortFolio | webryの作品集</a></li> <li><a href="http://www.tumblr.com/dashboard" target="_blank">Graphics board | 素晴らしいと思ったキャプチャーを貼っています。</a></li> </ul></div> <div class="foot-bottom"> <p ><small>Copyright© 2013 Web開発のためのPHP-Webサイト制作- All Rights Reserved.</small></p> </div> </footer> <!-- /#container --> </div> </body> </html>
@charset "utf-8"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
@charset "utf-8"; /*webfont*/ @import url(http://fonts.googleapis.com/css?family=Kavoon); @import url(http://fonts.googleapis.com/css?family=Plaster); /* bace ---------------------------------------------- */ body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; line-height: 1.4; font-size: 16px; color: #333;} /* style */ .b {font-weight: bold;} /* #container ---------------------------------------------- */ #container { background: url(../images/img-set01/bg.jpg);} #header, section { margin: 0 0 10px;} .header-top, .foot-bottom { padding: 4px 0 4px 0; background: #04009d; font-size: 10px; font-weight: bold; color: #fff;} .header-top { padding: 0 0 1px 0; font-size: 12px;} .head-top { background: url(../images/img-set01/header.png) no-repeat;} .header-top{ border-bottom: 2px solid #666;} .icon { font-family: 'Kavoon', cursive; margin: 0 10px 0 0; background: #F00; border-top: 1px solid #04009d; border-bottom: 1px solid #04009d; font-size: 16px; color: #000; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} .head, .head-top, #contents, .foot, .foot-bottom p:first-child { width: 960px; margin: 0 auto;} .head, #contents, .foot { background-color: rgba(255,255,255,0.55);} .col1 h1 { padding: 3px 30px 0; font-size: 24px;} .col1 h1 span { margin: 0 20px 0 -30px; padding: 3px 8px 0; color: #fff;} .sec-title { padding: 0 0 2px; font-size: 28px; text-align: center; border-bottom: 3px solid #3D6DFF;} .sec-title span { border-bottom: 2px solid #F00;} .head p:before { content: "7. "; font-family: 'Plaster', cursive; font-size: 32px;} .col1 h1 { margin: 0 0 10px; border: 1px solid #3D6DFF;} .col1 h1 span { background: #3D6DFF;} .col1 ul li { padding: 0 0 0 23px; background: url(../images/img-set01/circle03.png) no-repeat left 0.2em;} .col1 ul li ul.inner_list li { font-weight: bold; margin-top: 5px; background: none;} .col1 ul li ul.inner_list2 { margin-bottom: 10px;} .col1 ul li ul.inner_list2 li { font-weight: bold; margin-top: 5px; background: none;} .col1 ul li ul.inner_list_middledot li { font-weight: bold; margin-top: 5px; margin-bottom: 5px; background: none;} .col1 ul li ul.inner_list_middledot li:before { content: "・"; font-weight: bold;} .col1 ul li ul.inner_list_middledot li span { display: inline-block; margin: 0 0 0 10px;} .point { margin: 0 0 10px; padding: 26px 20px 33px 115px; background: url(../images/img-set01/point.png) no-repeat 10px 0em; font-size: 20px; color: #F00; font-weight: bold;} h2 { margin: 0 10px 10px; padding: 5px 15px 3px; border-top: 1px solid #3D6DFF; border-right: 1px solid #3D6DFF; border-bottom: 2px solid #3D6DFF; border-left: 15px solid #3D6DFF; border-radius: 8px 0 0 8px / 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px / 8px 0 0 8px; -ms-border-radius: 8px 0 0 8px / 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px / 8px 0 0 8px; background: #3D6DFF; font-size: 18px; } h2 span { display: block; width: 98%; padding: 3px 15px; background-color: rgba(255,255,255,0.85);} .inner { width: 90%; margin: 0 auto; padding: 0 0 15px;} .col1 ul.last_child li:last-child { display: inline-block; background: none; margin-top: 8px; font-size: 90%;} .col1 ul.last_child li:last-child::before { content: "※"; color: #F00; font-weight: bold; padding: 0 5px 0 0;} .col-code { display: none;} .col1 ul.notes li:last-child { display: inline-block; width: 80%; margin: 10px 0 0; padding: 8px 36px; background: none; border: 1px solid #03C; border-radius: 6px;} .col1 ul.notes li:last-child::before { content: "◎"; color: red; padding-right: 4px;} .php { padding: 10px; border: 2px dotted #F30; background-color: rgba(61,109,255,0.45);} /*.col2 ul.notes { with: 80%; margin: 0 auto;}*/ .col2 ul.notes li:last-child { display: inline-block; width: 80%; margin: -10px auto 10px; padding: 8px 36px; background: none; border: 1px solid #03C; border-radius: 6px;} /*php の表記下に記述する*/ /*.notes:last-child::before { content: "◎"; color: red; padding-right: 4px;} .notes:last-child { display: inline-block; width:89%; margin: 10px auto 10px; padding: 8px 16px; background: none; border: 1px solid #03C; border-radius: 6px;}*/ /*php の表記下に記述する*/ .post h2 a:link, .post h2 a:visited, .post h2 a:hover, .post h2 a:active {color:#333;text-decoration:none;} hr.style { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));} .foot { padding: 20px 15px; background-color: rgba(0,0,0,0.85); color: #fff; font-size: 14px;} .foot ul { float: left; width: 48%; margin: 0 30px 0 0;} .foot ul + ul { margin: 0;} .foot-bottom p { padding: 3px 5px 8px 0; text-align: right;} .head-top p a:link, .head-top p a:visited, .head-top p a:hover, .head-top p a:active { text-decoration: none;} .foot a:link, .foot a:visited { color: #BB7DFF; text-decoration: underline;} .foot a:hover, .foot a:active { color: #D22D63; text-decoration: none;} /*table*/ table caption { font-size: 12px; text-align: left;} table { width: 100%; margin-top: 15px; border: 1px #000000 solid; border-collapse: collapse;} th { background: #3D6DFF; color: #fff;} th, td{ padding: 4px 6px; border: 1px #000000 solid;} .td_title { font-weight: bold;} p.table_set { margin-top: 5px;} /*clearfix*/ .clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix {display: inline-block;} /* Hides from IE Mac */ * html .clearfix {height: 1%;} .clearfix {display:block;} /* End Hack */ @media only screen and (max-width:320px) { #container { width: 100%; padding: 0 10px; background: url(../images/img-set01/bg.jpg);} .head h1 { text-align: center; padding: 5px 5px 0;} .head h1 img { display: none;} .head h1:before { content: "Web開発のためのPHP"; font-size: 22px; color: #039; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} .head h1:after { content: "-Webサイト制作-"; display: inline-block; font-size: 16px; color: #F00; text-shadow: 0 0 2px rgba(0, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5)} #header, section { margin: 0 0 10px;} .header-top { width: 100%; padding: 8px 0; font-size: 10px; color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d)); background: -webkit-linear-gradient(#09123c, #0e3e8d); background: -moz-linear-gradient(#09123c, #0e3e8d); background: -o-linear-gradient(#09123c, #0e3e8d); background: -ms-linear-gradient(#09123c, #0e3e8d); background: linear-gradient(#09123c, #0e3e8d);} .foot-bottom { width: 320px; padding: 12px 0 18px; font-size: 8px; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0e3e8d), color-stop(1.00, #09123c)); background: -webkit-linear-gradient(#0e3e8d, #09123c); background: -moz-linear-gradient(#0e3e8d, #09123c); background: -o-linear-gradient(#0e3e8d, #09123c); background: -ms-linear-gradient(#0e3e8d, #09123c); background: linear-gradient(#0e3e8d, #09123c);} .head-top { padding: 0 0 1px 0; font-size: 12px; background: none;} .header-top{ border-bottom: 2px solid #666;} .icon { display: inline-block; font-family: 'Kavoon', cursive; margin: 0 10px; background: #F00; border-top: none; border-bottom: none; font-size: 16px; color: #000;} .head, .head-top, #contents, .foot, .foot-bottom p:first-child { width: 100%;} .head, #contents, .foot { background-color: rgba(255,255,255,0.55);} .col1 h1 { padding: 3px 30px 0; font-size: 18px;} .col1 h1 span { margin: 0 20px 0 -30px; padding: 3px 8px 0; color: #fff; inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4)} .sec-title { padding: 0; font-size: 19px; text-align: center; border-bottom: 3px solid #3D6DFF;} .sec-title span { padding: 0 0 5px; border-bottom: 2px solid #F00;} .head p:before { content: "7. "; font-family: 'Plaster', cursive; font-size: 24px;} .col1 h1 { margin: 0 0 10px; border: 1px solid #3D6DFF;} .col1 h1 span { text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2947ff), color-stop(0.00, #3883ff)); background: -webkit-linear-gradient(#3883ff, #2947ff); background: -moz-linear-gradient(#3883ff, #2947ff); background: -o-linear-gradient(#3883ff, #2947ff); background: -ms-linear-gradient(#3883ff, #2947ff); background: linear-gradient(#3883ff, #2947ff);} .col1 ul li { padding: 0 0 0 20px; background: url(../images/img-set01/circle03.png) no-repeat left 0.25em;} .point { position: relative; margin: 0; padding: 10px 15px 10px 35px; background-image: none; color: #F00; text-align: left; font-weight: bold;} .point:before { position: absolute; top: -15px; left: -15px; content: "P"; display: block; width: 24px; height: 24px; margin: 0; padding: 5px; border:5px solid #F00; border-radius: 60px; font-size: 32px; font-weight: bold; color: #f00; text-align: center; background: #F5BEC4; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} h2 { margin: 0 0 10px; padding: 2px 5px; border-top: 1px solid #3D6DFF; border-right: 1px solid #3D6DFF; border-bottom: 1px solid #3D6DFF; border-left: 1px solid #3D6DFF; border-radius: 0 / 0; -moz-border-radius: 0 / 0; -ms-border-radius: 0 / 0; -webkit-border-radius: 0 / 0; background: #3D6DFF; font-size: 18px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db)); background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);} h2 span { display: block; width: 95%; margin: 0 auto; padding: 3px 5px; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #cecece), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#cecece, #fff); background: -moz-linear-gradient(#cecece, #fff); background: -o-linear-gradient(#cecece, #fff); background: -ms-linear-gradient(#cecece, #fff); background: linear-gradient(#cecece, #fff);} .inner { width: 95%; margin: 0 auto; padding: 0 0 15px;} .col1 ul.notes li:last-child { display: inline-block; width: 95%; margin: 10px auto 0; padding: 8px 5px; background: none; border: 1px solid #03C; border-radius: 6px; font-size: 14px;} .php { padding: 10px; border: 2px dotted #F30; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #d5defd), color-stop(1.00, #7a9bcd)); background: -webkit-linear-gradient(#d5defd, #7a9bcd); background: -moz-linear-gradient(#d5defd, #7a9bcd); background: -o-linear-gradient(#d5defd, #7a9bcd); background: -ms-linear-gradient(#d5defd, #7a9bcd); background: linear-gradient(#d5defd, #7a9bcd);} .col-code { display: inherit; font-size: 14px; word-wrap:break-word;} .foot { padding: 15px 0; color: #fff; font-size: 12px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #131313), color-stop(1.00, #4b4b4b)); background: -webkit-linear-gradient(#131313, #4b4b4b); background: -moz-linear-gradient(#131313, #4b4b4b); background: -o-linear-gradient(#131313, #4b4b4b); background: -ms-linear-gradient(#131313, #4b4b4b); background: linear-gradient(#131313, #4b4b4b);} .foot ul { float: none; width: 90%;/**/ margin: 0; padding: 0 15px;} .foot ul li { padding: 0 0 10px;} .foot ul + ul { margin: 0;} .foot-bottom p { padding: 3px 5px; text-align: center;} /* 折りたたみ表示 */ .post .post_inner {display:none;} .post:target .post_inner {display: block;} }
ブラウザで表示【 FireFox 】
IEtester【 IE8 】
IEtester【 IE9 】
ブラウザで表示【 Chrome 】
iPhone【 MbileSfari 】