まふ雑記

気になったこと、共有したいことをなんでも書きます。

簡単なWebページをコーディングしてて思ったこと

簡単なWebページをコーディングしてて思ったこと

どうも、まふゆです。

めちゃくちゃ簡単なページのコーディングをしました。

とりあえず見て

難しいことはやってないです。

コーディングしたページはこちら。

mahusite.site

ファーストビューの表示おっそい(笑)

ブロックレベルとインラインの意識

コーディングをしているとき、うまいこと表示したい位置に動かせないことってないですかね?

「なんで横に並ばないのー」とか「なんで下にいかないのー」とか、9割はブロックレベルインラインを意識すると解決しますね。

pタグはブロックレベル、aタグはインラインみたいに、どこに置きたいからどのタグを使うってのを意識しているとコーディングが捗ります。

下のサイトが分かりやすくまとまってるので、どのタグがどの要素か分からなくなったら見るといいですよ。

html-coding.co.jp

画像の下には謎の空間が存在する

画像を適当に突っ込んでると、たまにつまずくところ。

imgの下に少しスペースがあって、綺麗に並ばないことがあります。

vertical-align: bottom;

これで撃退できます。

参考

qiita.com

値はそれぞれ合わせてくださいね。

ググり方を間違えるとけっこうな時間を食うので覚えておきたい仕様です。

オシャレなデザインとはなにか

オシャレなページを組みたいと思って作ったのに、なぜかあんなページが出来上がってしまいました。

おしゃんなサイトの一覧が載っている以下のようなサイトがあります。

https://81-web.com/

ファーストビューで画像の上に文字が乗っかっているのがほとんどですね。

素材があれば作れるけど、このデザインを思いつくことができないのがとても悲しい。

まとめ

デザインと素材があればコーディングできます。

コーディングのお仕事ください。