【初めてのホームページ制作】#04 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ04

第4回ではCSSを使って横並びのリストの設定をしていきたいと思います。

手順001

手順001

CSSを使ってみよう

ヘッダーももう少しで完成に近づいてきましたね。

CSSとは『Cascading Style Sheets(カスケーディング・スタイル・シート)』の略で、ウェブページのスタイルを指定するための言語です。

これまでHTMLだけでコーディングをしてきましたが、特に装飾することもなく進めてきました。

このままHTMLだけを使っていくとコーディングしてきたものが上から下までただ並ぶだけになります。

まずは先にリストを作ってみましょう。

横並びのリストを作ってみよう

次に使う要素はul要素、li要素です。

ul要素はUnordered Listの略で、順序のないリストを表示する際に使用します。
li要素はそのままのListの略で、ul要素とli要素は大体いつもセットになります。

ulタグの中にliタグを記述といったイメージです。HTMLの親子関係についてはこちらのHTML【 要素の親子関係】をわかりやすく説明するよ!で確認してくださいね。
HTMLは入れ子構造となっていて開始タグと終了タグの間にさらにタグを埋め込んでいくような形になっています。

手順002

手順002

ulタグの中にliタグが入ることでliタグがリストとしての本当の力を発揮することができるといったイメージでよいかと思います。

次のコードをimgタグの最後で改行して張り付けてみてください。

■HTML

<ul>
	<li>サイトマップ</li>
	<li>お問い合わせ</li>
</ul>

表示させるとこんな感じになりましたか?

手順003

手順003

リスト表示は出来たけど、サンプルと比較するといくつか違う点がありますね。

手順004

手順004

  • リストが横並び
  • 文字サイズが少し小さい
  • リストの黒ポチがなくてアイコンがある
  • リストがリンクになっている
  • リストが右に配置されている

これら5つの異なる項目点を、CSSを使ってサンプルと同様なスタイルに変えていきたいと思います。

CSSを記述する場所はindex.htmlファイル内の<head>開始タグと</head>終了タグの中に記述する必要があります。このような感じですね。

手順005

手順005

上記の画像内で『text/css』を記述するとスタイルを記述できるとありますが、厳密には、属性は記述しなくても大丈夫です。『<style>~</style>』だけでもOKということです。

記述してあげることで、『ここはCSSを記述しますよ!』ってことを明示的に示すことができるのでなるべくあった方がわかり易いということになります。

コピーして張り付けて、表示してみましょう。

■CSS


<style type="text/css">
  li{
   list-style:none;
  }
</style>

↓の画像のようにリストの黒ポチが消えましたか?

手順006

手順006

『list-style』とは、そのまんまリストのスタイルしてあげる。

『none』は無しって意味ですね。

3Wで考えると理解しやすいと思います。↓の画像でイメージしておいてくださいね。

手順007

手順007

CSSではセレクタ、プロパティ、値を定義することになります。

上記の例では『li』が『セレクタ』、『list-style』を『プロパティ』、『none』を『値』と定義しています。

それではスタイルをどんどん追加していきます。次はフォントサイズと横並びに変更しましょう。

『list-style:none;』の後ろで改行し、次のコードを追加してみてください。

■CSS

li{
list-style: none;
float: left;
font-size: 12px;
}

サイズが少し小さくなって、文字が横に一列になりましたね。

手順008

手順008

サイズの変更はプロパティに『font-size』を使い、値を『px(ピクセル)』単位で指定することになっています。14pxで標準サイズより一回り小さいサイズを指定できました。

ここで言う標準とは、文字サイズが指定されていなければブラウザ側で標準で用意しているサイズを使いますよーってことです。

次は『float』です。『float』をしっかり理解している人が少ないようです。

そう、僕もそのうちの一人です(笑)

★floatの値は3つ!

説明
left 指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
right 指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
none 特に配置を指定しません。これが初期値です

今はそんなに理解せずとも徐々に理解できますので(”^ω^)・・・
もし、floatについて理解を深めたい方はTECH ACADEMYさんの記事が理解しやすいですので参考にどうぞ!
目的はあまり難しく考えずホームページを作ってみよう!がコンセプトなので(笑)

横並びになったのはいいんですが、リスト同士がくっついてしまいましたね。
文字と文字の間に余白を入れたいと思います。次のコードを『li』セレクタに追加してください。

■CSS

margin-left:15px;

これでリストとリストの間に15px分の余白ができました。

手順009

手順009

『margin~』は余白を設定するプロパティなんですがここで『ボックスモデル』という概念を理解しないといけません。これについてはこちら→【CSS【ボックスモデル】をわかりやすく説明するよ!】の記事を確認してみてくださいね。

と、ここで第4回はこの辺りで終わります。

ここまでで↓の2つの項目が実現できましたね。

  • リストが横並び
  • 文字サイズが少し小さい

第5回から残りの3つの項目を実現していきたいと思います。

【初めてのホームページ制作】#05 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ04

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA