記事の詳細

こんにちは!
前回は2019年のトレンドデザインをご紹介しました。
今回は入門編IIの続きで、表の作成をしていきます。

こんにちは!前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。HTMLは文字を入力、CSSはHTMLを装飾するファイルと覚えると楽かもしれません。コピ...

例えば、お問い合わせフォームや料金プランの表など使い方はさまざま。
ベーシックなタイプのもので練習していきましょう!
※お問い合わせフォームの動作には別途PHPの知識が必要になりますが、ここでは省きます。

便利なcssを先に読み込もう

①reset.cssの名称でファイルを作成

②作成後、下記をコピー&ペーストして、cssフォルダに保存

テーブルの骨組み!HTMLから入力

③今回使う新しいHTMLはこちら。
■<table>:テーブル作成用のタグ
■<tr>:テーブルの横一行を表すタグ
■<th>:テーブルの見出しタグ
■<td>:テーブルに記載する内容のタグ

<tr>タグは使い慣れるまで迷うことがあるかもしれません。
簡単な覚え方としては、見出しや内容を横一列で表示させたいと思ったら、
<tr></tr>のなかにすべて入れる!と考えてみるといいでしょう。
例えば、縦3列にする場合は<tr>タグの中に3つの<td>や<th>が入ることになります。

下記HTMLをコピー&ペーストで同じレイアウトになります。

CSSで見た目を整える

入門編Iのcssを思い出し、色や文字を整えていきましょう!

下記HTMLをコピー&ペーストで同じレイアウトになります。

あれ?CSSが反映されない

今皆さんが使っているブラウザはどれでしょうか。
IE、Edge、Chrome、FireFoxなどお使いのブラウザにより表示のされ方が少し異なる場合があります。
新しく導入されるCSSを使うときには、ベンダープレフィックスと呼ばれる各ブラウザに適用させるための
記述をCSSに加えることで、同じように対応させる方法があります。

このような記事を参考にしてみてくださいね。
ベンダープレフィックス:http://www.htmq.com/csskihon/603.shtml

これまでに解説してきた基本のHTML、CSSではブラウザによる差の出ないものを使用しています。
反映されない場合は、ファイルの読み込み方や開始タグと終了タグと呼ばれる部分が抜けているかもしれません。(例)pタグの場合は <p>が開始タグ </p>終了タグ

 

以上です!
テーブルレイアウトを使って、1回目、2回目よりデザインの幅が広がりましたね。
少しずつですが、できることを増やしていきましょう!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る