1.はじめに

今回は連想配列の復習とCSSの勉強をかねて静的サイトを作ってみました。

2.完成体

※写真は全て私の私物です。自分で試すときは好きな画像をお使いください。

3.解説

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>MENU BAR</title>
  </head>
  <body>
    <div class="maincontent"  id="app">
      <ul class="contentList">
        <li  v-for="content in list" :key="content.id" class="contentListChir">
          <div class="img-box">
            <a v-bind:href="content.url" target="_blank" class="atag">
              {{content.name}}
              <img v-bind:src="content.img" class="scale-img">
            </a>
          </div>
        </li>
      </ul>
    </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        new Vue({
          el:'#app',
          data:{
            list:[
              {
                id:1,
                name:'kobe',
                url:'#',
                img:'IMG_5375.jpeg'
              },
              {
                id:2,
                name:'matsudo',
                url:'#',
                img:'IMG_1839.jpeg'
              },
              {
                id:3,
                name:'asakusa',
                url:'#',
                img:'IMG_1849.jpeg'
              },
              {
                id:4,
                name:'asakusa',
                url:'#',
                img:'IMG_1851.jpeg'
              },
              {
                id:5,
                name:'skytree',
                url:'#',
                img:'IMG_0390 2.jpeg'
              },
              {
                id:6,
                name:'rikugien',
                url:'#',
                img:'IMG_2077.jpeg'
              },
              {
                id:7,
                name:'kyufurukawa',
                url:'#',
                img:'IMG_2068.jpeg'
              },
            ]
          }
        })
      </script>
  </body>
  <style>
    body{
      background-color: black;
    }
    .maincontent{
      width: 805px;
      text-align: center;
      margin: 30px auto;
    }
    
    .contentList{
      display: flex;
      padding: auto;
      flex-wrap: wrap;/*.maincontentのwidthの範囲で自動的に折り返す*/
      margin: 70px auto;

    }
    .img-box{ /*外枠*/
      margin: 20px 20px; /*左右中央*/
      background-color: lightgray; /*背景色*/
      height: 140px; /*縦*/
      width: 200px; /*横*/
      position: relative; /*外枠に対して中の写真を中央に寄せる為、設定*/
      overflow: hidden; /*外枠からはみ出した部分を隠す*/
      border-radius: 5px; /*外枠の角に丸み*/
      text-align: center;/*aタグの文字を左右中央へ*/
    }
    .scale-img{
      position: absolute; /*position:relativeに対して絶対的な位置を決定*/
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; /**top,bottom,left,rightを0にするとrealtiveを
      設定したタグに対して*左右上下中央に位置します*/
      width: 200px; /*外枠と同じ高さを設定*/
      height: 140px; /*外枠と同じ幅を設定*/
      transition-duration: 0.4s; /*変化の速度*/
    }
    .scale-img:hover { /* :hoverを付けるとカーソルが上に来た時のレイアウトを
      設定できる*/
      transform: scale(1.3,1.3); /*拡大処理(横、縦)*/
      opacity: .3; /*透過させて外枠に設定した背景色を浮かせている*/
      cursor: pointer; /*カーソルをポインターへ変化*/
    }
    .atag{
      text-decoration: none;/*リンク下線部を消去*/
      font-weight: bold;/*太文字*/
      color: black;/*白文字*/
      line-height: 140px;/*文字を上下中央に置くには親タグの高さに揃える*/
      font-size: 25px;/*文字サイズ*/
    }
  </style>
</html>

CSSの動き、解説についてはソースの中にコメントで記述してあるのでそれを参考にして下さい。

4.連想配列と配列の違い

配列は配列の中にvalueのみを収納し、自動的にindexが割り振られ、取得する際はそのindexを使ってvalueを取得します。
例：let array =['りんご','バナナ','いちご'] console.log(array[0]); ==>'りんご'

一方、連想配列はvalueと共にkeyを一緒に配列の中に入れてあげます。
keyと共に入れて何が良いのかというと取得する際にkeyによって可読性があがるというメリットがあります。
例：let obj ={name:'田中', hobby:'soccer',age:24} console.log(obj.name)==>'田中'
例のように書けばobjの名前を取ってきているんだなと見てわかりますよね。

今回の完成体の中の連想配列を見てみると、、、
{ id:1, name:'kobe', url:'#', img:'IMG_5375.jpeg' }
画像一つの情報を連想配列に入れて、いくつもの画像のidとurl,imgをVueインスタンスのデータの配列の中に入れて上げることでそれぞれ画像を表示しているわけです。

5.最後に

今回、vueだけでなくcssを整えてみて、cssができると作品の質が一気nにあがるような気がします。プロダクトは機能も大事ですが使い手にとって心地の良いデザインを考えながらやっていきたいという想いがより強くなりました。