ばろぐ・ほいダウン

2010年Nゲージにより鉄道事業を開始。2011年Gゲージに参入することで事業拡大。常に夢と目標と野望を持ち活動していく。

MENU

WEBページを作成するときによく使うサイトまとめ

f:id:yotubarail:20200407151820p:plain

自分の会社でもリモートワークが取り入れられ、自宅にいる時間が増えました。
どうも筆者です。

当ブログではGoogleフォトに上げた画像を読み込んで使用していますが、はてなブログ側で不具合が起きているようですね。
他の記事で途中で画像が見られなくなってしまった等の問題がありましたら、ご報告いただけますと幸いです。
画像の差し替えを検討します。

今回はHTMLとCSS関連にスポットを当て、自分がWEBページを作るときに参考にしているサイトやサービスを使用しているサイトをいくつか挙げていきたいと思います。

HTML5要素一覧

www.tagindex.com HTMLタグの一覧です。
基本的なものはもちろん覚えていますが、ちょくちょく見ています。
今までCSSで表示と非表示の設定をしていたので、レスポンシブ対応のpictureとか使ってみたいですね。

CSSリファレンス

www.tagindex.com CSSのプロパティ一覧です。

Bootstrap4 Cheat Sheet

hackerthemes.com

WEBフレームワークのBootstrapのチートシートです。
ささっとレスポンシブ対応のページを作りたいときにBootstrapを使っています。
ここに書いてあるものをHTMLのclassで指定することでデザインを変えられます。
コードやプレビューが表示されるので、こんな使い方をすれば良いんだなというのがわかります。

RGB配色表

www.wahart.com.hk

サイトで使うカラーを検討するときに使います。
rgbaで色を指定するときはCSSでred・green・blue・alphaの順に
rgba(0, 0, 0, 0.5)
というように指定します。
alphaの値を0〜1の範囲で設定することで透明度を調整します。

tinypng

tinypng.com

画像のサイズを小さくしてくれるサイトです。
サイズが大きいままだと表示に時間がかかってしまうため、調整するように心がけましょう。

SANKOU!

sankoudesign.com 様々なWEBサイトを集めたサイト。
どういったデザインが流行っているのか、業界ごとにどのような見せ方がされているのかを研究します。
このようなサイトはいくつかあるので、ぜひいろいろ見てみてください。
「WEBデザイン 参考」なんかで検索をかければ出てきます。

まとめ

ある程度基礎を勉強したら、自分が気になったサイトのソースを見てみると良いと思います。
あとは実際に手を動かしてみることですね。
やらないことには伸びるはずの力も伸びないので。