本テンプレートについて(HTML or PHP)
もしpjaxを使わない場合は、program/main.jsの「pjax オプションの指定」および「pjax 元JS」を全削除する。
もしレスポンシブが必要ない場合は、最下部にあるタブレット仕分け部分を削除し、PC仕分け部分の囲い(@media~の部分)を削除して普通にCSSとしてスタイル適用されるようにする
ページ内リンクのテストです。
テキスト装飾関連
ここではマーカーのテストを行っています。ここでは太字のテストを行っています。ここでは文字縮小のテストを行っています。ここでは文字拡大のテストを行っています。ここでは赤色テキストのテストを行っています。
ブロック要素関連
HTML5(エイチティーエムエル・ファイブ)は、HTMLの5回目に当たる大幅な改定版である。
HTML5はWHATWGによって2004年に定められたWeb Applications 1.0にWeb Forms 2.0を取り入れたものがW3Cの専門委員会に採用され、W3Cより2008年1月22日にドラフト(草案)が発表され、2014年10月28日に勧告された[1]。2016年9月にHTML 5.1が勧告予定。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
お問い合わせ
お問い合わせフォームのテンプレート
コードスタイル
当テンプレートのコードスタイルについて。
開始タグと終了タグの記号は秀丸F9で変換すること!
codeタグで囲むとexample
のようになる。なおクラス名にcode
を含めること。
シンタックスハイライトにはgoogle-code-prettify
を使っている。pre
で囲い、クラス名にはデフォルトでpre
とprettyprint
を加え、あとは言語を指定するためのlang-js | lang-css | lang-html
などのどれかを1つ必ず、および行番号をつけたい場合はlinenums
、任意の行番号から始めたい場合はlinenums:数字
のクラス名を与える。codeタグは各行それぞれにJSが勝手に組み込んでくれるので不要、preのみで囲う。
var year = faaaaaaaaaaaaaaaaaefaefawefawefaaaaaaaaaaaaaaaeefafaaaaaaaaaaaaaaaaaaefaefaefaefaefaaaaaaaaaaaaaaaaaaaaaaiduke.getFullYear(); var month = hiduke.getMonthaefaef()+1; var week = hiduke.getDay(); var day = hiduke.getDate();
@media print,projection { .com{color:#600;font-style:italic} .typ{color:#404;font-weight:700} .lit{color:#044} .pun,.opn,.clo{color:#440} .atn{color:#404} .str,.atv{color:#060} .kwd,.tag{color:#006;font-weight:700} }
<div class="module_code">▼ HTML</div>
テーブルスタイル
都道府県 | 地方 | 人口 |
---|---|---|
北海道 | 北海道 | 5,383,579 |
青森県 | 東北 | 1,308,649 |
岩手県 | 東北 | 1,279,814 |
宮城県 | 東北 | 2,334,215 |
都道府県 | 地方 | 人口 |
---|---|---|
北海道 | 北海道 | 5,383,579 |
青森県 | 東北 | 1,308,649 |
岩手県 | 東北 | 1,279,814 |
宮城県 | 東北 | 2,334,215 |
北海道 | 北海道 |
青森県 | 東北 |
岩手県 | 東北 |
宮城県 | 東北 |
北海道 | 北海道 |
---|---|
青森県 | 東北 |
岩手県 | 東北 |
宮城県 | 東北 |
都道府県 | 地方 | 人口 | 人口 | 人口 |
---|---|---|---|---|
北海道 | 北海道 | 5,383,579 | 5,383,579 | 5,383,579 |
青森県 | 東北 | 1,308,649 | 5,383,579 | 5,383,579 |
岩手県 | 東北 | 1,279,814 | 5,383,579 | 5,383,579 |
宮城県 | 東北 | 2,334,215 | 5,383,579 | 5,383,579 |
色々なスタイル
矢印を出したい場合は以下のコードで実装する。
<div class="arrow-bottom"><span></span></div>
作業フローは以下のとおり。
<aside class="flow"> <p><span>ここが始まり</span></p> <p><span>2番目はここにテキストを入力します</span></p> <p><span>ここが最後となります。</span></p> </aside>