スタイリングをしていこう

2021-07-03

CSSで、画面全体と「詳細を見る」「閉じる」の各ボタンのスタイルを調整していきます。

・では前回は内容を書いていったので今回スタイリングをしていきます。

・スタイリングをするにはCSSフォルダとCSSのリンクが必要なのでそれを作っていきます。linkタグを使えばいいですね。

・headタグの中にlinkタグを書いていきます。rel属性にstylesheetと書いていき、href属性にcss/styles.cssを書いていきます。

・ <link rel="stylesheet" href="css/styles.css">と書いてあげればおｋです。

・書き終わったらcss/styles.cssの部分をホバーして新しいファイルを作っていくと選択するとCSSフォルダとstyles.cssというファイルを作ることができます。

・この中にスタイルを書いていきましょう。

・試しにbodyのスタイルをしていきます。フォントサイズを14pxに統一したいので

body {

font-size: 14px;

}

と書いてあげましょう。

・ではボタンのスタイリングをしていきます。はopenとclose同じスタイルにしてあげればいいのでカンマ区切りでセレクタを指定します。#open, #close {}と書いてあげて{}の中にスタイルを書いていきます。

・まずホバーした時にクリックできる感を出したいのでポインターにしてあげます。cursor: pointer;と書きます。横幅を200pxで統一したいのでwidth: 200px;

とします。

・薄いグレーで回りを囲んで行きたいのでborder: 1px solid #ccc;として、更に角を丸めていきます。border-radius: 4px;と書いていきましょう。

・テキストを中央揃えにしたいのでtext-align: center;と書いて、上下の余白がもう少し欲しいのでpadding: 12px 0;として枠の上に余白を付けたいのとテキスト全体を中央揃えにしたいのでmargin: 16px auto 0;と書いていきます。

・全体のスタイル感はこんな感じです。

#open, #close {

cursor: pointer;

width: 200px;

border: 1px solid #ccc;

border-radius: 4px;

text-align: center;

padding: 12px 0;

margin: 16px auto 0;

}