プログラミング・IT プログラミング

サイト模写進捗報告!学んだことや感想を書くよ!

プログラミング・IT
この記事は約4分で読めます。
スポンサーリンク
ふらもん
ふらもん

ご訪問ありがとうございます。ふらもんです。

Progate受講後、Webサイトのコーディング力を鍛えるためにサイトを2つほど模写したので、学んだことを備忘録として書き留めたいと思います!

ふらもん
ふらもん

こういう風に学んだことをまとめられるのがブログの利点だね!

参考サイト樣↓

【レベル別】模写コーディングにおすすめのサイトまとめ9選
世界には数え切れないほどのwebサイトがあり、どれを模写コーディングすればいいか迷っている方も多いかと思います。そこで今回の記事では、能力別(初級・中級・上級)に模写コーディングするべきサイトをご紹介します。

模写したサイト様↓

Progate「HTML & CSS 道場コース 上級編」完成版

Write
書くためのテーマ
スポンサーリンク

ヘッダーの固定

Progateで学んだことの復習ですね。position:fixedで簡単に固定できます。

ふらもん
ふらもん

解説いるのか…?

これにrgbaで透明度をつけたり、z-indexでヘッダーが背景の上になるように指定すれば完成です!

ふらもん
ふらもん

簡単だけど、覚えておかなきゃいけない技術だ!

要素の複雑な横並べ

Writeの模写で、こういった要素の並べ方をする場面に出くわしました。

どうしたもんかと1日ほど悩んだのですが、結果GridレイアウトとFlexboxを併用する力業で無理やり再現しました。写真と名前、SNSアイコンを入れるコンテナをGridで作り、その中のSNSアイコンをFlexで横並びにした格好です。

ふらもん
ふらもん

本職の方はもっとスマートに解決するんだろーなー…

まあなんとか再現できたので良しとします!

横幅の統一

bodyの要素ごとにdivでコンテナを作って、その幅を指定すればOKです。こちらもProgateの復習ですね。

こんな感じでコンテナをつくり、HTML側で囲えばOK!

ふらもん
ふらもん

Progate、良いこと教えてくれるじゃないの!

画像の丸め方

これも基本テクニックの一つですね。border-radiusで丸くして適当なところに配置します。

画像の一部分だけ切り抜きたいときは別の書き方があるみたいですが、ここでは割愛します。

ふらもん
ふらもん

詳しくは「画像 丸くする CSS」で検索だ!

マウスオーバー時のアニメーション

hover要素に色を指定し、transitionも指定することでできるらしいです。らしいというのは、筆者がサイトを模写するときにサボったので実装したことがないのです。

ふらもん
ふらもん

なんで解説してるんだこいつ…

これからのサイト模写で実装してみようと思います…!

コーディングのコツ

文字数を稼ぎたいのでここまでで学んだコーディングのコツを書き留めておきます!

ふらもん
ふらもん

どれも初歩的ですが、同じく初心者の方は参考にしてくださると嬉しいです!

divは入れ子にする

divを入れ子にすると、横幅統一ができたりHTMLを美しく書けたりします。昔はHTML側で無理するようなコードを書かないとモダンなデザインができなかったりしたそうですが、今はCSSがとても便利になっているのでそういうことをしないでもデザインできます。読みやすいコードを意識しましょう!

ふらもん
ふらもん

私もこの間までぐちゃぐちゃコードしか書けなかったのであれですが、「明日の自分はもう他人」を常に心においてコーディングしましょう!

(最近はマシになってきた…ような気がする)

拡張機能や開発者ツールを使いこなす

paddingやmarginの幅を測る拡張機能や開発者ツールをガンガン使いましょう。フォントや幅がわかるだけで一気に模写がしやすくなります。実務でもイカしたサイトのデザインを参考にするのに必要になるので、使い方には慣れておきましょう!

Chromeの開発者ツールは英語なのでとっつきづらいですが、基本的な使い方をマスターするだけで模写がすごく捗ります!

ふらもん
ふらもん

それか日本語化されているFirefoxの開発者ツールを使うのも手です!使いやすくてオススメ!

Flexbox is 神

横並びで困ったらとりあえずFlexboxで割とゴリ押しが効きます。Gridレイアウトとも併用できちゃうくらいなので、だいたいの要素とは併用ができるはずです。Flexboxは難しいとお思いの方もいられるでしょうが、display:flexだけでも割となんとかなります。

ふらもん
ふらもん

慣れてきたら以下のチートシートをチェックだ!

日本語対応!CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており

まとめ

以上、学習進捗の報告でした。

HTMLとCSSの基本的な部分は割と身になった気がするので、ここからはJavaScriptとjQueryReactを学んでいきたいと思います!

ふらもん
ふらもん

動きのあるサイトが作れるとのことでとても楽しみ!

この記事を書いた人
ふらもん

Webプログラマー(志望)の謎の生物。趣味はお絵かきとゲーム制作。日々の成長記録をここに書き記しています。

ふらもんをフォローする
プログラミング・IT
スポンサーリンク
スポンサーリンク
スポンサーリンク
魔導研究棟

コメント

タイトルとURLをコピーしました