1 はじめに
- ホームページを作りたいと思いました。
- しかし初心者であるため、中々上手く作ることが出来ませんでした。
- 実際にホームページを作っている友人を頼ることにしました。
- 今回はその友人から教えてもらったものの中で、個人的に役に立つと思うものをいくつかまとめてみました。
2 役に立ったもの
2-1<table>タグ
表を作成するために使用するタグ。
下のような表を作ることが出来ます。colspanやrowspanを用いることで結合もできます。
| これは表です。結合もできるよ。 | ||
| 項目1 | 項目2 | 項目3 |
|---|---|---|
| リンゴ | バナナ | オレンジ |
コード
<table>
<tr>
<td colspan="3">これは表です。結合もできるよ。
</tr>
<tr>
<th>項目1</th><th>項目2</th><th>項目3</th>
</tr>
<tr>
<td>リンゴ</td><td>バナナ</td><td>オレンジ</td>
</tr>
</table>
2-2メディアクエリー
スマホ対応をするときなどに使用します。
画面の大きさによってcssの処理を変更することができます。
記述する際は画面サイズが「大きい→小さい」もしくは「小さい→大きい」の順に記載してください。
コード
/* 画面サイズが1000pxまでのときに対応 */
@media screen and (max-width: 1000px) {
/* ここにcssを記述 */
}
/* 画面サイズが600pxまでのときに対応 */
@media screen and (max-width: 600px) {
/* ここにcssを記述 */
}
2-3padding
余白を作る際に使用します。
似たようなものにmarginというものもあります。
違いは余白を作る位置なのですが、この二つの違いはまだ感覚でしか理解できてないため説明は省きます。
今回はpaddingの値指定についてです。paddingは値の1～4つの値を設定して使います。
4つ値を指定する場合の、値に対応する位置を全く覚えきれず、使う度に調べてましたが友人から覚え方を教えていただきました。
4つ指定の場合は上、右、下、左の順番ですがこれは時計回りで覚えればよいそうです。
これでいちいち調べなくて済みます。
コード
/* 1つの値を設定した場合は、上下左右全てにその値が反映される */
padding:5px;
/* 2つの値を設定した場合は、上下に0px左右に5pxが反映される */
padding:0 5px;
/* 3つの値を設定した場合は、上に0px左右に3px下に5pxが反映される */
padding:0 3px 5px;
/* 4つの値を設定した場合は、上に0px右に1px下に3px左に5px全てにその値が反映される */
padding:0 1px 3px 5px;
2-4タグのmargin
htmlでよく利用するh1タグなどがありますが、こちらはあらかじめmarginが自動で設定されています。
そのため予測していたレイアウトとは、少し違った表示になることがあります。
h1 {margin: 0;}などで上手く調整しましょう。
3 最後に
この辺りを知っているだけでかなり作りやすくなりました。
自分で勉強するのもいいですが、やはり詳しい人に教えてもらうほうが効率いいですよね。