CSSでサイドバーをデザインする。たまろぐたまろぐCSSでサイドバーをデザインする。Wordpressツイート今回解説するサイドバーですが、前回のメインエリアと比べてかなり短いです。モバイル用とPC用一緒に解説していきます。コードを見ていきましょう!あ、サムネイル画像は久しぶりに下ネタ脱却ですwなんだか発光している棒です。キャラクタもいなくなりました。#a0a0ee;}解説!PC用.sidebar{}サイドバー全体に反映します。300px;サイドバーの幅を300pxにします。right;floatは浮かせるという意味。スペースさえあればボックスが入り込んできます。この場合ボックスが右側に寄ります。#cc6511;左側の枠の設定です。ど真ん中のメインエリアとサイドバーを区切っている線の事です。この場合オレンジ色っぽい色になります。20px;ボックスの内側の余白を20pxに変更します。h2{}サイドバーの内の見出しh2に反映します。0;外側の余白を上50px、右0、下30px、左0にします。li{}サイドバーのリストに反映します。コンテンツを増やしたい場合は、リストを使うだけで同じデザインになるので活用してみてください。none;リストマークを非表示にします。#cc6511;枠の下の部分を設定しています。a:hover{}リストのリンクにカーソルを合わせたときの表示を反映します。何かの要素に「:hover」を付けることで、カーソルを合わせたときに表示を変化させることができます。#fff;文字色を白に変更。0.3s;変化するまでの時間を0.3秒に設定します。center;文字を真ん中に表示します。inline-block;今までdisplayにはblockやflex等を使っていました。このinline-blockなんですが、inlineの特徴とblockの特徴両方を持っています。inlineはリンクの様に改行されない、普通の文字と同じ見た目です。blockは何も設定されていなければ改行され、ボタンの様な見た目(設定しなければ普通の文字と同じです。このinline-blockはボタンの様なブロックで、改行されず横並びに表示されます。便利!解説は以上です。まとめ後半の省略率がヤバい。省略しているものは、必ず上で解説しているので、わからなければ上の方に見に行ってください。それでは!次の記事CSSで記事ページをデザインする。https://tamalog.info。