Bootstrap4のNavbarをモバイル対応
ポートフォリオサイトのはNavbarにモバイル対応をした時に
意外と手こずったので備忘録として残します。
モバイル画面で画面が崩れる場合にItemをドロップダウン表示するボタンを追加しました。
.navbar-toggler-icon
アイコン表示
.data-target
ドロップダウン表示の対象
.data-toggle="collapse"
画面崩れをtriggerに表示/非表示の切り替え
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<router-link class="nav-item nav-link navbar-brand" to="/">portfolio</router-link>
<!-- ボタン追加 -->
<button class="navbar-toggler-icon navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"></button>
<!-- Item -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<div class="navbar-nav">
<router-link class="nav-item nav-link" to="/">Home</router-link>
<router-link class="nav-item nav-link" to="/about">About</router-link>
<router-link class="nav-item nav-link" to="/works">Works</router-link>
<router-link class="nav-item nav-link" to="/contact">Contact</router-link>
</div>
</div>
</nav>
モバイル画面表示
Google Formでお問い合わせページを作成
今日はポートフォリオサイトのうち未完成だったお問い合わせページを作成していました。
https://myportfolioproject-a67bf.firebaseapp.com/contact
これで一応ひととおり作成しなんとか形になりました。
ただしSEOの施策がまだまだなので随時対応するつもりです。
ポートフォリオサイトをFirebaseで公開
Vue CLIを開発したポートフォリオサイトですが
問い合わせページを除き一通り作成しました。
これまで作成したページにつきましてFirebaseで公開しました。
Shuichi's portfolio
まだ問い合わせページができていないので
これから作成して更新します。
技術的な問題点がありましたら
ご指摘いただけると幸いです。
次回
問い合わせページを仕上げる
Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと
Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。
これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。
手順は難しいものでなく
公式サイトで紹介されている手順通りにやれば大丈夫でした。
やったこと
Firebase のプロジェクトを作成する。
- Firebaseの公式サイトにGoogleアカウントでログインする。
- Firebaseのコンソールでプロジェクトを新規作成する。
https://console.firebase.google.com/
Firebase CLIをインストールする
npm install -g firebase-tools
Firebase CLIからFirebaseにログイン
firebase login // chromeが立ち上がる
Vue.jsのプロジェクトディレクトリでfirebase initを実行
cd my-project firebase init
firebase initで色々指定を求められましたがVue CLIの公式サイトを参考に以下を選択しました
firebase.jsonを編集
{
"hosting": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}Vueプロジェクトをビルド
npm run build
Firebaseのプロジェクトにデプロイ
firebase deploy --only hosting
コマンド実行結果に表示されるURLをアクセスしたら
ローカル環境と同じ画面を表示できました。
参考
VueCLIの公式サイト
cli.vuejs.org
vue init コマンド実行時の指定や
firebase.jsonの内容を参考にしました。
vue-router公式サイト
router.vuejs.org
vue routerがhistoryモードでのFirebaseの設定を確認
次回
残りの画面を仕上げる
Vue CLI3のプロジェクトにportfolioのページを作る
前回の続きです。
これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。
簡単ですが
ポートフォリオサイトをAboutページを作成してみました。
components/About.vue
<template>
<div class="about">
<h1 class="title">自己紹介</h1>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="../assets/about.jpg" width="300px" alt="">
</div>
<div class="col-sm-6">
<dl>
<dt>名前</dt>
<dd>{{ name }}</dd>
<dt>住まい</dt>
<dd>{{ address }}</dd>
<dt>スキル</dt>
<dd>{{ skill }}</dd>
<dt>SNS</dt>
<dd>
<ul>
<li v-for='item in sns'>
{{ item.term}}: <a :href=item.href>{{ item.description }}</a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
name: 'Name',
address: 'Address',
skill: 'Skill',
sns: [
{term: 'email', href: 'mailto:xxx@gmail.com', description: 'xxx'},
{term: 'twitter', href: 'https://www.twitter.com/yyy', description: 'yyy'},
{term: 'GitHub', href: 'https://www.github.com/zzz', description: 'zzz'}
]
}
}
}
</script>
イメージ
参考
以下を参考にしました
データバインディング
https://v1-jp.vuejs.org/guide/syntax.html
https://vue-loader-v14.vuejs.org/ja/start/spec.html
v-for
https://jp.vuejs.org/v2/guide/list.html
グリッドシステム
https://getbootstrap.com/docs/4.1/layout/grid/
次回
firebaseで公開してみる
Vue CLI3のプロジェクトにBootstrapのJumbotronのページを作る
前回の続きです。
これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。
現在ポートフォリオサイトを制作中です。
そのトップページを見栄え良く見せるために
BootstrapのJumbtronを使ってみました。
components/Home.vue
<template>
<div class="jumbotron jumbotron-fluid bg-info">
<div class="container">
<h1 class="display-4">Welcome to My portfolio</h1>
<p class="lead">This site is made with Vue.js, Bootstrap.</p>
</div>
</div>
</template>
イメージ
参考
Bootstrapの公式サイトを参考にしました。
getbootstrap.com
次回
どれかの画面を作成。