後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【模擬コーディング実践】メニューのCSSいろいろ紹介~最終章~

f:id:rikei-venture:20190601174959j:plain

ブログ風デザインも終盤となってきました。

最終章です!!!もう少しで完成です!

ここまでの記事をご覧になられていない方はコチラ

パーツの追加・修正

①Webフォントでサイト名を表示

②記事の投稿日にアイコンをつけて表示

③記事の分類をラベルの形で表示

④記事に小見出しを追加

リストマーク付きのメニューに変更

アイキャッチ画像付きメニューに変更

アイキャッチ画像にテキストを重ねたメニュー

フラットなSNSボタンを追加

関連記事メニューを追加

今回は⑤のサイドメニュー関連の仕上げからSNSアイコンの追加の仕方などよく見る形をとことん網羅していきます。

今後様々な場面で使えるテクニックがてんこ盛りなので贅沢に利用してください!!

それではさっそく始めたいと思います。

 リストマーク付きメニュー

今回の目標は下の画像のようにリストの左側にリストマークをつける使用にしていきます。

f:id:rikei-venture:20190528111521p:plain

Font Awesomeにアクセスし、「caret」と検索

② リストマークアイコンの<i></i>を適切な位置に追加

③ CSSをあてる

CSSはリストマークの色をグレーにし、右側に余白を加えました。

詳細は下画像で理解できるかと思います。

f:id:rikei-venture:20190528112455p:plain

アイキャッチ画像付きメニュー

人気記事のメニューを左にサムネ画像、右にタイトルといった表示のメニューにしたいと思います。

f:id:rikei-venture:20190528130959p:plain

手順はコチラになります。

①60×60の画像を適切な位置に追加

②カテゴリーの情報を<span></span>でマークアップ

③画像とテキスト情報を横並びにさせる準備(divでくくる)

④ボックス横並びのCSSをあてる

⑤細かい調整

5-1 画像に枠線が出ないようにする

5-2 画像とテキストの間隔調整

5-3 リンクの文字色

5-4 カテゴリーのデザイン指定

5-5 点線で区切る

大まかなレイアウト

①~④の説明を一気にしちゃいます。

まずは①~④の完成品とコードをご覧ください。

f:id:rikei-venture:20190528121332p:plain

①では、HTMLの方で画像の大きさ60×60を指定しちゃいましょう!

 

④は注意点があります。

いつもは横並びにするボックスどちらもfloatさせていたのですが、今回は「float:none;」の指定をします。

これは画像自体は60×60を固定して画面幅が変わっても変化させたくない為です。

これはボックスを横に並べる設定のうちの「片方のボックスの横幅をピクセルで固定する」というテクニックです。

float:noneとwidth:auto;の組み合わせで、画面幅に対応して残り幅いっぱいに表示してくれます。

しかし、それだけだとテキストが画像の下に回り込んでしまうので、回り込みを防ぐためにテキスト側にサムネ画像の幅「margin-left:60px」をつけます。

f:id:rikei-venture:20190528130438p:plain

このようにすれば回り込むことなく、画像サイズを固定してどんな画面幅にも対応させることができます 。

細かなレイアウト

⑤細かい調整について、5-1から5-5まで一気に説明しちゃいます。

まずは完成品とコードをご覧ください。

f:id:rikei-venture:20190528132828p:plain

5-1ではリンク内の画像が線で囲まれることがあるので、「border:none;」でそれを防ぎます。

5-2で画像とテキストの間隔を調整します。

5-3でリンクの文字の色を青色にしてみます。

5-4でカテゴリーの前に改行をいれたいので「display:block」とします。

5-5で各リンクを点線で区切って表示するようにします。

 

以上でアイキャッチ画像付きメニューの完成です。

アイキャッチ画像にテキストを重ねたメニュー

下の画像のようなアイキャッチ画像にテキストを重ねたメニューを作成したいと思います。

f:id:rikei-venture:20190528141316p:plain



手順はコチラになります。

①400×200指定でアイキャッチ画像を追加

②テキスト部分をdivでマークアップ

③画像をメニュー幅に合わせる仕様に変更

④リンクの間隔を調整

⑤テキスト部分を黒い帯状に

⑥黒帯を画像に重ねる

⑦黒帯の横幅調整

⑧ホバー時の設定

まずは完成品とコードをご覧ください。

細かな説明はそのあと致します

f:id:rikei-venture:20190528154105p:plain

①,②は見ての通りです。400×200の横長の画像に設定しましょう。

③で画像の大きさをメニュー幅に合わせます。

f:id:rikei-venture:20190528152448p:plain

④でホバー時にわずかに余白ができるので「padding:0」でコレを無くします。

また、記事と記事の間隔をmargin-bottomで調節します。

f:id:rikei-venture:20190528153848p:plain

⑤⑥をコードの通りに施した後は黒帯の幅が中途半端なので⑦で調整します。

f:id:rikei-venture:20190528155609p:plain

最後に⑧でホバー時の透明度を変更して、完成です。

SNSシェアボタンの追加

 Twitter,Facebook,Google+の3つのシェアボタンを追加します。

目標のデザインはコチラになります。

f:id:rikei-venture:20190528163256p:plain

手順はコチラとなります。

①メニューを追加

②リンクを横に並べて表示

③リンクの横幅をそろえる

④リンクの色を指定

⑤ロゴを追加

⑥リンクのサイズ調整

⑦ホバー時の設定

⑧本文との間隔調整

⑨レスポンシブの調整

①~⑧までを施したコードがこちらとなります。

f:id:rikei-venture:20190528171512p:plain

①、②に関してはメニューパーツ(横並び)を貼り付けをして、クラス名を「share」に変更しましょう。

メニューパーツって何??って方は次の記事を参考にしてください。

また、<a>タグの中身のクラス名もそれぞれ「share-tw」「share-fb」「share-gp」と名付けましょう。

④ではそれぞれの背景色の指定だけではなく、文字色の変更と「text-align:center」も設定して中心揃えにしましょう。

⑤はFont Awesomeにアクセスし、それぞれのロゴの<i>~</i>を手に入れて、設定しよう。

 

続いて⑨のレスポンシブの調整に関しての話に入りたいと思います。

ブラウザの幅を小さくすると、リンクのテキストに改行が入ってしまいます。

この改行が入らないような工夫を施した方がよさそうです。

f:id:rikei-venture:20190528173157p:plain

改行を入れずにコンパクトな表示にするため、600pxのブレイクポイントよりも小さい画面ではブランド名を非表示にします。

そこで、非表示にしたい文字を<span>でマークアップします。

@mediaで599px以下では<span>でマークアップした部分は非表示にする設定にします。

f:id:rikei-venture:20190528174312p:plain

関連記事メニューを追加

SNSのシェアボタンの下あたりに関連記事を載せたいと思います。

目標デザインはコチラになります。

f:id:rikei-venture:20190528180345p:plain

手順はコチラになります

①メニューを追加

②リンクを横並びにする

③リンクの横幅をそろえる

④画像の大きさを調整

⑤ホバー時の設定

⑥関連記事を枠で囲む

⑦見出しのデザイン

⑧レスポンシブの設定

①から⑦までのコードはコチラになります。

f:id:rikei-venture:20190528183513p:plain

①,②はメニューパーツ(横並び)を引用しましょう。

画像は150×150に設定し、クラス名は「text」としましょう。

④では画像に囲い線が出てくるのを防ぐために「border:none」をつけておきましょう。

⑤ではホバーした時にアンダーラインが表示される設定にしてみましょう。

⑥,⑦は画像を見た通りで細かい調整となります。

 

最後に⑧レスポンシブデザインの適応を考えます。

f:id:rikei-venture:20190528184809p:plain

600pxのブレイクポイントより小さい画面では横に並べるリンクの数は2つに変更します。

そこで4つのリンクをグループ化している<ul>が構成するボックスを2つに分割することを検討します。

しかし、HTMLでは<ul>の中に<li>以外の要素を記述することは認められていないので<div>を追加して分割することはできません。

 

この場合は「カラム落ち」というテクニックを利用します。

f:id:rikei-venture:20190528190347p:plain

上のコードを@media(max-width:599px)の中に入れます。

3つ目のリンクに「clear:both」を適用します。

これでうまく表示されるはずです。

まとめ

以上でようやくブログ風サイトができあがりました!

さぁどうでしょう?できちゃいましたよサイトが(笑)

 

コピペが多かったのでそこまで苦労はなかったと思います。

何が大事かといえばやはり「ボックスデザイン」です。

最初に大きな枠組を作り、そこの中にコンテンツを敷き詰めていく。

そして、極力楽をしたいので、使えるテンプレートはどんどん使っていきましょう。

そして、自分の中でどんどん使えるテンプレートを増やしていきましょう。

その考え方でやってくと非常にスッキリと整理されるので今後の伸び方が全然変わってくると思います。

 

今回はブログ風デザインということでしたので、次はビジネス風デザインに挑戦してみることを強くオススメします。

その時もボックスデザインの考え方を使いましょう!