投稿日：2019-08-11T23:35:33+09:00

create-nuxt-appで静的サイトを作るためにセットアップしたこと

やりたいこと

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の記事を書いてみました。今後も無理をせずに自分にとって有益な情報を発信していきたいとおもっとりゃす。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T22:01:26+09:00

datalistの送信される値をselectboxと同じ、非表示のvalue値を送りたい時(Jquery)

datalistのメリット

datalistのいい点は、selectと違いlabelをつけられることと、検索機能がついてることだと思います。検索機能がついていると、候補が多いときにユーザーの使いやすさが増します。

selectのメリット

selectにもいい点があります。それは、value値が表示されず、で挟んだ値を表示してくれることです。
<select name="sample">
    <option value="1">apple</option>
    <option value="2">lemon</option>
    <option value="3">banana</option>
</select>

<input type="hidden" class="data-list-data">
<button type="submit">送信</button>
表示されているのは「apple、lemon、banana」だけど、送られる値は「1、2、3」のどれかですね。実際にselectboxなどを使ったときに送信したい値は、appleより1のほうが送信したいことが多いと思います。

datalistのデメリット

datalistは表示される値、つまり今回だと「apple、lemon、banana」のどれかの選択された値が送信されます。これでいい場合もありますが、selectboxのような挙動を期待している人には、あまりよくないですね。

datalistをselectboxと同じような非表示のvalueを送る方法
<body>
    <form method="get" action="{{route('sample')}}">
        <input type="search" autocomplete="on" list="list" class="suggest-fruit-list">
        <datalist id="list">
            <option value="apple" label="りんご" data-hidden-value="1">
            <option value="lemon" label="れもん" data-hidden-value="2">
            <option value="banana" label="ばなな" data-hidden-value="3">
        </datalist>

        <input type="hidden" name="sample" class="data-list-data">
        <button type="submit">送信</button>
    </form>

    <script>
        $(function () {
            $('.suggest-fruit-list').on('change', function () {
                console.log($(this).val()); //value値
                console.log($("#list option[value='" + $(this).val() + "']").data('hidden-value'));//カスタムデータ(hidden)
                console.log($("#list option[value='" + $(this).val() + "']").prop('label')) //label値

                 $('.data-list-data').val(送信したい値をここに入れる);
            });
        });
    </script>
</body>   
それぞれに、カスタムデータ属性を設定して、jquery/jsでhiddenに値をセットしています。datalistのほうのnameは設定しなくてもいいと思います。本当に送りたいnameとvalueのペアをhiddenで補う感じです。valueはlabelでも、実際のvalue、カスタムデータ属性使いたいものに合わせる感じです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T21:45:19+09:00

offsetについて

まずcolはColumnの略である。

このcolは12までしかないイメージをもつ。

次にoffsetについて。
結論からいうとこれは左側部分に隙間をつくるものと覚えるといい。
例えば

offset-1と入力するとcolの12個のうち1colだけのスペースがあく。

実際のプログラムを使うと、

<div class="row cal-10 offset-1"

このプログラムの意味はoffsetの左側を1col分だけとる。そうすると11col残る。
プログラムはcol-10と書かれているので11colのうち10colを使う。

すると両端が1colずつ削れる。

このようにしてoffsetを用いることで中央にもってくることができる。

表示例

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T17:48:44+09:00

javascriptを一行使用するだけで、プルダウンメニューで選択した瞬間に画面遷移

プルダウンメニューから選択した瞬間に画面を移動する機能の実装に躓いたのでメモします。
以下のソースをhtmlファイルに記述します。
<select onChange="location.href=value;">
    <option class="selected">並び替え</option>
    <option value="URL1">新しい順</option>
    <option value="URL2">参考になった順</option>
</select>
以下の写真のようにブラウザに表示されます。

これで、新しい順を選択するとURL1、参考になった順を押すとURL2に遷移するようになります。 onChange="location.href=value;"の一文をselectタグに追加するだけで機能するので便利だと感じました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T17:31:52+09:00

<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>
結果

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T16:46:59+09:00

作成したホームページをGitpagesで公開してみた

未来電子テクノロジーでインターンをしている<@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で公開する手順でした。
今後も成果物を公開する機会を増やせればいいなと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-11T00:08:04+09:00

アコーディオンメニューをやってみた

メニューをクリックしたときに、リストが広がって表示されて、もう一度押すとリストがなくなるメニューについて調べた。
それが、アコーディオンメニューと呼ばれるものだと初めて知った。
今回はそれを実装してみた。

ソース

アコーディオンメニューの実装方法は、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だけでアコーディオンを作る方法（レスポンシブ＆矢印付）

　 Tweet
Qiitaで続きを読む

20190811のHTMLに関する記事は7件です。

create-nuxt-appで静的サイトを作るためにセットアップしたこと

やりたいこと

リセット系CSSを読み込む

共通SCSSを読み込む（フォントなどの指定）

パッケージのインストール

`nuxt.config.js`の`css`に追記

共通scss変数を読み込む

インストール

`nuxt.config.js`の`module`に追記

`nuxt.config.js`に`styleResources`を追記

こまってること[WIP]

おわりに

datalistの送信される値をselectboxと同じ、非表示のvalue値を送りたい時(Jquery)

datalistのメリット

selectのメリット

datalistのデメリット

datalistをselectboxと同じような非表示のvalueを送る方法

offsetについて

javascriptを一行使用するだけで、プルダウンメニューで選択した瞬間に画面遷移

<button>のデフォルトのうざい変なグレイのデザインを消し去る方法

buttonの変なグレイの正体

消す方法

例

結果

作成したホームページをGitpagesで公開してみた

Gitpagesでの公開手順

まとめ

アコーディオンメニューをやってみた

ソース

解説1

解説2

おわりに

参考資料

日付別

タグ一覧

20190811のHTMLに関する記事は7件です。

create-nuxt-appで静的サイトを作るためにセットアップしたこと

やりたいこと

リセット系CSSを読み込む

共通SCSSを読み込む（フォントなどの指定）

パッケージのインストール

nuxt.config.jsのcssに追記

共通scss変数を読み込む

インストール

nuxt.config.jsのmoduleに追記

nuxt.config.jsにstyleResourcesを追記

こまってること[WIP]

おわりに

datalistの送信される値をselectboxと同じ、非表示のvalue値を送りたい時(Jquery)

datalistのメリット

selectのメリット

datalistのデメリット

datalistをselectboxと同じような非表示のvalueを送る方法

offsetについて

javascriptを一行使用するだけで、プルダウンメニューで選択した瞬間に画面遷移

<button>のデフォルトのうざい変なグレイのデザインを消し去る方法

buttonの変なグレイの正体

消す方法

例

結果

作成したホームページをGitpagesで公開してみた

Gitpagesでの公開手順

まとめ

アコーディオンメニューをやってみた

ソース

解説1

解説2

おわりに

参考資料

日付別

タグ一覧

`nuxt.config.js`の`css`に追記

`nuxt.config.js`の`module`に追記

`nuxt.config.js`に`styleResources`を追記