css初学者は実際のWeb事例から学ぶ方が効率が良いと知った話【38Web-8】【制作ログ】
cssを初めて組むにあたり、重い本を家に置いて来たのでググりながら打ち始めたのですが、これがめちゃ効率悪かった。
基本は「本や実際の事例を真似して（写経）作るのが最も早い」ことを知りました。
こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。
前回はHTML5のマークアップまでをやりました。制作ログはこちら。
今回はいよいよcssの中身に入るのですが、参考にしていた本が手元になかったんですね。スタバで作業しようとして、重いからおいてきてしまったのです。
「ググればわかるでしょ」と思ったのですが、これがいけなかった。
「単発でググってそれを応用しながら進めるのは、初心者には効率が悪い」
何がいけなかったのかをまとめます。
ググった手法が最適とは限らない
気になることをGoogleに聞くと、検索結果として「よく見られているページ」を教えてくれます。たとえば私が作ったこのサンプルの右上のとこ見てください。
「ソーシャルアイコン（ul/li+アイコンフォント:Font awesome）」と「ボタン（div+テキスト）」が並んでます。
この「横並び」がうまくできず詰まっていたのです。画像の下にある、黒いバーのグローバルナビも同じく綺麗に並ばず、詰まっていました。
横並びの方法は、本には書いてあったのですが、今日は手元になかったのでググっていたわけです。
「css 横並び」でググる⇨たくさん手法が出てくる。
でもどれがいいのかわからない。
「横並びにする手法まとめ」などの記事も見つかり、それを参考に四苦八苦。
結果から言うとこれは結局「flexbox」というcssクラスで実装したのですが、ググって最も多く出てくるのは「floatで浮かせてからleftやrightで配置する」と言うやり方。
最初はこれでやろうとしたのですが、どうもうまくいかない。（原因は、コンテナとアイテムのcssセレクタが反映されているのかわからず、その確認に時間を要したため。コンテナに背景色をつけても出てこなかったり・・・）
時間を無駄にしてしまった理由
数時間を無駄にしてしまったわけですが、この失敗の理由は2つあると思います。
① そもそも「flexbox」というもっと良い手法があったことを知らなかった
② セレクタが効いているかの、効率の良い確かめ方を知らなかった
css3から「flexbox」ができていた
①は、ツイッターで「それならflexbox使うと良い」と教えてもらったことです。floatよりいい方法があった。私はcss3以前の人間なので、知らなかったんですね・・・。
flexboxだと、floatのようにセレクタの親子関係（relative/absolute）に悩まされることなく、簡単に要素が並べられます。オプション一つで動くし。
こんな良いものがあるのに、ググるとfloat手法がたくさん出てくるのは、汎用性の高さや事例の多さからなんでしょう。
実際のWeb事例の「写経」をやろう
この「そんな便利なものがあるなんて知らなかった」問題は、写経をすることでも解決します。すでにあるサイトを見て、書き方をパクるのです。まずは人のサイトをそのまま流用して作ってみることを「写経」というらしい。
ポートフォリオでも「写経」と書いて、キャプチャ画像を公開している人を見ましたよ。
既存サイトの解析には、次で説明するChromeのデベロッパーツールが使えると思います。
Google Chromeでcssセレクタを確認
「② セレクタが効いているかの、効率の良い確かめ方を知らなかった」
これは、デバッグツールを知っていたら解決したでしょう。（これもTwitterで教えてもらいました）
以下は、Google Chromeで「デベロッパーツール」を開いたところです。
右上のElementsにカーソルを合わせると、
①該当の要素が青くハイライトされる
②要素が所属するcssセレクタが、ツリー構造の下に表示される（… #site -header #top -bar div・・・と横並びに表示されている行）
これは人の作ったサイトの解析にも使えますね。
これを知ってれば、怪しい要素の背景色を変えてリロードしたりと、アホな時間使わずに済んだのに・・・
Web制作は、如何に効率的に作れるかの世界です。最初とはいえ無駄な時間を使ってしまった。
多分この他にもいろんな無駄要素があると思います。
Bootstrap使えば早いんじゃないの？
そもそもcssをパーツ化した技法である「Bootstrap4」を使えば、こんなチマチマやる必要もないと思います。
特にナビゲーションメニューや、トップ画像の上にレイヤーで半透明の黒をかけたり、文字を載せたりするのも簡単にできます。（今はcssのz-indexだの、position:relative/absoluteだので実装してる）
それは分かっているのですが、私みたいな人がいきなりBootstrap4を使って「書いてある通りにやったらできたー！」で終わってしまったら、なんかよくない気がするんですよ。
「floatの使いにくさやflexboxとの違いもわからないけど、Bootstrap4の通りにやったら簡単にトグルメニューができました。はい終わり」
この状態のまま、お金をもらう仕事に手を出すのは危険じゃないかと・・・
「やっぱBootstrapやめましょう」とか「そこ、Bootstrap使う必要あるの？」という状況になった時、「Bootstrapしかやったことありません」となるのが怖いんですよね。
次のバージョンでは、サクッとBootstrapでかっこいいページを作りたい。
とりあえず、HTML5+css3のみのページを作ったらやります。
最後に、HTML5+css3で作った部分を貼っておきます。
mobile用（640px以下）
PC用
PC用はこれから2カラムにするところ。これもflexboxに突っ込もうかなと思っております。（ちょっとやった）
今回はレスポンシブデザイン（モバイルファースト）の手法で製作中。
まずモバイルで綺麗にした後に、PC用に別の表示方法を入れ込む手法でやってます。
質問＆回答コーナー
あ、最後に、ツイッターで「そのナビゲーションのフォントなんですか？」と言われたので回答します。
まず、「Font-familyメーカー」でWindows、Mac、iOS別に持っているフォントを1つずつ選んでます。
このサイトを使うと、各OS別に確実に表示されるフォントを選べるので、漏れがなくて良いですよ。
今回使った指定はこれ。
font-family: 'Segoe Print','Apple Chancery','Bradley Hand',sans-serif;これはMacで表示したもののキャプチャなので、「Bradley Hand」ですね。
今回はここまで。
【この勉強ログは、マガジンにしています。フォローしてね。】
F1クリエイターとして、そしてWebデザイナーの駆け出しとして、自らの手でサイトを立ち上げています。 ご支援を糧に素晴らしいものを作りたい。 どうぞ、よろしくお願いします。