アイコンとタイトルの横並び見出しのCSS
こんにちは。
今日は「アイコンとタイトルの横並び見出しCSS」について復習を兼ねて書きます!
イメージはこんな感じです。
画像は天地中央に、タイトルは縦真ん中に、というデザインですがいざ実装するとなったら「どうするんだっけ・・・」と少し考えてしまいました(^^;
ちなみに、本のアイコンは無料素材で以下のサイトからsvg形式で保存しました^^
便利ですね!
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
ではさっそくコードを見ていきましょう〜!
コード
HTML編
<div class="titBlock"> <div class="icn"><img src="assets/images/icn_book.svg" alt=""></div> <div class="sectTit">タイトルタイトル</div> </div>
アイコンとタイトルを横並びさせるのにflexboxを使うのでdivで囲っています。
CSS編
.titBlock { display: flex; .icn { display: flex;//アイコンを天地中央に align-items: center;//アイコンを天地中央に justify-content: center;//アイコンを天地中央に background: #36b314; } .sectTit { flex: 1;//アイコンの幅を固定に line-height: 1.3; font-weight: bold; background: rgba(#36b314,.1); } } @media only screen and (min-width: 769px) { .titBlock { .icn { width: 80px; min-height: 80px;//文字の可変対応 img { width: 60px; height: auto; } } .sectTit { padding: 20px; font-size: 30px; } } } @media only screen and (max-width: 768px) { .titBlock { .icn { width: 40px; min-height: 40px;//文字の可変対応 img { width: 25px; height: auto; } } .sectTit { padding: 10px; font-size: 17px; } } }
今更なんですがここに貼り付けるコードの記法ってsassかcss、どちらの方がいいんでしょうね(><)
今回はsassで貼り付けてみましたが・・・
でもやっぱりCSSの方が良さそうですね(°_°)
まぁそれはさておき、コードの解説を少しします!
個人的に重要だなと思うものは上記コードにコメントとしても書いています!
・タイトルに【flex: 1;】を指定すること
・アイコンの領域の高さは文字の可変対応のため【min-height】で最低の高さを指定
・私の中での気付き:画像の領域の高さを決めたら必然的にタイトルの高さも同じになるから上下paddingと文字(+行間)の合計の高さをきっちり80pxにしなくても大丈夫(私は【padding:20px 20px 21px;】にしていました)
上記の書き方で可変対応するとこのように文字が増えても崩れません(^_^)
以上になります〜!
今日はここまで!
コメント