#04 じゅんきのかいせつ-1

あけましておめでとうございます！！
どうも。好きなお菓子はラングドシャ。じゅんきです。
2022年がスタートしましたね。今年も頑張っていきたいと思います。

さてさて、僕の記事では、我々のサービスで使用しているツール紹介や実装の解説などを主に書いていきます。
初回は我々『　ただいまプロジェクト　』のサイトの紹介です！！

冒頭に申し上げます。作った内容を全く覚えていませんm(__)m
約一年前だと思うのですが、テストの一夜漬け状態で作っていったので、既に僕の脳内から欠落しています。良くないね。
そして、これから説明する内容は、素人の素人による素人のための解説です。タグの解説などは出来ません！なぜなら僕が完全に理解してないから！
HTMLがCSSがなんぞやっていうのも、割愛します。
では、やっていきましょう！

まずは、完成図から。↓

そして、そのコードがこちら。↓

    <div class="wrapper-1">
       <div class="container-1">
           <div class="title-1 load-up">
               <img class="gif-1" src="img/ttl_01.gif" height="240" width="1100" alt="">
           </div>
           <h2 class="desc-1 load-up">
               故郷で生きること。故郷を離れること。<br>私たちに選択肢はあっただろうか。<br>未来の子どもたちに選択肢を残せているだろうか。
           </h2>
           <p class="text-1 load-up">
               私たちは、生まれ育った故郷が好きだ。<br>ただ、地方には多くのハンディキャップが存在する現実がある。<br>「田舎だから仕方ない」「美しい自然と優しい人に囲まれるだけで十分」私たちがそう思えても、未来の子ども達も同じように感じるだろうか。<br>
               雇用、介護、所得、教育、情報。<br>地方を取り巻く現実に、私たちは目を背けない。
           </p>
       </div>
       <div class="container-1">
           <div class="title-1 scroll-up">
               <img class="gif-2" src="img/ttl_02.gif" height="544" width="982">
           </div>
           <h2 class="desc-1 scroll-up">
               私たちにできることを始める。<br>それがどんなに小さなことでも。
           </h2>
           <p class="text-1 scroll-up">
               リモートワーク、オンライン教育。<br>社会は日々めまぐるしく変化している。<br>私たちは、地方で生きる人の選択肢を広げ、社会に還元していく。
           </p>
       </div>
   </div>

上記のコードをイメージ化したもの。↓

個人的にはこれで説明終了としたいのですが。笑
一応、文章で説明するとですね、フルーツの贈り物をイメージすると分かりやすいかな？

＜赤枠 = title-1,desc-1,text-1＞　⇒　フルーツそのもの
表示したい文字や画像をそれぞれ一塊としたものです。デザインに合わせて３つの要素に区切った感じです。title-1とかtext-1とかですね。名前なんぞは自分が分かればなんでもいいです。命名の法則を自分の中で決めておくと混乱を防ぎ、後から見ても分かりやすいです。
イメージとしては、リンゴ、イチゴ、バナナなどのフルーツ一つ一つです。

＜黄枠 = container-1＞　⇒　フルーツを入れる箱
赤枠の各要素をまとめたものです。基本はこの黄枠を一単位として考えます。また、まとめることで装飾や後の展開もやりやすくなります。
完成図では、文字の大きさや色、行間なども同じなので、container-1を2つ用意して同じ名前のまま使用します。
これでフルーツ一つ一つを箱に入れてまとめました。後は、同じ箱や中身を入れ替えた箱を使っていくイメージです。

＜青枠 = wrapper-1＞　⇒　箱のラッピング
黄枠を更にまとめたものです。この青枠を大きな区切りとして考えて、
wrapper-1、wrapper-2、wrapper-3…と展開していき、その中身の名前も連動させるように変えていきます。
ですので、wrapper-2ではcontainer-2、title-2…となります。
一つの箱や複数の箱をそれぞれ好きなようにラッピングして仕上げるイメージです。

以上なのですが、伝わりましたかね？この説明と例え。
と、ここまで書いて気付いたことが。
僕の装飾の仕方は、透明なビニールでラッピングしてるだけで、外観は箱のデザインが見えてるって感じでした。なぜそうなってるのかも思い出せません。何せ一夜漬けだから。

かなりザックリと説明しましたが、今回はここまでです。
この記事を書くのに5時間ぐらいかかっていて、やはり文章を書くのは苦手だなと痛感しました。

では、また次回！