CSSでできること ~flexboxとアイコン作成~
お久しぶりです。最近はCSSの特訓をしておりました…笑
そこで学んだCSSの使い方をご紹介します😊
目次
１．２カラムを作る
1-1. flexboxを使うために
前回の記事で、「flexbox は、CSSで簡単にボックスのレイアウトが組めるもの」というふんわりした説明をしました🙂
今回はflexboxでどんなことができるか、もう少し詳しくご説明します！
まず、flexboxを使うために必要なことは、親要素に display: flex; を設定することです💡
そうすると、子要素にflexboxを使うことができます。
これで、例えば以下のように子要素を並べることができるようになります！
この親要素をflexコンテナ、子要素をflexアイテムと呼びます。
また、これだけでは孫要素はflexアイテムにならないので、孫要素にflexboxを使いたい場合は、子要素にも display: flex; を設定する必要があります🤨
1-2. flexboxで２カラムを作る
flexboxを使って、２カラムを作ることができます。
左側にサイドバーがあって、右側に本文がある２カラムの例です。イメージは以下のような感じです。
1. flex-direction: row; で横並びにする
親要素である .container に display: flex; を設定し、flex-direction: row; で子要素を横並びにします。
2. 子要素の幅を設定できるようにする
並べた子要素の幅を設定するには、通常なら width プロパティが使えますが、flexboxではflex-basisが使えます😊
初期設定では flex-basisは auto になっていて、子要素の中に画像があると画像サイズに影響されて設定が反映されなくなってしまうので注意です！
対策として、imgにmax-width: 100%; を設定し、画像が子要素に収まるように設定しておくのがとても大事です💪（セットでimgに height: auto; も設定しておきます）
3. 子要素の幅を設定する
仮に .container の幅を200pxとします。
サイドバーを70pxに固定して、残り全部を本文にしたい場合、.side に flex: 0 0 70px; を設定し、.main に flex: 100; を設定します。
〜補足〜
補足説明なので読み飛ばしていただいて結構ですが、 flex: 0 0 固定幅;とflex: 100;について解説です。
まず、flex というのは flex-grow, flex-shrink, flex-basis のショートハンドで、伸縮の幅を設定するプロパティです。
固定したいほう（ここではサイドバー）には flex-grow: 0; flex-shrink: 0; flex-basis: 70px; を設定します。これのショートハンドが flex: 0 0 70px; です。
そして、残り全部としたいほう（ここでは本文）には flex-grow: 100; を設定します。
flex-grow は余白を振り分ける比率なので、100を設定することで「親要素の幅 ｰ 固定幅」になります。 言い換えると「固定幅以外の幅全部」です。これのショートハンドが flex: 70; になります💡
See the Pen wYzoxb by sayaka (@mistyrinth) on CodePen.
２．疑似要素と position でアイコンを作るコツ
疑似要素beforeとafter、positionプロパティでアイコンを作ることができます😆
面倒で省くわけではないのですが、疑似要素と position を使ってアイコンを作る方法はインターネットで調べるとそこらじゅうに出てきます🔍それこそアイコンの数だけ沢山のサンプルが見つかりますが、お目当てのアイコンが見つかるとは限りません😂笑
そこで、自分で考えて色々なパターンのアイコンを作るために、私がやった試行錯誤の方法を記録します！🖊
経験豊富な方にとっては当たり前のことかもしれませんが、初心者の方でもしアイコン作るのに自分がどの部分をどうしたいのか見失ってしまった時、頭の整理するためにぜひ試していただければと思います🙂
1. 疑似要素と、疑似要素の元となる部分に枠線を引く、もしくは背景色をつける
疑似要素 before と after は、元となる部分の前後にくっつくものです。文字を追加する場合ならとてもわかりやすいのですが、アイコンを作るときは大抵 content: ""; なので、自分が編集しているはずの位置が画面上で見えません💦
なので、まず始めに元となる部分（見出しなど）のサイズを知るために枠線か背景色をつけます。
見出しなどの元となる部分の位置をpaddingで指定していると、アイコンの移動に伴ってずれてしまうことがあるので、元となる部分はmarginで指定しておくほうが良さそうです😇
次に、疑似要素をとにかく画面上に表示させないことには編集が難しいままなので、完成形にこだわらず、なんでも良いので疑似要素を表示させます。
before, after それぞれに display: block; と width と height を設定し、border か background-color を設定すれば、疑似要素が画面上に姿を現すと思います👀
ちなみに、後ほど position でアイコンの位置を調整するのですが、before と after 使い分けなくても影響ありません🤓どっちがどっちとかは気にせず、とりあえず２つ表示させます！
2. position を使ってスタート地点（原点）を確認する
次に、疑似要素の位置を動かすにあたり、スタート地点を確認しておきます。
元となる部分（見出しなど）に position: relative; を設定し、疑似要素それぞれに position: absolute; を設定します。
これにより、元となる部分を基準にして、疑似要素を座標のように絶対値で動かせるようになりました🎉
座標のように動かせるということで、まずは原点の位置を確認します📐
before, after それぞれに top: 0; と left: 0;を設定します。そこがひとまず原点となります！今は両方原点にいるので、重なってしまっていると思います。
もちろんアイコンの位置が下のほうだったり右のほうだったら、right: 0; や bottom: 0; にしても大丈夫です。縦軸と横軸の原点が分かれば良いのです🌝
あとはアイコンの形を border-radius や border-left などで整えつつ、原点の 0 を 10px にしたり-20px にしたり 50% にしたり、動かしてみてください！
２つの要素が思っているのと逆の前後関係で重なってしまったら、z-indexプロパティで直せます🙂
アイコンができたら、目安にしていた枠線や背景色は解除してください。
位置を見失わないために大切なのは、元となる要素の大きさを確認することと、原点の位置を確認すること💡
See the Pen WaRmLv by sayaka (@mistyrinth) on CodePen.
CSSは難しいこと沢山ですが、chromeの検証ツールを使ったりガイドのための背景色をつけたりして、自分が編集している位置を見失わなければ、基本的な範囲ならわりとなんとかなりそうですね〜🙈
