たまろぐ

CSSでサイドバーをデザインする。 / WordPressのテーマを作る

2019年10月20日 01:51 カテゴリー: Wordpress

今回解説するサイドバーですが、前回のメインエリアと比べてかなり短いです。モバイル用とPC用一緒に解説していきます。

早速コードを見ていきましょう!

あ、サムネイル画像は久しぶりに下ネタ脱却ですwなんだか発光している棒です。電気も出ています。ついにキャラクタもいなくなりました。

CSSコード

PC用

	.sidebar{
		width: 300px;
		float: right;
		border-left: solid 1px #cc6511;
		padding: 20px;
	}
	
	.sidebar h2{
		margin: 50px 0 30px 0;
	}
	
	.sidebar ul li{
		list-style: none;
		width: 90%;
		padding: 10px;
		margin: 10px 10px 10px 20px;
		border-bottom: solid 1px #cc6511;
	}
	
	.sidebar ul li a:hover{
		color: #fff;
		transition: 0.3s;
	}

モバイル用

.sidebar{
    padding-top: 30px;
    padding-bottom: 30px;
}

.sidebar nav{
    padding-top: 30px;
    padding-bottom: 30px;
}

.sidebar h2{
    margin: 40px 0 20px 0;
    text-align: center;
    color: #cc6511;
}


.sidebar ul li{
    display: inline-block;
    margin: 5px;
    padding: 5px 10px 5px 10px;
    border: solid 1px #a0a0ee;
}

解説!

PC用

	.sidebar{
	}

サイドバー全体に反映します。

width: 300px;

サイドバーの幅を300pxにします。

float: right;

floatは浮かせるという意味。スペースさえあればボックスが入り込んできます。この場合ボックスが右側に寄ります。

border-left: solid 1px #cc6511;

左側の枠の設定です。ど真ん中のメインエリアとサイドバーを区切っている線の事です。

solid ← 実線

1px ← 線の太さ

#cc6511 ← 線の色。この場合オレンジ色っぽい色になります。

padding: 20px;

ボックスの内側の余白を20pxに変更します。

.sidebar h2{
}

サイドバーの内の見出しh2に反映します。

margin: 50px 0 30px 0;

外側の余白を上50px、右0、下30px、左0にします。

	.sidebar ul li{
	}

サイドバーのリストに反映します。コンテンツを増やしたい場合は、リストを使うだけで同じデザインになるので活用してみてください。

list-style: none;

リストマークを非表示にします。

width: 90%;
padding: 10px;
margin: 10px 10px 10px 20px;

省略!

border-bottom: solid 1px #cc6511;

枠の下の部分を設定しています。

	.sidebar ul li a:hover{
	}

リストのリンクにカーソルを合わせたときの表示を反映します。何かの要素に「:hover」を付けることで、カーソルを合わせたときに表示を変化させることができます。

color: #fff;

文字色を白に変更。

transition: 0.3s;

変化するまでの時間を0.3秒に設定します。

モバイル用

.sidebar{
    padding-top: 30px;
    padding-bottom: 30px;
}

省略!

.sidebar nav{
    padding-top: 30px;
    padding-bottom: 30px;
}

省略!

.sidebar h2{
    margin: 40px 0 20px 0;
    text-align: center;
    color: #cc6511;
}

ほぼ省略!

text-align: center;

文字を真ん中に表示します。

.sidebar ul li{
    display: inline-block;
    margin: 5px;
    padding: 5px 10px 5px 10px;
    border: solid 1px #a0a0ee;
}

ほぼ省略!

display: inline-block;

今までdisplayにはblockやflex等を使っていました。このinline-blockなんですが、inlineの特徴とblockの特徴両方を持っています。

inlineはリンクの様に改行されない、普通の文字と同じ見た目です。

blockは何も設定されていなければ改行され、ボタンの様な見た目(設定しなければ普通の文字と同じです。)。

このinline-blockはボタンの様なブロックで、改行されず横並びに表示されます。とても便利!

解説は以上です。

まとめ

後半の省略率がヤバい。

省略しているものは、必ず上で解説しているので、わからなければ上の方に見に行ってください。

それでは!

次の記事

WordPressのテーマを作るまとめ