【CSS】実際のwebサイトをChrome検証ツールみながら真似して作る(模写学習 #1)

更新日:

【Rails】プログラミング初心者の勉強ブログ #54

webデザインの眼を養う目的のもと、実際のサイトのCSSを「Chrome検証ツール」を見ながら真似してHPを作成する学習をしてみました。模写学習してよかった点、学べたことを書きます。

 

目次

 

実施内容

今後アプリ開発を行うにあたって、webサイトの「見た目」の部分の向上を少しでも図るべく実施した、今回の「模写学習」内容です。

 

実施目的・内容・達成条件

webサイトデザインの基礎固めを行うこと。ヘッダーやナビゲーション、フッター、各セクションの構成の組み立て方から、色使いやフォント、余白の取り方などの「デザイン」について、実際に真似して作成することにより自分の中でサイト作成時にデザインの「型」が頭に浮かぶようにするため。また、デザインの基礎固めと並行し、CSSの挙動に慣れる機会を作るため実際にコーディングを行う。なお、学習にあたり参考にするサイトは「レスポンシブデザイン」であることを条件とし、CSSでの基本的なデザインの模写の作成に加え、検証ツールで構成を見ながらレスポンシブデザイン対応までを実装できた段階で完了とする。

 

実施の流れ

  1. 参考サイト選定
  2. 検証ツールの「Sources」でHTMLをテキストエディタに写す
  3. 参考サイトを見ながら、写したHTMLの各要素を装飾
  4. わからなければ検証ツール「Elements」で確認しコーディング
  5. わかった場合も検証ツールでオリジナルのコーディングを確認し修正
  6. おおよそ参考サイトと同じデザインと動きになったら完成

※HTMLとCSSの作業は同時並行でも別々でも可。

 

今回の参考サイト

「UNDERLINE 大阪でフリーランスのWeb制作を行っています。」

 

成果物

【PC表示】

成果物(PC表示)

 

【スマホ表示】

成果物(スマホ表示)

 

 

やってみて気づいたこと

内容を自分で決めての学習のため、探り探りやってましたが、やって見て気づいたことが何点かあったのでまとめます。

 

参考サイトの選定について

始めるにあたって、「どのサイトを真似すればいいんだ?」がまず悩むところでした。実際にあるwebサイトは個人で運営しているものから、プロが作成しているもので幅広くあります。とりあえず僕は、Twitterでよく目にする、webデザイン系の記事を書いている方のブログを拝見したときにオススメされていた「ピンタレスト」で「サイト」と検索したときに出てくるものを選びました。

ピンタレスト内のサイトもいろいろあり、シンプルなHTMLとCSSで構成されているものからJavaScript盛り盛りのサイトまで、とにかくいろいろあります。

自分にあった参考サイトを選ぶためには、「実際にサイト行って検証ツールでコードみてみる」が一番確実でした。やり始める前に確認し、ある程度理解できるコードかどうか判断しておかないと、意味わからなすぎて勉強にならないです。始める前に必ずコードの確認をすべきです。(結局検索の一番最初に出てきたものをやってますけど。)

 

実際に学べたこと

探り探りやってみた中で、実際にやってみて良かったと思う点を書いていきます。

 

コーディングの構成

人が作成したコーディングを読み解く機会が与えられるので、自分以外の人間が考えたコーディングの構成を勉強できます。自分なんかより圧倒的に経験のある人のコーディングな訳ですから、構成自体が非常に勉強になります。cssファイルの分け方(reset.cssの存在、共通部分とそれ以外でシートを分けている点など)や、レスポンシブのブレイクポイント(今回の場合760pxと960pxの2点)の設置箇所や、それぞれの表示での余白の付け方など、自分がCSSでコーディングするにあたって迷いが生じていた箇所について「別の人の意見」が聞けるイメージです。数を重ねていけば、必ず自分の中である程度デザインの「型」ができていくと考えます。

 

CSSの知識向上

この模写学習で行うことは、RubyやRails学習でやったこと(見本みながらコーディングし、わからないメソッドは調べる)のCSS版だと考えます。既存の知識のアウトプットと新しい知識のインプットを並行して行える点がメリットです。今回でいえば「display: inline-block」での横並びレイアウトの方法は新しいインプットでした。「display: inline-block」での横並び表示はデフォルトで若干の隙間が生じる点や、その対処法など、アウトプットチャンスが転がっていました。今までは「float」か「Bootstrapのグリッドシステム」でやっていましたが、「display: inline-block」でないとできない表現もあり、単純に構成の幅が広がります。また、「なぜここではdisplay: inline-blockなのか?」という疑問が生まれることで、それぞれの挙動の違いを調べるきっかけになります。

 

デザイン構成・余白の使い方

ここがメインの実施目的であった訳ですが、もちろん勉強になります。意識して見ていたのは「フォント(サイズも)とマージン・パディング幅」です。「どうすればキレイに整って見えるか」についてはデザイン勉強したことがない素人が考えたところでわからないので、いろいろなサイトを見て法則みたいなものがわかってくればなと思います。

 

まとめ

新しい試みですが、なんとか身になる形で進められたらと思います。「結局良いデザイン作れないわ」とならないように気をつけます。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.