CSSでヘッダー部分をデザインする / WordPressのテーマを自作する

2019年10月7日 22:15 カテゴリー: Wordpress

いよいよまともにCSSを作っていきます。少し難しいですが、一つ一つ解説していきますので、読んでみてください。

CSSを全く知らない方は、まずは下記記事をごらんください。

コード!

PC用

	
	.header{
		width: 100%;
		border-bottom: solid 1px #cc6511;
		padding: 100px;
	}
	
	.header a{
		font-size: 2em;
		color: #cc6511;
	}
	

タブレット、スマートフォン用

	.header{
		width: 100%;
		padding: 30px;
		border-bottom: solid 1px #cc6511;
		text-align: center;
	}
	
	.header a{
		color: #cc6511;
		font-size: 20px;
	}

解説!

PC用

.header{

解説:div要素の.headerさんに反映してくださいね。

width: 100%;

解説:width←要素の幅 100%←画面いっぱいにしましょう。

ワンポイント!vwを使う場合に横のスライドバーが出る場合の対処法

vwは画面幅に対してどのくらいの幅にするかという設定です。横いっぱいにしたい場合、

width: 100vw;

というような感じで設定すると思いますが、縦のスクロールバーが出ているとスクロールバーを計算しない幅になってしまいます。そういう場合は下記の様にしてみましょう。

width: calc(100vw – 14px);

このcalc()は計算式で数値を指定できます。14pxはスクロールバーの幅です。ワンポイントの脱線としては長くなってしまいました。戻ります。

border-bottom: solid 1px #cc6511;

解説:border-bottom ←要素の下の枠。ヘッダーとメインエリアの間のオレンジの線ですね。ちなみに、border-top、border-right、border-leftなど、ハイフン以降で場所を指定できます。borderだと枠全てを一括で指定できます。

solid←実線 1px←枠の幅 #cc6511←線の色

実線以外にも色々あります。詳しくはHTMLクイックリファレンスさんのサイトをご覧ください。

http://www.htmq.com/style/border-style.shtml

色は「#」の後に16進数二桁(00~ffまで)ずつで表します。左から赤、緑、青で、数字が大きくなるほど色が強くなります。

padding: 100px;

解説:padding←要素の内側の余白 100pxにしましょう。

ちなみに要素の外側の余白はmarginで指定しましょう。

.header a{

.headerさんの中のリンク「a要素」に反映してくださいね。

font-size: 2em;

解説:フォントのサイズを指定します。emは相対的な大きさです。2emは元の大きさの二倍の大きさで表示します。pxでも指定できます。

color: #cc6511;

解説:文字の色を指定します。

スマートフォン、タブレット用

width: 100%;

解説:省略!

padding: 30px;

画面が小さめなので余白も小さめ。

border-bottom: solid 1px #cc6511;

PC用と全く同じ。

text-align: center;

解説:text-align←テキストの位置。

center←真ん中寄せ。ちなみに、左寄せ→left 右寄せ→right

真ん中は寄せっているのかな?

.header a{

以後説明省略!

まとめ

一番上のタイトルの場所を編集してみました。とりあえず今回はそんなに難しくないですね。

WordPressのテーマを作るまとめ