どうも、ゴトーだ。
今日はいつもと趣向を変えて、CSSの勉強を目的としてトップページのデザインを変えてみた。(ブログじゃなくて、制作用のページだ)
パッと見、結構カッコよくできたのでそれを今日の成果として発表したい。
ちなみにプログラミングに関しては、これまで通りPHPをメインに勉強しつつJavaScriptの学習も開始し始めた。
今はドットインストールの講義を聞いてる途中なので特にアウトプットするものはないが、これから出していくかもしれない。
どうやって作ったのか
デザインは参考にしたサイトをほとんど模写している。
元のサイトはこちら。
知り合いのプログラマーの人に聞いた所、デザインも最初は写経のように自分が気に入っているところをクローンしながら作ったほうが良いということで、よくチェックしている海外のゲームメディアサイトを参考にした。
CSSのコード自体は自分で書いているが、ベースとなるものはスタイルを調べながら参考にさせてもらった。
スタイルの調べ方としては、調べたい場所で右クリックして、ブラウザメニューの「検証」でどんなCSSが設定されているか見られるので、それを逐一調べて同じようなスタイルにしている。
学習したこと
写経しているうちにCSSの知らないプロパティを知ることができた。
例えば影をつける「box-shadow」や角を丸める「border-radius」などは今回始めて使って、何となく勝手がわかってきた。
それなりに複雑なレイアウトにするときのCSSの書き方も今回始めてやってみてなんとなく理解できたような気がする。
といってもまだ場数が足りないから、何回も修正したり新しく作っていって、ゼロベースでイケてるデザインができるようになりたい。
所要時間
9時間くらい。
GAME SPOTというサイトを参考にすることは最初から決めていて、トップページのブログ記事一覧のところのスタイルを調べて書き起こしつつ、微調整するというだけなのでそれほど時間はかからなかった。多分ゼロからやってたらとてつもなく時間がかかってたはず。