マネして作ってみよう!(手順解説付き)第4回ではCSSを使って横並びのリストの設定をしていきたいと思います。手順001CSSを使ってみようヘッダーももう少しで完成に近づいてきましたね。Sheets(カスケーディング・スタイル・シート)』の略で、ウェブページのスタイルを指定するための言語です。これまでHTMLだけでコーディングをしてきましたが、特に装飾することもなく進めてきました。このままHTMLだけを使っていくとコーディングしてきたものが上から下までただ並ぶだけになります。先にリストを作ってみましょう。横並びのリストを作ってみよう次に使う要素はul要素、li要素です。Listの略で、順序のないリストを表示する際に使用します。li要素はそのままのListの略で、ul要素とli要素は大体いつもセットになります。ulタグの中にliタグを記述といったイメージです。要素の親子関係】をわかりやすく説明するよ!で確認してくださいね。HTMLは入れ子構造となっていて開始タグと終了タグの間にさらにタグを埋め込んでいくような形になっています。手順002ulタグの中にliタグが入ることでliタグがリストとしての本当の力を発揮することができるといったイメージでよいかと思います。次のコードをimgタグの最後で改行して張り付けてみてください。■HTML<ul><li>サイトマップ</li><li>お問い合わせ</li></ul>表示させるとこんな感じになりましたか?手順003リスト表示は出来たけど、サンプルと比較するといくつか違う点がありますね。手順004リストが横並び文字サイズが少し小さいリストの黒ポチがなくてアイコンがあるリストがリンクになっているリストが右に配置されているこれら5つの異なる項目点を、CSSを使ってサンプルと同様なスタイルに変えていきたいと思います。CSSを記述する場所はindex.htmlファイル内の<head>開始タグと</head>終了タグの中に記述する必要があります。このような感じですね。手順005上記の画像内で『text/css』を記述するとスタイルを記述できるとありますが、厳密には、属性は記述しなくても大丈夫です。『<style>~</style>』だけでもOKということです。記述してあげることで、『ここはCSSを記述しますよ!』ってことを明示的に示すことができるのでなるべくあった方がわかり易いということになります。コピーして張り付けて、表示してみましょう。}</style>↓の画像のようにリストの黒ポチが消えましたか?手順006『list-style』とは、そのまんまリストのスタイルしてあげる。『none』は無しって意味ですね。3Wで考えると理解しやすいと思います。↓の画像でイメージしておいてくださいね。手順007CSSではセレクタ、プロパティ、値を定義することになります。上記の例では『li』が『セレクタ』、『list-style』を『プロパティ』、『none』を『値』と定義しています。それではスタイルをどんどん追加していきます。次はフォントサイズと横並びに変更しましょう。『list-style:none;』の後ろで改行し、次のコードを追加してみてください。12px;}サイズが少し小さくなって、文字が横に一列になりましたね。手順008サイズの変更はプロパティに『font-size』を使い、値を『px(ピクセル)』単位で指定することになっています。14pxで標準サイズより一回り小さいサイズを指定できました。ここで言う標準とは、文字サイズが指定されていなければブラウザ側で標準で用意しているサイズを使いますよーってことです。次は『float』です。『float』をしっかり理解している人が少ないようです。指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。ACADEMYさんの記事が理解しやすいですので参考にどうぞ!目的はあまり難しく考えずホームページを作ってみよう!がコンセプトなので(笑)横並びになったのはいいんですが、リスト同士がくっついてしまいましたね。文字と文字の間に余白を入れたいと思います。次のコードを『li』セレクタに追加してください。■CSSmargin-left:15px;これでリストとリストの間に15px分の余白ができました。手順009『margin~』は余白を設定するプロパティなんですがここで『ボックスモデル』という概念を理解しないといけません。これについてはこちら→【CSS【ボックスモデル】をわかりやすく説明するよ!】の記事を確認してみてくださいね。ここで第4回はこの辺りで終わります。ここまでで↓の2つの項目が実現できましたね。リストが横並び文字サイズが少し小さい第5回から残りの3つの項目を実現していきたいと思います。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。