やりたいこと Nuxt.jsを使って静的サイトを作りたい。（今流行りのStatic Siteをgenerateしたい。） つい最近まで素のHTMLとCSS（Scss）を書いていることが多かったけど、いろんな局面でNuxtの1つや2つくらい使えると便利だと思い、頑張ってもろもろを勉強しています。 これまでの自分のやり方で、今後Nuxtでも実現したいこと リセット系cssを読み込む 共通scssを読み込む（フォントなどの指定） 共通scss変数を読み込む（色やブレイクポイントの数値など） ※assets配下にcssとscssフォルダを作成して、その中にこれらのファイルを入れます。 リセット系CSSを読み込む nuxt.config.js内にcssという指定があると思うので、そこに読み込むファイルを追加する。 nuxt.config.js /* ** Global CSS */ css: ['~/assets/css/ress.css'] ※ちなみにリセットにはress.cssを使っています。 参考：2019年版！おすすめのリセットCSSまとめ - ress.css 共通SCSSを読み込む（フォントなどの指定） 参考：API: css プロパティ - Nuxt.js 別途パッケージをインストールすれば、先程と同様にnuxt.config.js内のcssに書くことで認識してくれます（CSSとは名ばかりSCSSも読んでくれる） パッケージのインストール npm i -D node-sass sass-loader nuxt.config.jsのcssに追記 nuxt.config.js /* ** Global CSS */ css: ['~/assets/css/ress.css', '~/assets/scss/base.css'] 共通scss変数を読み込む 参考：Nuxt.jsでグローバルSass変数を使いたい - Qiita あれ、base.scssと一緒に読み込まない（nuxt.config.jsのcss内に書かない）のは何でなんでしたっけ…？（前にどっかで読んだけど正確に覚えてない…多分重複して読み込まれるスタイルが発生するから…？） とりあえず別途ミドルウェアを使用します。 いろんな種類があるぽいけどここでは@nuxtjs/style-resourcesを使用します。 インストール npm i -D @nuxtjs/style-resources nuxt.config.jsのmoduleに追記 nuxt.config.js /* ** Nuxt.js modules */ modules: [ //他のモジュール設定 '@nuxtjs/style-resources' //追記 ] nuxt.config.jsにstyleResourcesを追記 nuxt.config.js //buildとかの他の設定と同じ階層に追記する styleResources: { //読み込みたいファイルを指定 scss: ['@/assets/scss/variables.scss'] }, こまってること[WIP] LinterやFormatterが何かとつらみ 「きれいなコードを書こう！」と意気込んで、LinterやFormatterを有効にすると、結構きびしくエラーを吐かれるので「もうちょっと素早く作業を進める予定だったのに…」みたいなことになりがちです。vscodeのformatOnSaveの設定と、lint --fixの自動実行みたいなところをうまくミックスしたいのですが、まだできていません… おわりに 「create-nuxt-appのようなボイラープレートを使っていれば自分で設定することなんてない！（どや）」なんて甘く見ていたんですが、意外と追加で設定する必要のある項目が多かったので、自分のメモ書きとして初めてQiitaの記事を書いてみました。今後も無理をせずに自分にとって有益な情報を発信していきたいとおもっとりゃす。
Nuxt.jsを使って静的サイトを作りたい。（今流行りのStatic Siteをgenerateしたい。） つい最近まで素のHTMLとCSS（Scss）を書いていることが多かったけど、いろんな局面でNuxtの1つや2つくらい使えると便利だと思い、頑張ってもろもろを勉強しています。
これまでの自分のやり方で、今後Nuxtでも実現したいこと
※assets配下にcssとscssフォルダを作成して、その中にこれらのファイルを入れます。
assets
css
scss
nuxt.config.js内にcssという指定があると思うので、そこに読み込むファイルを追加する。
nuxt.config.js
/* ** Global CSS */ css: ['~/assets/css/ress.css']
※ちなみにリセットにはress.cssを使っています。 参考：2019年版！おすすめのリセットCSSまとめ - ress.css
参考：API: css プロパティ - Nuxt.js
別途パッケージをインストールすれば、先程と同様にnuxt.config.js内のcssに書くことで認識してくれます（CSSとは名ばかりSCSSも読んでくれる）
npm i -D node-sass sass-loader
/* ** Global CSS */ css: ['~/assets/css/ress.css', '~/assets/scss/base.css']
参考：Nuxt.jsでグローバルSass変数を使いたい - Qiita
あれ、base.scssと一緒に読み込まない（nuxt.config.jsのcss内に書かない）のは何でなんでしたっけ…？（前にどっかで読んだけど正確に覚えてない…多分重複して読み込まれるスタイルが発生するから…？）
base.scss
とりあえず別途ミドルウェアを使用します。 いろんな種類があるぽいけどここでは@nuxtjs/style-resourcesを使用します。
@nuxtjs/style-resources
npm i -D @nuxtjs/style-resources
module
/* ** Nuxt.js modules */ modules: [ //他のモジュール設定 '@nuxtjs/style-resources' //追記 ]
styleResources
//buildとかの他の設定と同じ階層に追記する styleResources: { //読み込みたいファイルを指定 scss: ['@/assets/scss/variables.scss'] },
「きれいなコードを書こう！」と意気込んで、LinterやFormatterを有効にすると、結構きびしくエラーを吐かれるので「もうちょっと素早く作業を進める予定だったのに…」みたいなことになりがちです。vscodeのformatOnSaveの設定と、lint --fixの自動実行みたいなところをうまくミックスしたいのですが、まだできていません…
formatOnSave
lint --fix
「create-nuxt-appのようなボイラープレートを使っていれば自分で設定することなんてない！（どや）」なんて甘く見ていたんですが、意外と追加で設定する必要のある項目が多かったので、自分のメモ書きとして初めてQiitaの記事を書いてみました。今後も無理をせずに自分にとって有益な情報を発信していきたいとおもっとりゃす。
create-nuxt-app
-webkit- ~ CSSのデバグを目的にブラウザの検証からcssのプロパティーをチェックすると、-webkit-...などを見かけることがあります。 なんだこれ？と思って「-webkit...」でググっても全然ヒットしません。 何故でしょう。。。 グーグルの「-」検索のせい ブラウザの検索で、「-」は、その用語を含まない検索です。 つまり、「-webkit-text-size」などと調べると、「webkit」も「text」も「size」もふくまないページを検索してしまいます。 なので、探そうとすれば探そうとするほどヒットしません。 解決方法 「webkit text size」と分割して検索しましょう。 ちなみに、-webkit-なんたらはクロムなどでデフォルトで設定されるcssなどです。 -mozはfirefox系
CSSのデバグを目的にブラウザの検証からcssのプロパティーをチェックすると、-webkit-...などを見かけることがあります。
-webkit-...
なんだこれ？と思って「-webkit...」でググっても全然ヒットしません。 何故でしょう。。。
ブラウザの検索で、「-」は、その用語を含まない検索です。 つまり、「-webkit-text-size」などと調べると、「webkit」も「text」も「size」もふくまないページを検索してしまいます。
なので、探そうとすれば探そうとするほどヒットしません。
「webkit text size」と分割して検索しましょう。 ちなみに、-webkit-なんたらはクロムなどでデフォルトで設定されるcssなどです。 -mozはfirefox系
buttonの変なグレイの正体 buttonのレイアウトは、ブラウザ毎に、デフォルトでボタンっぽいレイアウトを付与する設定がされています。 消す方法 cssでデフォルトの挙動を消し去るように上書きします。 button { /* 下の二つのプロパティーが button だと変なグレイがつくので、noneに上書き。 */ -moz-appearance: none; /* Geko (firefox) */ -webkit-appearance: none; /* Chrome*/ } 例 <button style="-webkit-appearance: none">-web-kit-appearance: none</button> <button style="-webkit-appearance: button">-web-kit-appearance: button</button> 結果
buttonのレイアウトは、ブラウザ毎に、デフォルトでボタンっぽいレイアウトを付与する設定がされています。
cssでデフォルトの挙動を消し去るように上書きします。
button { /* 下の二つのプロパティーが button だと変なグレイがつくので、noneに上書き。 */ -moz-appearance: none; /* Geko (firefox) */ -webkit-appearance: none; /* Chrome*/ }
<button style="-webkit-appearance: none">-web-kit-appearance: none</button> <button style="-webkit-appearance: button">-web-kit-appearance: button</button>
未来電子テクノロジーでインターンをしている<@y_mishima_miraidenshi>です。 未来電子のプログラミングコースの学習として、自己PRホームページを作成しました。 その際、作成したホームページを公開するまでの手順を忘れないために記録しておこうと思います。プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。 Gitpagesでの公開手順 1.Githubのアカウント登録 Gitpagesで公開するにはGithubのアカウントが必要になります。 まずはアカウントを取得します。 2.WEBページの作成 ローカル環境(自分のPC)で公開するホームページを作成します。 3.新しいレポジトリを作成 自分のGithubのマイページにて、新しいレポジトリを作成します。 画面右上のNew repositoryから作成できます。 レポジトリ名は自由に指定できます。 4.レポジトリをクローンする 作成したレポジトリをローカルにクローンします。 ターミナルにて以下のコードによってクローンし、そこへディレクトリを移動します。 $ git clone git@github.com:username/repositoryname.git usernameには自分Githubアカウントの名前を、repositorynameには先ほど作成したレポジトリの名前を入れます。 5.ファイルのコピー クローンしたファイルに作成したホームページの中身をコピペします。 6.addしてcommitしてpush! 以下のコードを入力して、ファイルをpushします。 $ git add . $ git commit -m “commit” $ git push origin master 7.ソースの設定 作成したレポジトリにてSettinngを開きます。 下の方にあるGithub PagesのSource欄にて、None→master branchに変更します。 変更後しばらく経つと、ホームページが公開されるURLが表示されます。 まとめ 以上、ホームページをGitpagesで公開する手順でした。 今後も成果物を公開する機会を増やせればいいなと思います。
未来電子テクノロジーでインターンをしている<@y_mishima_miraidenshi>です。 未来電子のプログラミングコースの学習として、自己PRホームページを作成しました。 その際、作成したホームページを公開するまでの手順を忘れないために記録しておこうと思います。プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
1.Githubのアカウント登録
Gitpagesで公開するにはGithubのアカウントが必要になります。 まずはアカウントを取得します。
2.WEBページの作成
ローカル環境(自分のPC)で公開するホームページを作成します。
3.新しいレポジトリを作成
自分のGithubのマイページにて、新しいレポジトリを作成します。 画面右上のNew repositoryから作成できます。 レポジトリ名は自由に指定できます。
4.レポジトリをクローンする
作成したレポジトリをローカルにクローンします。 ターミナルにて以下のコードによってクローンし、そこへディレクトリを移動します。 $ git clone git@github.com:username/repositoryname.git
usernameには自分Githubアカウントの名前を、repositorynameには先ほど作成したレポジトリの名前を入れます。
5.ファイルのコピー
クローンしたファイルに作成したホームページの中身をコピペします。
6.addしてcommitしてpush!
以下のコードを入力して、ファイルをpushします。
$ git add . $ git commit -m “commit” $ git push origin master
7.ソースの設定
作成したレポジトリにてSettinngを開きます。
下の方にあるGithub PagesのSource欄にて、None→master branchに変更します。 変更後しばらく経つと、ホームページが公開されるURLが表示されます。
以上、ホームページをGitpagesで公開する手順でした。 今後も成果物を公開する機会を増やせればいいなと思います。
メニューをクリックしたときに、リストが広がって表示されて、もう一度押すとリストがなくなるメニューについて調べた。 それが、アコーディオンメニューと呼ばれるものだと初めて知った。 今回はそれを実装してみた。 ソース アコーディオンメニューの実装方法は、jQueryかCSSの２つ。 CSSで実装してみた。 accordion_practice.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>アコーディオンメニュー 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <div id="accordion"> <input type="checkbox" id="menu" /> <label for="menu">メニュー</label> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </div> </body> </html> base.css #accordion { max-width: 300px; } #accordion #menu { display: none; } #accordion label { display: block; background: #f00; } #accordion ul { margin: 0; padding: 0; list-style: none; } #accordion li { margin: 0; padding: 0; background: #0f0; height: 0; overflow: hidden; transition: 0.5s; } #accordion a { margin: 0; padding: 0; text-decoration: none; } #menu:checked ~ ul li { height: 20px; opacity: 1; } 解説1 label要素、チェックボックス、ul要素を使ってアコーディオンメニューを実装している。 まずは、メニューがリストではなく一つだけで表示されている状態にするのは、以下のコードで実現している。 #accordion li { margin: 0; padding: 0; background: #0f0; height: 0; overflow: hidden; transition: 0.5s; } 重要なポイントは２つあります。 1つ目のポイントは、overflowプロパティを使い、値をhiddenにすることで、リストを非表示している。 ただし、これだけでは不十分だと知った。 heightプロパティでリストの高さを0にしないといけない。 overflowは表示領域からはみ出た部分を非表示にする。 リストの高さを0にすることで、文字は表示領域からはみ出る。 その結果、overflowプロパティのhiddenによってはみ出た部分が非表示になり、クリックしない限り、リストが表示されない。 2つ目のポイントは、transition。 これのおかげで、クリック後のリストが表示されるまでの動作を実現している。 値は、リストが表示されるまでの時間を設定する。 解説2 次に、メニューをクリックしたときの動作についてです。 以下のコードで実現している。 #menu:checked ~ ul li { height: 20px; } 擬似クラスcheckedを使っている。 クリック時、チェックボックスにチェックが入った状態になります。 チェック状態のulのliに対して、高さを設定しています。 こうすることで、リストが表示されるようになります。 おわりに ここまで、読んでくれてありがとうございます。 自分なりに考え、理解して、解説してみました。 ここまで、読んだ上で、自分の解説が間違えているなら、是非指摘してくれると嬉しいです。 次回はjQueryで実装してみようと思います。 参考資料 CSSでアコーディオンメニューを作成する方法【初心者向け】 CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）
メニューをクリックしたときに、リストが広がって表示されて、もう一度押すとリストがなくなるメニューについて調べた。 それが、アコーディオンメニューと呼ばれるものだと初めて知った。 今回はそれを実装してみた。
アコーディオンメニューの実装方法は、jQueryかCSSの２つ。 CSSで実装してみた。
jQuery
CSS
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>アコーディオンメニュー 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <div id="accordion"> <input type="checkbox" id="menu" /> <label for="menu">メニュー</label> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </div> </body> </html>
#accordion { max-width: 300px; } #accordion #menu { display: none; } #accordion label { display: block; background: #f00; } #accordion ul { margin: 0; padding: 0; list-style: none; } #accordion li { margin: 0; padding: 0; background: #0f0; height: 0; overflow: hidden; transition: 0.5s; } #accordion a { margin: 0; padding: 0; text-decoration: none; } #menu:checked ~ ul li { height: 20px; opacity: 1; }
label要素、チェックボックス、ul要素を使ってアコーディオンメニューを実装している。 まずは、メニューがリストではなく一つだけで表示されている状態にするのは、以下のコードで実現している。
label
ul
#accordion li { margin: 0; padding: 0; background: #0f0; height: 0; overflow: hidden; transition: 0.5s; }
重要なポイントは２つあります。
1つ目のポイントは、overflowプロパティを使い、値をhiddenにすることで、リストを非表示している。 ただし、これだけでは不十分だと知った。 heightプロパティでリストの高さを0にしないといけない。 overflowは表示領域からはみ出た部分を非表示にする。 リストの高さを0にすることで、文字は表示領域からはみ出る。 その結果、overflowプロパティのhiddenによってはみ出た部分が非表示になり、クリックしない限り、リストが表示されない。
overflow
hidden
height
2つ目のポイントは、transition。 これのおかげで、クリック後のリストが表示されるまでの動作を実現している。 値は、リストが表示されるまでの時間を設定する。
transition
次に、メニューをクリックしたときの動作についてです。 以下のコードで実現している。
#menu:checked ~ ul li { height: 20px; }
擬似クラスcheckedを使っている。 クリック時、チェックボックスにチェックが入った状態になります。 チェック状態のulのliに対して、高さを設定しています。 こうすることで、リストが表示されるようになります。
checked
li
ここまで、読んでくれてありがとうございます。 自分なりに考え、理解して、解説してみました。 ここまで、読んだ上で、自分の解説が間違えているなら、是非指摘してくれると嬉しいです。 次回はjQueryで実装してみようと思います。
CSSでアコーディオンメニューを作成する方法【初心者向け】 CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）
リセット系CSSを読み込む
