見出し画像
Photo by spinel3

#49 Vue.js + Rails アプリ開発アウトプット

hiro


こんにちは。hiroです😃
今YouTubeで日本のプロ野球、メジャーリーグで大活躍をしたイチロー氏の特集動画を見てました。僕はイチロー氏の大ファンです。輝かしい経歴はもちろんの事、野球に取り組む姿勢や考え方、プロ意識、自分の信念を曲げない姿、怪我をしないために体調管理を徹底する姿、事前準備など、全てにおいてリスペクトしか無いです😂動画を見て、生きている間にイチロー氏の現役でプレーしている姿を見れた事は、本当にラッキーだったなとつくづく感じます！
輝かしい経歴はこちら。
https://sp.baseball.findfriends.jp/player/result/%E3%82%A4%E3%83%81%E3%83%AD%E3%83%BC/



「小さいことを積み重ねるのが、とんでもないところへ行くただひとつの道だと思っています」


イチロー氏の御金言の通り、本日もアウトプットをして日々の行動を積み重ねていきたいと思います！😃

Vuetifyでテンプレートを作成する

public/index.html
<!DOCTYPE html>
<html>
  <head>
    〜省略〜
  </head>
  <body>
    <v-app id="app">
      <v-toolbar color="red lighten-3" dark>
        <v-toolbar-title>Snippet App</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat>New Snippet</v-btn>
      </v-toolbar style="height: 1000px; max-width: 2400px;"> ①
      <v-container>　
        <v-layout>　②
          <v-flex xs5>　③
            <div style="margin: 10px">　
              <h2>Snippet Shortcut</h2>
              <ul>
                <li>Snippet Title</li>
              </ul>
            </div>
          </v-flex>
          <v-flex xs7>
            <v-card style="margin-top:10px">　④
              <v-card-title primary-title>　⑤
                <h3 class="headline">Snippet Title</h3>
              </v-card-title>
              <div style="margin:10px 20px;">
                <textarea style='width:100%; height:300px; background-color:#efefef; padding:3px'>hoge</textarea>　⑥
              </div>
              <v-card-actions>　⑦
                <v-btn flat color="red">Update</v-btn>　
                <v-btn flat color="glay">Dalete</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-app>
    <script>
      new Vue({
        el: '#app',
        data(){
          return{
          }
        },
        mounted(){
        },
        methods:{
        }
      })
    </script>
  </body>
</html>

・① "style="" "で、要素にCSSスタイルを指定。
・② "v-layout" 要素の下の ③ "v-flex" で "xsN" で数値Nを加える事で、全体横幅のN/12の横幅を自動的に指定。
・xs後の数値が12/12を超えると、自動的に次の行で描画される様になる。
・④ "v-card" でカード形式のパーツを作成。
・⑤ "v-card-title" はカードタイトルの記述箇所になる。
・⑥ "textarea" はHTMLのタグ要素で、装飾なしの文字列を表示できる。
・⑦ "v-card-actions" は "v-card" に対する何らかの操作をするボタンなどを表示するためのエリアとして定義されるもの。

上記の記述（省略記載しておらずすみません）で実装出来た内容はこちら。
https://gyazo.com/f29829a9547f19c52d35c7547acef4d5

開発をしながら学習をすると、良くも悪くも形になって表示されます。
少しずつ前進しているのが分かるのが嬉しいですね🙃
イチロー氏のおかげで、当面はモチベーション高く学習出来そうです！


本日も最後まで読んで頂き、ありがとうございました！


※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材TechPit　
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！


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