〈その9〉独学プログラミング勉強〜２カラムの２カラム〜

ふくはら＠プログラミング勉強中

情報の拾得の多様化BANZAI
B'zのHOMEもサイコーでしたね♫

情報の発信をしてる皆さまのおかげで
プログラミングで詰まっても
どうにかなってます
あざっす！


これがお世話になってるサイト様方だ！


心からの感謝を！ありがとうございます！！！

画像9



自分も情報の発信を
カタカタ楽しんでおります♪
誰かの勇気になりますように:-)




はじめに

学習環境：Mac Book Air2017
　　　　　ドットインストール（カッキーン！）
学習状況：HTML,CSSの基礎
　　　　　Bootstrapの基礎を学びました。
学習期間：2020/07/25あたりから
　　　　　毎日コツコツと積みあげ中


１ヶ月の失敗→改善がコチラ↓


サイト構成をざっくりと

・タイトル＆アイコン（ファビコン）
・アラート
・ヘッダー
・バナー
・導入の部分（イントロ的な？）
・お気に入り　
・ぬいぐるみ系　
・とり系　←今回はココを解説
・終わりに（エピソード的な？）
・プロフィール
・お問い合わせ
・フッター


改善：シンプル・オブ・ベスト！
　　　スッキリ✨としてみました。




失敗は成功のもと！

失敗のパソコンサイズがコチラ

画像1

レイアウトでいっぱいいっぱいで
文字を気にかける余裕なんて
いっっっさいなし！



スマホサイズ

画像4

なんじゃコリャ:-(



実際のコード

<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>

Bootstrapを使ってもぅ分けワカメ（:]ミ

画像7

ペンギンも目を背ける悲惨な状況_:(´ཀ`」 ∠):







ここらで1番良いのを頼む

イーノックと懇願！パソコンサイズ

画像9

どシンプルにしました。
２カラムの２カラムです。



画像9

Chromeの拡張機能の
UI Build Assistantだと分かりやすいですね(^ ^)b



実際のコードがこちら

<section class="se2">
  <h1 class="content1 text-center my-4 font-weight-bold">★とり系★</h1>
  <div class="con4">
  
   <div class="con5">
    <img src="img/img42.PNG" alt="ぱの写真" class="item41">
    
    <div class="item42">
     <h2 class="font-weight-bold">ぱ</h2>
     <p>生息地：その辺</p>
     <p>特徴：スリッパ</p>
     <p>己を犠牲に家をキレイにしてくれる健気な子</p>
    </div>
    
   </div>

18行が12行にスッキリ✨

CSSではcon4とcon5に
display: flex;　→ヨコ並びにして
justify-content: center;　→中央ぞろえ

そのスキルはすでに手中に収めたわ！
反復の練習もかかしませんことよ。


そいでコードをより具体的にイメージ化

画像10


このイメージをパソコン画面に
映し出せる楽しさったら
たまらない！
挑戦したからできた失敗ですね。



そんでタブレットサイズ

画像9

レスポンシブでは変化を楽しみたいが
今あらためて見たら
真ん中にもうちょっとスキマが
欲しかったなぁと
さらなる改善の闘志に火を灯す！



CSSがコチラ

@media only screen and (min-width:479px) and (max-width:767px){
.con5 {
   flex-direction: column;
}

479px以上767px以下で
タテ並びとしてます。


ちょいちょいflexの
コンテイナーをどうしたら
思った通りの並びにするか悩みますが
とにかく試してます。





そしてスマホサイズ

画像10

やっぱりシンプルに２カラム！

ちょこーん♪とした雑貨たちなので
チョコチョコっとした感じにしました。

CSSでは
@media only screen and (max-width: 479px)
→479px以下では
con4（画像と文の２カラム）を
flex-direction: column;　→タテ並び


サイズ設定はiPadとiPhoneを
基準にしてます。







画像10

まとめ・感想

これだけ練習したらカラムは怖くない！

スミマセンうそです。。。
今Airbnbの模写をしてますが
思い通りに進みませんボスケテ。。。


実践というか稼ぐとなると
こんなダメダメサイトでは
納品の後、即リターンされちゃうorz

だからこそ今日も勉強あるのみ！


楽しんで勉強しているという
初心を忘れないように
ブログの継続もがんばります:-)






----♫--------------------------♪------------
Well begun is half done.
物事をうまく始められたなら
半分できたも同然だ。
＊アリストテレス＊
-----------------------------♩---------------






この記事が気に入ったらサポートをしてみませんか？