| HTML５【CSS3】 | <!--記事-->【/*--記事--*/】 |
|---|
| 文書の基本 | |
| <!DOCTYPE html> | DOCTYPE宣言(HTML5) |
| <html lang=”ja”> | html開始(言語=日本語) |
| <head> | ヘッド開始 |
| <meta charset=”utf-8”> 【@charset “utf-8”;】 | 文字コード UTF-8 |
| header<meta name="viewport" content="width=device-width"> | デバイス幅でCSSを変える場合 |
| <title>★</title> | ★文書のタイトル名(非表示) |
| <meta name="author" content="▲"> | ▲文書の著者(検索用)(任意) |
| <meta name="keywords" content="▲,▼"> | ▲.▼キーワード(検索用)(任意) |
| <meta name="description" content="▲"> | ▲説明(検索用)(任意) |
| <link rel="shortcut icon" href="▲.ico" type="image/vnd.microsoft.icon"> | ▲httpのアイコン指定(任意) |
| <link rel="stylesheet" href="◆.css">又は<style>☐</style> | ◆.css読込又は☐CSS記入 |
| <script src="◆.js"></script>又は<script>☐</script> | ◆.jsを読込又は☐JS記入 |
| </head> | ヘッド終了 |
| <body> 【body {▲: ▼; }】 | ボデイ(本文)開始 |
| <div id=”◆”>☆</div> ◆container,--【#◆ {▲: ▼; }】 | ◆ブロック範囲(属性)【CSS】 |
| <span class=”◆”>☆</span> 【.◆ {▲: ▼; }】 | ◆クラス指定【CSS】 |
| <header>☆</header> 【header {▲: ▼: }】 | ☆先頭文【マージン.色等】 |
| <footer>☆</footer> 【footer{▲: ▼: }】 | ☆末尾文【マージン,色等】 |
| <section>☆</section>/<article>/<nav>/<aside>/<address>/<menu>/<main> | 章,単文,ナビ,補足,--- |
| </body> </html> | ボデイ(本文)終了,html終了 |
| テキスト・リスト | |
| <h◆>☆</h◆> 【h◆ {▲: ▼: }】 | 見出し◆1～6(大～小文字) |
| <p>☆</p> ☆<br> ☆<wbr> 【p {▲: ▼: }】 | 段落,改行,英数字改行可 |
| <pre>☆</pre> | 入力通り表示 |
| <blockquote cite=”◆”><p>☆</p></blockquote> <q cite=”◆”>☆</q> | 長文/短文引用◆引用元url |
| <cite>☆</cite> <dfn>☆</dfn> | [情報源]定義語 |
| <em>☆</em> <strong>☆</strong> 【em {▲: ▼: }】 | 斜体強調,太字強調 |
| <sup>☆</sup> <sub>☆</sub> | 上付き文字,下付き文字 |
| <ins>☆</ins> <del>☆</del> | 追記の下線,削除の取消線 |
| <marquee width=”◆” behavior=”◇”>☆</marquee> ◇scroll,alternate,slide | スクロール◆幅 ◇繰返し,左右移動,端で停止 |
| <ul type=”◆”><li>☆</li><li>☆</li></ul> ◆disc,circle,square | 番号無リスト,・○■項目 |
| <ol *><li>☆</li><li>☆</li></ol> (*start=”n”) n番号の指定 | 番号順リスト,1,2--項目 |
| 【{list-style-type: ★; }】★disc,circle,square,decimal,lower/upper-roman,lower/upper-alpha,cjk-ideographic | 印●,○,■,12-,ⅰⅱ-,ⅠⅡ-,ab-/AB-,一二 |
| 【{list-style-image: url(★); }】 ★ホルダー/ファイル名 | リストマーク画像 |
| 【{list-style-position: ★; }】 ★outside,inside | マークを項目ボックス外,内 |
| 【{text-decoration: ★;}】 ★underline,overline,line-through,blink,none | 下線,上線,取消線,文字点滅.無 |
| 【{text-align: ★; }】 ★left,right,center,justify | 左詰め,右詰め,中央,均等 |
| 【{text-indent: ★; }】 ★10pt,1em,5%,1rem | １行目インデント挿入幅 |
| 【{white-space: pre; }】 | 空白や改行をそのまま表示 |
| 【{vertical-align: ★ }】 ★baseline,top,middle,bottom,sub,super | 垂直位置ﾍﾞｰｽ,上中下,上下付 |
| 【{writing-mode: vertical-rl; }】 | 縦書き表示 |
| <dl><dt>☆</dt><dd>★</dd><dl> | リスト☆項目★内容 |
| <ruby>☆<rp>★</rp></ruby> | ルビ☆漢字★ふりがな、 |
| <sup>※</sup> <sub>※</sub> ※文字 | 上付き/下付き文字 |
| &の後に nbsp;/ensp;/emsp;(空白小-中),copy;(©),lt;(<),gt;(>),quot;("),amp;(&) | 特殊文字(空白,コピーライト,<,>,",&) |
| フォント | |
| <span style="font: ★ ◆ ▲ ▼/● ■;">☆</span> 下記（注：<font>はhtml5から廃止） | span&styleで代替 |
| 【{font: ★ ◆ ▲ ▼/● ■; }】 | フォント |
| 【{font-style: ★; }】 省略可★italic,oblique,normal | イタリック,斜体,通常 |
| 【{font-variant: ◆; }】 略可◆small-caps,normal | 大文字縮小,通常 |
| 【{font-weight: ▲; }】 ▲100〜900(400/500) | 文字の太さ |
| 【{font-size: ▼; }】 ▼small,medium,large,pt,em,px,rem | 文字の大きさ(標準14pt) |
| 【{line-height: ●; }】 ●140% | 行の高さ |
| 【{font-family: ■; }】 ■serif,sans-serif,cursive,“HGPsoeikakupoptai”,”HGPgyoshotai” | 明朝,ゴシック,草書,創英角ポップ,行書 |
| 【{text-shadow: 右 下 ボカシ 色 (,-左 -上 ボカシ 色;}】 単位:px | 影（ボカシ） |
| <font style="filter:glow(color=◇);width:100%" color=”◆”>☆</font> | ネオン文字◇枠色◆文字色 |
| ページ・枠・配置 | |
| white #ffffff |
silver #c0c0c0 |
gray #808080 |
black #000000 |
lime #00ff00 |
olive #808000 |
| green #008000 |
teal #008080 |
aqua #00ffff |
red #ff0000 |
maroon #800000 |
yellow #ffff00 |
| blue #0000ff |
navy #000080 |
purple #800080 |
fuchsia #ff00ff |
rgba(*r,*g.*b,*a)) *r/g/b：色0-255、a：透明度0-1 |
|
| <body leftmargin=”◆” topmargin=”▲” rightmargin=”▼”>☆</body> | 余白◆左▲上▼右 |
| <hr size=”★” width=”◆” align=”▲” color=”▼” /> | 横罫線★太◆長▲位▼色 |
| 【{background: ★ ◆ ▲ ▼ ●; }】 | 背景 |
| 【{background-color: ★; }】 ★色指定,transparent | 背景色,透明(親背景色) |
| 【{background-image: url(◆); }】 ◆ホルダー/ファイル名 | 背景画像 |
| 【{background-repeat: ▲; }】 ▲repeat,repeat-x/y,no-repeat | 画像繰返し縦横,横/縦,1つ |
| 【{background-attachment: ▼; }】 ▼scroll,fixed | 文書と共にスクロール,固定 |
| 【{background-position: ●; }】 ●left,center,right,top,bottom | 位置左,中央,右,上,下 |
| 【{margin: ★; margin-top/right/bottom/left: ★; }】 ★px,auto | 余白ピクセル数,自動調整 |
| 【{padding: ★; padding-top/right/bottom/left: ★; }】 ★px | 外枠から文書までの余白 |
| 【{border: ★ ◆ ▲; }】【{border-top/right/bottom/left: ★ ◆ ▲; }】 | 外枠 |
| 【{border-width: ★; }】 ★thin,medium,thick,2px | 線の幅 細,中,太,ピクセル数 |
| 【{border-style: ◆; }】 ◆solid,double,dotted,dashed,groove,ridge | 実,二,点,破,凹,凸,内凹,内凸 |
| 【{border-color: ▲; }】 ▲色指定 ↓inset,outset | 線の色 |
| 【{border-radius: ▲; }】 ▲(px) ▲左上 右上/左上 右上 | 角丸 半径:横/縦 |
| 【{box-shadow: ★ ◆ ■ ▲;}】 ★横シフト(px)◆縦シフト■ぼかし▲色(black) | 影 |
| 【{posion: ★; }】 ★static,relative,absolute | 配置方法 通常,相対,絶対 |
| 【{z-index: ★; }】 ★1,2,--整数 | 重なり順序(小:背面,大:前面) |
| 【{overflow: ★; }】 ★visibleﾊﾐ出し,hidden表示無,scrollｽｸﾛｰﾙ | 内容が収まらない場合 |
| 【{cursor: ★; }】 ★default,crosshair,pointer,move,wait | カーソル形,矢,+,手,十矢,回 |
| 【{float: ★; }】【{clear: ◆; }】 ★left,right,none ◆both,left.right | ボックス領域左/右、解除 |
| 【display: ★】 ★block、inline、inline-block | ブロック縦配置、横並び、横枠 |
| <p id=”★”>☆</p> 【#★ {position: ◆; top: ▲; left: ▼;background-color:△}】 ◆static,relative,absolute,fixed ▲▼距離px△色指定 | 配置方法の指定◆通常,相対,絶対,画面固定 |
| 【min-width：★、max-width：☆】 ★0～npx、☆npx～none | 最小/最大幅の指定 |
| イメージ | |
| <img src=”★” alt=”◆”> ★ホルダー/ファイル名 | ★画像ファイル名◆画像名 |
| <img src=”★” width=”▲” height=”▼”> （注：align/border/spaceはhtml5から廃止） | ▲画像幅▼高さ 注:単位不要 |
| <figcaption>★</figcaption> 注：<img--->と一緒に<figure>で囲む | 図表のキャプション |
| 【img { float: left; padding-right: 1em; padding-bottom: 1em} | 写真を左テキストを右。余白 |
| <p class=”clear”>☆</p> 【.clear { clear: left}】 | 写真からテキストの流し込み中止 |
| 【img:nth-of-type(★) { float:left; padding-right::1em;}】 ★odd,even | 図番号(偶数/奇数)で配置指定 |
| 【img[src#=”★.jpg”] { float:left; padding-right::1em;}】 ★数字 | 図番号(★)で配置指定 |
| リンク | |
| <a href=”◆” target=”▲”>☆</a> 注：targetは使用しない方向 ▲_blank新フレーム,_selfリンク元と同じ,_top現フレーム解除 | ◆リンク先url ▲表示方法 |
| <a href=”◆#▲”>☆</a> ｼﾞｬﾝﾌﾟ先に記載<a name=”▲”>★</a> | ◆ｼﾞｬﾝﾌﾟ先url ▲名前 |
| <script type="text/javascrip">mail = "◆" + "@" + "▲"; document.write("<a href='mailto:" + mail + "'>☆</a>"); </script> | 悪用対策メール送◆@▲メールアドレス |
| <iframe src=”★” id=”◆” width=”▲” height=”▼”>この部分はiframe対応ブラウザで見て下さい</iframe> | インラインフレーム(Youtube等貼り付け) |
| <a href=”#◆”> ページ内ジャンプ先<id=”◆”> | ページ内リンク |
| テーブル | |
| <table> | 表 |
| <thead><tr><th>☆</th><th>☆</th></tr></thead> | 表頭,行始,見出し, |
| <tbody><tr><td>☆</td><td>☆</td> </tr>------</tbody> | 表本体,行始,セル,改行 |
| </table> | 表終 |
| <caption>☆</caption> | 表題 |
| <td rowspan=”★”>☆</td> <th>も同じ | 縦方向に連結する★セル数 |
| <td colspan=”★”>☆</td> <th>も同じ | 横方向に連結する★セル数 |
| <table border="1"> 注：borderは"1"のみ | 表線ありの作成 |
| <table class=”☆”> 【table.☆ {★}】 | 表を下記CSSで指定 |
| 【{table-layout: ◆; }】 ◆fixed,auto | 表幅決定,１行指定幅,全読 |
| 【{width: ◆; }】 ◆幅(単位px/rem/%) | 幅指定 |
| 【{border-collapse: separate; border-spacing: ★; }】 ★0.5em | ボーダを分離,枠間幅 |
| 【{caption-side: ★; }】 ★top,bottom | キャプションの位置,上,下 |
| 【table,th,td {border: ★ ◆ ▲; }】 ★px◆solid▲#99ccff | 線枠の幅,形状,色 |
| 【td {padding: ★; }】 ★px | 枠と文字の余白 |
| <colgroup><col span="1" style="◆1"><col span="3" style="◆2"></colgroup> ◆スタイル1/2 | 列毎にスタイル指定 |
| <caption id=”★”>☆</capion> | キャプションの指定 |
| 【caption#★ {caption-side: ▲; font-weight: bolder; }】 ▲top,bottom | 表の上,下にキャプション |
| フォーム | |
| <form action=”★” method=”◆” enctype=”▲” target=”▼”>☆</form> ★データ送信先.cgi,◆get,post,▲MIMEタイプ,▼フレーム名 | 入力フォーム(get:URI&data,post:data送信) |
| <label>☆</lavel> ☆ラベル名 | ラベル |
| <fieldset><legend>◆</legend>☆1☆2</fieldset> ◆フィールド名＋☆1☆2複数ラベル | 複数のラベルを括るフィールド |
| <input type=”button” value=”☆” onclick="location.href='★'"> | ☆ボタン名 ★リンク先 |
| <input type=”submit” ★> <input type=”reset” ★ /> | 送信/リセット★ボタン名 |
| <input type=”★”◆*> ★text,password *required ◆name/size/value/maxlength=”◇” | 一行テキストボックス*必要項目,名前,幅,最大文字 |
| <textarea ★>☆</textarea> ★name/cols(幅)/rows(行数)/wrap(改行)=”◇” wrap◇soft(画面上のみ),hard(有),off(無) | 複数行のテキストボックス,default:soft |
| <input type=”radio” ★ *> ★name/value(送text信text)=”◇” *checked” | ラジオボタン*チェックを付ける場合 |
| <input type=”checkbox” ★> ★name/value(送信text)=”◇” | チェックボックス |
| <input type=”★”> ★email/tel/url/number/password | 入力の内容(自動チェック有) |
| <placeholder=”★”> ★入力前の案内文字を記入 | 記入欄に入れる案内文字 |
| <select ★><option ◆>☆</option></select> ★name ◆value | プルダウンメニュー |
| <select size=”★” ◆><option ▲>☆</option></select> ★表示行数 | リストボックス |
| 注：フォーム用.cgi&.plをサーバにアップした後、属性を「755」とすること | [.cgi]&[.pl]のポート変更 |
| ビデオ・音楽 | |
| <video ★ width=”▲”> ★controls,autoplay,loop,muted,poster(URL) | 動画を再生する |
| <source src='◆.ogv' type='video/ogg; codecs="theora,vorbis"'> | ★操作ﾊﾟﾈﾙ,自動再生繰返ﾐｭｰﾄ |
| <source src=”◆.mp4” type=”video/mp4">< p>動画を再生するには、videoをサポートしたブラウザが必要です。</p>< /video> | Vidio再生不可時の画像URL |
| <audio ★><source src=”◆.mp3” type=”audio/mp3”></audio> | 音声を再生する |
| フレックスボックス | |
| <div class=”box”>【.box {display: flex;} 】 | フレックスボックスの指定 |
| 【{flex-direction: ▲;}】▲:row/row-reverse/column/column-reverse | ボックスの方向(横順/逆/縦/逆) |
| 【{flex-wrap}】wrap(有)/nowrap(無)/wrap-reverse(有逆順) | Flexアイテムのコンテナ内折り返し |
| 【{flex-flow: row wrap}】row/column wrap/nowrap | 上記をまとめて指定 |
| 【{order: ▲;}】▲:1/-1/-- | 指定ボックスの位置変更(後/前) |
| 【{flex-grow: ▲;}】▲:1/2/-- | ボックスの伸びる倍率を指定 |
| 【{flex-shrink: ▲;}】▲:1/2/-- | ボックスの縮む倍率を指定 |
| 【{flex-basis: ▲;}】▲:auto/△px(-growも指定) | ボックスの最小幅を指定 |
| 【{justify-content: ▲;}】▲:flex-start/end.center,space-between/around | 左右配置(左/右.中央,間隔左0/全) |
| 【{align-items: ▲;}】▲:flex-start/flex-end/center/baseline/stretch | 上配置/下/中央/線上/同一) |
| 【{align-content: ▲;}】▲:flex-start/flex-end/center/space-between/space-around/ | 複数行配置(上/下/中央/間隔/全間) |
| 【@media (max-width: 768px) { ◆：◇；}】max-widthは幅768px未満で適用,>(min-width:)以上 | 画面幅でCSSを変える |
| その他 | |
| <☆ title="◆">◇</☆> ☆p/strong/font-- ◆説明文◇対象文 | マウスオーバーで説明文表示 |
| <☆ data-toggle=”popover” title=”◆”>◇</ ☆> ◆説明文◇対象文 | ポップオーバー |
| 【{width/height=☆px/pt/rem/%/vw/vh/vmin/vmax}】 | 単位(v:端末縦横Vierportの%) |
| 【{calc(☆}】☆例{min-height: calc(100vh – 32px);}】 | 計算 |
| <☆ style="◆;◇;"> ◆/◇スタイル要素 | タグに直接スタイル要素を記入 |
