記事の詳細
【はじめてのHTMLとCSS】最初に作るHTML 入門編③～コピペできるテンプレート付
こんにちは！
前回は2019年のトレンドデザインをご紹介しました。
今回は入門編IIの続きで、表の作成をしていきます。
例えば、お問い合わせフォームや料金プランの表など使い方はさまざま。
ベーシックなタイプのもので練習していきましょう！
※お問い合わせフォームの動作には別途PHPの知識が必要になりますが、ここでは省きます。
今回のブログの見出しはコチラです！
便利なcssを先に読み込もう
①reset.cssの名称でファイルを作成
②作成後、下記をコピー&ペーストして、cssフォルダに保存
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .clearfix::after{ display: block; clear: both; content: ""; } |
テーブルの骨組み！HTMLから入力
③今回使う新しいHTMLはこちら。
■<table>：テーブル作成用のタグ
■<tr>：テーブルの横一行を表すタグ
■<th>：テーブルの見出しタグ
■<td>：テーブルに記載する内容のタグ
<tr>タグは使い慣れるまで迷うことがあるかもしれません。
簡単な覚え方としては、見出しや内容を横一列で表示させたいと思ったら、
<tr></tr>のなかにすべて入れる！と考えてみるといいでしょう。
例えば、縦3列にする場合は<tr>タグの中に3つの<td>や<th>が入ることになります。
下記HTMLをコピー&ペーストで同じレイアウトになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レッスン3｜htmlとcss</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/reset.css" rel="stylesheet" type="text/css"> </head> <body> <table> <tr> <th>体験レッスン</th> <th>初級レッスン</th> <th>中級レッスン</th> </tr> <tr> <td>¥0</td> <td class="popular">¥5,000</td> <td>¥8,000</td> </tr> <tr> <td>申し込み</td> <td>申し込み</td> <td>申し込み</td> </tr> </table> </body> </html> |
CSSで見た目を整える
入門編Iのcssを思い出し、色や文字を整えていきましょう！
下記HTMLをコピー&ペーストで同じレイアウトになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@charset "utf-8"; body{ background-color: #adff2f; } body table{ border: solid 1px; text-align: center; width: 500px; } body table tr{ border-bottom: solid 1px; } body table tr th, body table tr td{ border-right: solid 1px; border-bottom: solid 1px; padding: 10px 0; } |
あれ？CSSが反映されない
今皆さんが使っているブラウザはどれでしょうか。
IE、Edge、Chrome、FireFoxなどお使いのブラウザにより表示のされ方が少し異なる場合があります。
新しく導入されるCSSを使うときには、ベンダープレフィックスと呼ばれる各ブラウザに適用させるための
記述をCSSに加えることで、同じように対応させる方法があります。
このような記事を参考にしてみてくださいね。
ベンダープレフィックス：http://www.htmq.com/csskihon/603.shtml
これまでに解説してきた基本のHTML、CSSではブラウザによる差の出ないものを使用しています。
反映されない場合は、ファイルの読み込み方や開始タグと終了タグと呼ばれる部分が抜けているかもしれません。（例）pタグの場合は <p>が開始タグ </p>終了タグ
以上です!
テーブルレイアウトを使って、1回目、2回目よりデザインの幅が広がりましたね。
少しずつですが、できることを増やしていきましょう！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
