＜その４＞プログラミング勉強・1ヶ月目の大失敗

その2、その3からのつづきです。
プログラミング勉強を始めて1ヶ月たったので
アウトプットとして自分のサイト的な？
のを作ってみました！
見事に失敗しましたorz

失敗までの流れ

１.基礎を学びサイト制作の欲が出る

２.サイトのイメージを思い描く

３.さらに新しく学んだBootstrapを
　使いたくなる

４.ヘッダーでBootstrapを使い、調子に乗る

5.知識が追いつかず
　できないことが増えていく

6.だんだんイメージとズレてくる

結果：サイト制作、大失敗orz

はじめに

失敗した原因：
Bootstrapに頼りすぎ。
中途半端にしか学んでいなかったので
中途半端なサイト制作となる。

改善案：
まだ自分にBootstrapは使いこなせないので
分かりやすくシンプルなことだけで使う。
日々の勉強を積み重ねていく。

参考にさせていただいた素敵サイト様：

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

実際のコードの一部がコチラ↓

<section class="con5 mt-5 mx-3 pb-4">
     <h2 class="text-center py-4">ぬいぐるみ系</h2>
     <div class="container">
       <div class="con6 mb-３ row">
         <div class="doll col-md-4 mt-3">
           <div class="do1">
             <img src="img/img32.PNG" class="mimg2 w-100">
           </div>
           <div class="do2">
             <h3 class="px-2 to1">がお</h3>
             <p class="px-2">生息地<br>　あらゆる所<br>特徴<br>　カワイイ！</p>
             <p class="px-3 d-none d-sm-block">コムサで発見。一目惚れ。君と出会えて本当に良かった。</p>
           </div>
         </div>

パソコン画面での見え方

タブレットでの見え方

スマホでの見え方

コードはナイス笑顔なクマの部分です。

まずは３カラムを作りたかったのです。
ドットインストールで学んだ２カラムを
３カラムにするだけと思ってました。

具体的な手順として

太字がBootstrapです。

・class="container"で全体をある程度の
　幅を持たせて中央揃えにする。
　
・class="con6 mb-３ row"で
　margin-bottomをスキマを空けつつ
　クマ、サメ、トリをヨコ並びにする。

・class="doll col-md-4 mt-3"で
    margin-topをスキマを空けつつ
　クマ画像と説明文を768px以上 から
　タテ並びになるようにする。
　４は１２分の４らしいが
　なんか訳わかんなくなる

・Bootstrapはレスポンシブをある程度
　勝手にやってくれる

・だから自分のイメージとズレてくる

・修正したくても「!important」があり
　できない（泣）

・ここまで整理するだけでも
　知識が不足して、時間がかかりまくる

・投げ出したい！！！！！←今ココ

この記事をかくにあたり
改めてBootstrapの勉強をしたら
グリッドデザインをそもそも
ちゃんと理解していないことに気付けました。

なので、ここまでの手順もちゃんと理解して
かけているかビミョー…_:(´ཀ`」 ∠):
間違っていたらスミマセン。。。

兎にも角にも、ちゃんと理解していないので
大火傷でした。

一応わかったことは
タブレット画面で画像の大きさが違う原因は
説明文の文字数の長さでした。

それを調べるのにかかった時間は
１時間くらいです。

生兵法は大怪我のもと
私の為にあるお言葉です。

さらに失敗した例がコチラ↓

<section class="py-5">
     <h2 class="text-center py-4 tori">とり系</h2>
     <div class="container">
       <div class="mb-6 row mb-3">
         <div class="con3 col-sm-6">
           <div class="con4 mb-6 row">
             <div class="doll row col-sm-12 px-0">
               <div class="do12 col-sm-6 px-0">
                 <img src="img/img42.PNG" class="mimg w-100">
               </div>
               <div class="do2 col-sm-6 pl-1 pr-0 mb-3">
                   <h4 class="">ぱ</h4>
                   <p class="">生息地：あらゆる所<br>特徴：モップスリッパ</p>
                   <p class="d-none d-md-block">自分を犠牲に家をキレイにしてくれる健気な子</p>
               </div>
             </div>
           </div>
         </div>

divの数がえぐいですね。
ちゃんとしたサイトで凝ったデザインなら
こういうこともあるでしょうが
私のサイトてばキャパシティが不足して
理解＆整理ができておりません。


さらに、始めはdivの左スペースを揃えておらず
1カラムあたりの〈/div〉がどこまでか
分からないくらいにゴチャりました。


なので、上のクマのコードと、このコードも
２回は全消しして書き直しています。
なんとも時間のムダ使いorz

反省として
divをキチンと把握する為に
サボらずにスペースを揃えたり
改行を多めにいれて分かりやすくする。

失敗の全画面は＜その２＞です

まとめ

冒頭でもありましたが
初めてのサイト制作は大失敗です。
1ヶ月目だからと甘えず改善していきます。

失敗経験と自分の成長の過程を残せたという
成果はでたかなと思います。

そして、失敗したサイト制作の時間は
とっっっても充実してました。
挑戦して経験できたから
プログラミングの楽しさを知りました。
まだまだお祭り気分で
打ち上げ花火をた〜まや〜出来るよう
精進してまいります。


失敗への道のりにお付き合いいただき
ありがとうございました。

参考動画＞＞＞

ブログもまだまだこれから！
挑戦と継続していきます。
次回作にご期待ください！:-)