【Vue + vue-mq】レスポンシブ対応でのVue実装について - Qiita
目次 ・レスポンシブ対応での課題 ・レスポンシブ対応での課題解決方法 ・vue-mqとは ・vue-mqの実装方法 ・vue-mqでのデメリット ・vue-mqのseo要件が満たされない可能性とは ・vue-mq実装時の動き レスポンシブ対応での課題 一般的な実装方法としては、PCやスマホなど各デバイス毎に各HTMLファイルを複数用意し最適化する手法を取っています。 レスポンシブ対応では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。 その際、ここで問題となるのが「1つのHTMLファイル」。 一般的な実装方法を先ほど記載しましたが、基本PC・SPでHTMLが分かれている。 つまり、PC用のデザイン、SPの用のデザインとなっているため、それに合わせてHTML構造も異なります。 レスポンシブ対応する際
Vue.jsでSPAサイトを作成するチュートリアル【4. CSS編】
Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。 今回はコーポレートサイトを想定して作成していきます。 ※記事が長くなったのでチュートリアルを分割しました。 目次 表示編 ルーター編 コンポーネント編 CSS編 ←イマココ JS編 ライブラリ編 メタ編 ビルド編 前提 タスクはnpm scriptsで一限管理 コマンドはyarnを使用 vue-cliのwebpack-simpleを使用 CSSはSCSSを使用し用途に合わせてPostCSSを使用 バージョン "vue": "^2.5.11" "webpack": "^3.6.0" "node-sass": "^4.7.2" "postcss": "^6.0.16" "stylelint": "^8.4.0" CSSの環境構築 SassとPostCSSを使用するので以下のコマンド
第２回 - サンプル作成したVue.jsのプロジェクト解析 | blog(スワブロ) | スワローインキュベート
みなさん、こんにちは。 春らしい陽気になったかと思えば、いきなり寒くなり、気温のアップダウンが激しい今日この頃です。 体調崩していませんか？ 妻と娘が風邪をひきまして、「なんでパパだけ風邪ひいてないの⁉︎･･･あ、バカだからか！」と妻に おちょくられた むつたく です。 ・・・丈夫なんじゃい！！！ さて、Vue.jsについて第２回目（前回はこちら）になりますが、サンプルのプロジェクトを作成したかと思います。 今回はそのプロジェクトを掘り下げていこうと思ってます。 ターゲットはVue.js初心者、入門者になりますので、あしからず。 やること ディレクトリ構成と各ファイル説明 ファイル解析 ページ追加 ディレクトリ構成 vue create <ProjectName>を実行するとプロジェクトディレクトリが作成されました。 今回はプラグインを選択する際、デフォルト(babel/eslint)+V
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsでbackground-imageを指定する - Qiita
https://walking-succession-falls.com/wordpress-vue-js-bootstrap%25E3%2581%25A7%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E3%2582%2592spa%25E5%258C%2596%25E3%2581%2597%25E3%2581%25BE%25E3%2581%2597%25E3%2581%259F%25E3%2580%2582/
VueRouter基本ルーティング記法まとめ
