Vue CLIとCSS Flexboxを使いwebページを作ります。

全体の構成

コンポーネントは「ヘッダー」「メイン」「フッター」と分けています。

基本的な作りは以下のページをご参照下さい。

サンプル画面あり Vue Routerでナビゲーションを作り画面遷移

今回は以下のイメージで作成します。メインのコンポーネントで
CSSのFlexboxを使います。


CSS Flexboxの利用

vueファイルはこちら。

<template>
  <div class="main">
    <div class="parent">
      
     <div class="contents-box">
       <a href="https://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E9%A7%85">
       <img src="static/img/tokyost.jpg" alt="flexbox" class="contents-img">
       </a>
       <h2 class='subtitle'>東京駅</h2>
       <p>東京駅（とうきょうえき）は、東京都千代田区丸の内一丁目にある、東日本旅客鉄道（JR東日本）・東海旅客鉄道（JR東海）・東京地下鉄（東京メトロ）の駅である。</p>
     </div>
            	
     <div class="contents-box">
       <a href="https://ja.wikipedia.org/wiki/%E5%A4%A7%E9%98%AA%E9%A7%85">
       <img src="static/img/osaka.jpg" alt="flexbox" class="contents-img">
       </a>
       <h2>大阪城</h2>
       <p>大坂城/大阪城（おおさかじょう[1]）は、安土桃山時代に摂津国東成郡生玉荘大坂に築かれ、江戸時代に修築された日本の城。別称は錦城（きんじょう／金城とも表記）。「大阪城跡」として国の特別史跡に指定されている。</p>
      </div>
        
     <div class="contents-box">
       <a href="https://ja.wikipedia.org/wiki/%E9%98%BF%E8%98%87%E5%B1%B1">
       <img src="static/img/aso.jpg" alt="flexbox" class="contents-img">
       </a>
       <h2>阿蘇山</h2>
       <p>阿蘇山（あそさん）は、日本の九州中央部、熊本県阿蘇地方に位置する活火山。外輪山と数個の中央火口丘から成り、外輪山は南北25km、東西18kmに及び（屈斜路湖に次いで日本では第２位）面積380km2の広大なカルデラ地形（鍋型）を形成する。</p>
     </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Main',
  data () {
    return {
      msg: 'ここはメイン１です'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
  color:#555d6b;
  font-weight: bold;
}
.parent {
  margin-top:10px;
  display: flex;   
  justify-content:space-around;
  flex-direction: row;
}
.contents-box{
  background-color:lightgray;
  padding:10px;
  margin:10px;
}
.contents-img{
  width:80%;
  height:200px;
}

@media(max-width:768px) {
.parent {
  flex-direction: column;
}
}

</style>

HTML

親のdiv要素と子の要素を３つ配置しています。
親要素のcssクラスは”parent”
子要素のcssクラスは”contents-box”としています。

<div class="parent">
      
   <div class="contents-box">
     <a href="https://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E9%A7%85">
     <img src="static/img/tokyost.jpg" alt="flexbox" class="contents-img">
     </a>
     <h2 class='subtitle'>東京駅</h2>
     <p>東京駅（とうきょうえき）～の駅である。</p>
   </div>
            	
   <div class="contents-box">
     <a href="https://ja.wikipedia.org/wiki/%E5%A4%A7%E9%98%AA%E9%A7%85">
     <img src="static/img/osaka.jpg" alt="flexbox" class="contents-img">
     </a>
     <h2>大阪城</h2>
     <p>大坂城～に指定されている。</p>
   </div>
        
   <div class="contents-box">
   　<a href="https://ja.wikipedia.org/wiki/%E9%98%BF%E8%98%87%E5%B1%B1">
     <img src="static/img/aso.jpg" alt="flexbox" class="contents-img">
   　</a>
     <h2>阿蘇山</h2>
     <p>阿蘇山～を形成する。</p>
    </div>

</div>

css

親要素のcssクラス”parent” に 「display: flex;」を指定すれば Flexboxが利用できます。

.parent {
  margin-top:10px;
  display: flex;   
  justify-content:space-around;
  flex-direction: row;
}
.contents-box{
  background-color:lightgray;
  padding:10px;
  margin:10px;
}
.contents-img{
  width:80%;
  height:200px;
}

@media(max-width:768px) {
.parent {
  flex-direction: column;
}
}

flex-direction: row;　とすることで、配下の要素が横並びになります。

また、メディアクエリを指定しスマートフォンでのレイアウトも指定しています。「flex-direction: column;」とすることで配下の要素が縦並びになります。

パソコンとスマホで、横並びと縦並びを変更することでレスポンシブデザインを実現可能です。

サンプル画面

サンプル画面はこちらです。

Vue.jsの学習はこちらがお勧めです！