前提条件 Nuxtのver.1を使って個人的なプロジェクトを作っていました。SSRは使わずSPAモードでGenerateして、静的ファイル一式をサーバーにアップする形です。 しばらくプロジェクトを進めて、一旦区切りが出来たので、使っているモジュール(node_modules)を全てアップデートしました。その中でも、すんなりとは行かなかったNuxtのアップデートについて書きたいと思います。 アップデートしたバージョン:1.4.1から2.2.0へ アップデートしたら起きたこと 私はNuxtでスタイリングするときに、NuxtのデフォルトであるPostCSSとcssnextの組み合わせで書いていました。ですので、nuxt.config.jsにはCSS周りの設定は入れていません。 各コンポーネントのスタイリングは、下記のようにvueファイルに書いていました。 <template> <h1> タイトル
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
Sassとは cssを効率よく記述するための仕組み。 ネスト構造での記述ができたり、変数や四則演算、関数、スタイルの継承などができる。 SassにはSCSS記法とSASS記法がある。 後者は開発者に不人気らしく、前者が主流らしい。 scssファイル→cssファイルにコンパイルして利用する。 今回はpreprosというツールを使ってコンパイルする。 インストール prepros公式 : https://prepros.io/ preprosの公式サイトへ飛んで以下のボタンをクリックする。 続いて、以下のボタンをクリックする。 インストーラを起動すると、デスクトップにショートカットが作成される。 作業フォルダに以下のようなフォルダ構成でフォルダを作成する。
10/31追記 node-sass-glob-importerを使用すると記載していましたが、nuxt-sass-resources-loaderのみで同等のことが可能だったため書き直しました。 Sassの変数やMixinsを使う Nuxt.jsでは nuxt-sass-resources-loader を使うことで、変数やMixinsなどを各コンポーネントで使えるようになります。 nuxt-sass-resources-loader { modules: [ ['node-sass-resources-loader', '@/assets/styles/resources.sass'] ] }
やりたいこと webサービスのデザインにルールを設けるために、色をあらかじめ決めておくのはあるあるだと思います。 その管理を楽にすべく、Sassで変数に色コードを指定しておくのもまたあるある。
OOCSSとは object oriented CSSの略。 BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。 何やら原則があるらしい。 原則1 再利用できるようにする 転載元 https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ before #button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height:
CSSだけで絵を描いている方をちらほら見かけまして え、おもしろ、私もやりたいと思い初挑戦してみました。 この記事は記録用として書いています。タメになることはないかも... SCSSで書いてます。 HTMLとかCSSとかJSをウェブ上で書けるサービス。 書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。 https://codepen.io/ CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。 今後もお世話になりそう。 ということで、アンパンマン いざ!お絵描き!といきたいところですが、お題決めにいつも悩みます。 目の前にあんぱんがあったのでアンパンマンにしました。(Chrome推奨です) See the Pen CSS Anpanman by Deren (@deren2525) on CodePen. やってみて、所感 アンパンマンの眉毛とかほ
CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。 この記事では オブジェクト指向 CSSの詳細度 については説明しません。 OOCSSとは オブジェクト指向CSSのことです。 同じコードを2度書かない どこに書いても同じ振る舞いをする 辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。 OOCSSの2つの原則 構造とスキンの分離 同じコードを2度書かないようにするためです。 赤い箱を「赤い」と「箱」に分けます。 そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。 Before .box-red { width: 700px; height: 700px; margin: 0 auto;
本記事は、筆者がチームに新人きた際に作ったHTML/CSSの練習課題の改訂版です。 狙い 課題は以下の3つを目標に作成しました。 BEM記法に慣れてもらう。 パーツ同士が疎結合なクラス設計を意識できるようになる。 保守性を大事にするマインドを身につけてもらう。 対象 HTMLとCSSがとりあえず書ける初心者から中級者への一歩目を踏み出したい人 やくそく HTMLタグは正しく使う(brタグ連打で間隔を調整したり、なんでもdivタグで済まさない)。 レスポンシブに作る(PC用とSP用にそれぞれHTMLを書いて画面幅によってdisplay: none;するのは禁止)。 クラス名はBEMに従う。 装飾にidは使わない。 タグに直接にスタイルを指定しない(ただし例外もある)。 !importantは絶対に使わない。 Javascriptで高さや幅を制御するのは禁止。 今回はモダンブラウザ(chrom
その1では、PC時のパネルのスタイルを作るところまでやりました。 本記事はその続きです。 パネルをレスポンシブにしよう SP時の要求 SP時(768px未満)はアイコンとタイトルを横並びにします。 以下のクラスにメディアクエリでブレークポイントを設定します。 .panel__header .panel__header__icon .panel__header__text CSSで要素を横並びにするには以下の選択肢があります。 floatで浮かせる。 position:absolute;で浮かせる。 tableタグまたはdisplay:table;でテーブル組みをする。 display:flex;でflexboxを利用する。 この中ではflexboxが圧倒的に便利です。 flexboxは昔は一部のブラウザしかサポートしていなかったのですが、今はほぼすべてのブラウザがサポートしているので積極的
<li class="panels__item panel"> <div class="panel__header"> <div class="panel__header__icon"> <img src="dummy.png" alt="ダミー"> </div> <div class="panel__header__text">タイトル1</div> </div> <div class="panel__content"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="panel__footer"> <ul> <li>補足補足補足補足</li> <li>補足補足</li> </ul> </div> </li> 筆者の場合は.panels__item要素に.panelをつけることでパネルの高さを揃えてい
その3では、与えられた課題をついにクリアし、しかも急な追加要求までこなすことができました。 これであなたも立派なフロントエンドエンジニア、とはすぐにはいきません。 IE11での評価はしましたか? さあIE対応だ IE11のサポートが切れた未来にこれを読んでいる人にこの記事は必要ありません。 きっと素敵な世の中になっていることでしょう。 さて2018年現在、IE11をサポートしなければいけない現場がほとんどでしょう。 もしサポートはChromeだけでいいよと言われている幸運な人がいたらその人もこの記事を読む必要はありません。 これまではChromeなどのモダンブラウザで表示確認をしてきたと思いますが、今度はWindowsのIE11で確認してみてください。 きっとどこか崩れたでしょう? 筆者のコード例も見事にIE11で崩れています。PCサイズで確認していますが、まるでSP時のような縦積みになっ
1.はじめに Node.jsとgulpを使用して、Sassの利用環境をローカルPCに構築した際の手順を備忘録として記述します。 Macを使って構築を行いました。 2.手順 下記手順に沿って進めてください。 2-1.Node.jsのインストール Node.jsの公式サイトからインストーラをDLします。 ※今回は推奨版をインストールします。 インストーラを起動します。 「続ける」を押下します。 「続ける」を押下します。 「インストール」を押下します。 インストールが完了したら、「閉じる」を押下します。 ターミナルを起動し、下記コマンドを実行し、Node.jsがインストールされていることを確かめます。 node -v Node.jsのバージョンが表示されればインストールは正常に完了しています。 2-2.gulpのインストール 下記コマンドを実行し、gulp-cliをインストールします。 ■Win
Nuxt v2.4で公式にTypescriptがサポートされた。 この記事はそれ以前のNuxtでTypescriptを使うための方法について記述している。 これから始めるならNuxt(v2.4以降) + Typescriptセットアップを参照いただきたい。 最近、Nuxtについてよく見かけるので、やってみようとちょっと触ってみた。 どうせなら、Typescriptでやりたい。PugやSassを使えたほうがいいだろうとセットアップしてみた。 このエントリの結果できあがる構成の 2018/10/06 時点での主なモジュールのバージョンは次の通り。 nuxt: 2.1.0 typescript: 3.1.1 pug: 2.0.3 node-sass: 4.9.3 最初に vue-cli をインストールする。vue initを使うには@vue/cli-initのインストールも必要らしい。 bash
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く