自分の会社でもリモートワークが取り入れられ、自宅にいる時間が増えました。
どうも筆者です。
当ブログではGoogleフォトに上げた画像を読み込んで使用していますが、はてなブログ側で不具合が起きているようですね。
他の記事で途中で画像が見られなくなってしまった等の問題がありましたら、ご報告いただけますと幸いです。
画像の差し替えを検討します。
今回はHTMLとCSS関連にスポットを当て、自分がWEBページを作るときに参考にしているサイトやサービスを使用しているサイトをいくつか挙げていきたいと思います。
HTML5要素一覧
www.tagindex.com
HTMLタグの一覧です。
基本的なものはもちろん覚えていますが、ちょくちょく見ています。
今までCSSで表示と非表示の設定をしていたので、レスポンシブ対応のpictureとか使ってみたいですね。
CSSリファレンス
www.tagindex.com CSSのプロパティ一覧です。
Bootstrap4 Cheat Sheet
WEBフレームワークのBootstrapのチートシートです。
ささっとレスポンシブ対応のページを作りたいときにBootstrapを使っています。
ここに書いてあるものをHTMLのclassで指定することでデザインを変えられます。
コードやプレビューが表示されるので、こんな使い方をすれば良いんだなというのがわかります。
RGB配色表
サイトで使うカラーを検討するときに使います。
rgbaで色を指定するときはCSSでred・green・blue・alphaの順に
rgba(0, 0, 0, 0.5)
というように指定します。
alphaの値を０〜１の範囲で設定することで透明度を調整します。
tinypng
画像のサイズを小さくしてくれるサイトです。
サイズが大きいままだと表示に時間がかかってしまうため、調整するように心がけましょう。
SANKOU!
sankoudesign.com
様々なWEBサイトを集めたサイト。
どういったデザインが流行っているのか、業界ごとにどのような見せ方がされているのかを研究します。
このようなサイトはいくつかあるので、ぜひいろいろ見てみてください。
「WEBデザイン 参考」なんかで検索をかければ出てきます。
まとめ
ある程度基礎を勉強したら、自分が気になったサイトのソースを見てみると良いと思います。
あとは実際に手を動かしてみることですね。
やらないことには伸びるはずの力も伸びないので。
