HTMLコーディングは楽しい?!いや、苦しい(笑)。

f:id:Kawan0116:20200117153857j:plain

かわんです。

本日からHTMLコーディングをしています。ようは、HTMLコーディングしてホームページを制作することになります。

前は、Bootstrapを使っていたのですが、今は1から手打ちです。

Bootstrapは便利なんですが、コードが複雑。なので、1から自分でコーディングする方が楽です。

とりあえず、Chromeで表示確認しています。他のブラウザのサポートなんてしなくてもいいかなと(笑)。

ただ、スマホ向けは必須です。スマホに最適されたモノでないと誰も見てくれません・・・。

なので、Chromeでウィンドウサイズを変更しながら制作しています。

スマホファーストの時代

今はスマホファーストの時代です。なので、まずはスマホで表示させた時にちゃんと表示されるようにコーディングします。

そのほかは、メディアクエリで対応します。ま、ほとんど対応する必要はないですが・・・。

ただ、1個だけハマリました。ウィンドウサイズに合わせて画像もウィンドウサイズいっぱいで表示させたかったのですが、いくらやっても改善せず(笑)。

しかし、何とか対応出来ました。

こんな感じでimgをpで囲っています。

  <div id="main_visual">
  <p><img src="images/blue-flower.jpeg"></p>
  <p><img src="images/leaf.jpeg"></p>
  <p><img src="images/sakura.jpeg"></p>
  <p><img src="images/sony-earphone.jpeg"></p>
  <p><img src="images/flower.jpeg"></p>
   </div>

imgはpで囲むのか、いやいやfigureだろって話がありますが、どっちが正解なのか分からない(笑)。ただ、imgはインライン要素なのでブロック要素にしたいならpとかfigureで囲む必要があります。

この場合、スマホでは問題ないです。しかし、ウィンドウサイズを広めていくと、ウィンドウの右側に大きな余白が出来てしまう・・・

main_visualには以下のCSSを書いています。

#main_visual {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

「width: 100%」で画面の横幅いっぱいに表示させます。

高さを300pxにしてそれを超えると表示させないようにしています。具体的には、「overflow: hidden」です。

これでスマホで画像を表示した時は問題なかったです。しかし、スマホ以上の画面サイズになると先ほど書いたように画面の右側に大きな余白が出来てしまう・・・。

しかし、上で書いている5枚の画像のうち、何枚かは問題ないのです。画像サイズの問題か・・・。だとしたら画像をトリミングしないといけないから大変だぞ・・・。

これをしてしまうと、画像を追加する度に既定のサイズでトリミングしないといけない。これは面倒だ・・・。

「あ、そうだ、imgはpで囲んでいるのでpにCSSをあててみよう・・・」

という感じで以下のように書いてみた。

#main_visual p {
    width: 100%;
}

これでスンナリと解決。解決までにかかった時間・・・

1時間です(笑)。くっそ・・・。

実は、HTMLコーディングをしない期間は1か月ほどあるので、勘が鈍くなっています。勘が鋭くなると、対応も早くなります。

明日からもコーディングをしますが、ちょっとずつ制作スピードがはやくなるのかな?

パソコンでHTMLコーディングは楽

過去にHTMLコーディングをしていた時、iPaaを使っていました。

今はパソコンを使っているので、めちゃ楽です。画面サイズが大きいしウィンドウサイズを自在に変えれる。

iPadの場合、そこまで自由度がないので、不便ではありました。

あと、HTMLコーディングでは必ず使う要素の検証が出来ます。iPadでは無理なので、この点はパソコンの方が便利です。

ま、それでもiPadでホームページを作ってましたけどね(笑)。中々苦労していましたが(笑)。

さいごに

HTMLコーディングは楽しいけど苦しいです(笑)。

表示が上手くいった時は気持ちが良いのですが、上手くいかないとグーグル先生に聞いたり自力で対応するしかないです。

ま、グーグル先生の情報は当たりはずれがあるので、まずは自力で解決できるか試しますけどね。

HTMLコーディングが出来るので、ブログのカスタマイズも出来ます。今のデザインで気に入っているので変えようとは思わないですけどね。

という感じで、毎日、少しだけHTMLコーディングをしようと思っている次第です。

既にポートフォリオサイトを持っているのですが、再び1から作ろうと思っています。

意気込みは十分ですが、まぁ、ボチボチ行きます。

おしまい。