Vue.jsとは JavaScriptのフレームワークの１つで、効率よくフロントエンドの開発が行える。 学習コストが低い。 CDNでjsファイルを読み込むだけで使用することができる。 シンプルにコードを書くことができる。 DOM操作を自動に行う HTMLの要素とJSの値やイベントとの紐付けを自動で行ってくれる。 jQueryよりも容易にコーディングできる。 Hello World! まず、Vue.jsで「Hello World!」を表示してみましょう。 CDNでVueを読み込む <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"> Vueインスタンスの生成 new Vue({}) el: HTML側のid属性との対応づけをする。 data: 表示するデータなどを定義する。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js入門</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { message: "Hello World!" } }); </script> </body> </html> ディレクティブ ディレクティブとは、接頭辞v-が付いたVue.jsに用意された特別な属性のことである。 もっと詳しく言うと、DOM要素に対して何か実行するものをライブラリに伝達する。 Vue.jsではこのディレクティブで始まりディレクティブで終わるとも言うくらい重要な概念となる。 ※以下からソースコードはbody部のみを記載する。 v-bind HTML側のある要素の属性を動的に設定することができる。 index.html <body> <div id="app"> <p v-bind:class="error_class">エラーが発生しました。</p> <!- 省略記法 --> <p :class="error_class">エラーが発生しました。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { error_class: "error" } }); </script> </body> v-on イベントリスナーを定義することで、Vueインスタンスのメソッドを呼び出すことができる。 index.html <body> <div id="app"> <p>{{ now }}</p> <button v-on:click="time">現在時刻を表示</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { now: "00:00:00" }, methods: { time: function() { var date = new Date(); this.now = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); } } }); </script> </body> v-if 条件分岐によって、要素の有無の切り替えができる。 isErrorがtrueならば、エラーが発生しました。が画面に表示される。 isErrorがfalseならば、エラーが発生しました。が画面に表示されない。 index.html <body> <div id="app"> <p v-if="isError">エラーが発生しました。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var error = new Vue({ el: "#app", data: { isError: true } }); </script> </body> v-once Vue.jsによるレンダリング(画面描画)を一度のみ行うようにする。 Vueインスタンスの変数にアクセスするときはthis.変数名と記述する。 index.html <body> <div id="app"> <p v-once>{{ count }}回クリックされました</p> <button v-on:click="counter">カウントボタン</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue ({ el: '#app', data: { count: 0 }, methods: { counter: function(){ this.count++ } } }) </script> </body> v-for 配列であるデータの各要素を制御することができる。 拡張for文のような記法をv-forに記述する。 v-forを使用する場合は、v-bindのkeyプロパティの指定が必須である。 keyを指定しない場合は配列のindexがkey値に使用されるが、key として使用すべきではない。 → 配列内の要素の追加・削除や順序の変更が行われるとき、index値も変化してしまう。 index.html <body> <div id="app"> <button v-on:click="shuffle">シャッフル</button> <ul> <li v-for="prefecture in prefectures" :key="prefecture.id"> {{ prefecture.name }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { prefectures: [ { id:1, name: "福岡県" }, { id:2, name: "佐賀県" }, { id:3, name: "長崎県" }, { id:4, name: "大分県" }, { id:5, name: "熊本県" }, { id:6, name: "宮崎県" }, { id:7, name: "鹿児島県" } ] } }); </script> </body> v-model 入力情報とデータの双方向データバインディングを簡単に行うことができる。 もっと詳しく言うと、テキストボックスの値(value属性値)が変更されると、dataで持っているtextの値に自動的に反映される仕組みがある。 v-modelは属性の初期値を無視するという特徴があるため、dataに初期値を持たせるかカスタムディレクティブで独自に実装する必要がある。 index.html <body> <div id="app"> <p>{{ text }}</p> <input v-model="text"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue ({ el: '#app', data: { text: '' } }) </script> </body> 算出プロパティ 算出プロパティとは、関数で算出したデータを返すことができるプロパティのこと。 conputedをvueインスタンスに記述する。 index.html <body> <div id="app"> {{ fullName }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { firstName: 'Nobi', lastName: 'Nobita' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName } } }) </script> </body> 上記の例はmethodsでも同様なことができる。 index.html <body> <div id="app"> {{ getFullName() }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { firstName: 'Nobi', lastName: 'Nobita' }, methods: { getFullName: function() { return this.firstName + ' ' + this.lastName } } }) </script> </body> conputed VS methods conputed methods 記法(呼び出し) () 不要 () 必要 キャッシュ される されない conputed 引数を伴う処理ができない。 キャッシュ機能あり(=指定されているデータに変化があれば、再実行される) methods 引数を使った処理が可能である。 キャッシュ機能なし(=毎度毎度再実行される) index.html <body> <div id="app"> // conputed <ol> <li>{{ randomNum }}</li> <li>{{ randomNum }}</li> <li>{{ randomNum }}</li> </ol> // methods <ol> <li> {{ getRandomNum() }}</li> <li> {{ getRandomNum() }}</li> <li> {{ getRandomNum() }}</li> </ol> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", computed: { randomNum: function () { console.log("computed"); return Math.random(); } }, methods: { getRandomNum: function () { console.log("methods"); return Math.random(); } } }); </script> </body> computedでは全て同じ値になるが、methodsは全て異なる値となる。 // computed 0.5562891327999486 0.5562891327999486 0.5562891327999486 // methods 0.10127439472454514 0.530424483259178 0.4696634887357811 computedではコンソールログには1度しかログが出ない。(1回しか呼ばれていない) computedはリアクティブデータ(dataオプションに設定されているデータ)が更新されない限り、実行されない！！ 参考 https://jp.vuejs.org/ https://qiita.com/okerra/items/cda378436ed060e83a8c
A列車で行こうはじまる観光計画というゲームには シナリオを作成できるコンストラクションモードというモードがあります このコンストラクションモードで編集できる台詞はHTMLのようなタグの記法で フォントスタイルを変更する事ができます ただし、仕様がHTML5ではなく、どちらかというとHTML4に近い記法でかつ 要素の属性名と属性値のダブルクオテーション不要、更に使えるタグと使えないタグが あったりと独自の記法になっているようです 他にもありそうなので判明次第追記します タグ タグ 効果 備考 <color=#xxxxxx> フォントの色を変更する1 yellowなどカラー名で直接指定可能 <size=xx> フォントのサイズを変更する 単位pxデフォルトは32 <i> フォントをイタリック体に変更する <b> フォントを太字に変更する <u> フォントに下線を付加する <mark> フォントをにハイライトを付加する？ 現在の仕様では背景もフォントも白色で見えない 使い方 <color=yellow>おはようございます</color> <u>あたらしい</u><size=48>街</size>も、はりきって頑張りましょう。 このように<タグ></タグ>で囲むと下記のようにスタイルが変わります 変数 変数 効果 備考 $CEO 代表者名2 コンストラクションモードでのイベントテスト再生では[代表者名]で表記 $CO 会社名2 コンストラクションモードではイベントテスト再生では[会社名]で表記 使い方 $CO代表取締役$CEO このように＄変数名を台詞の中に入れると下記のように置き換わります https://twitter.com/artdink_tw/status/1371704048617852930 ↩ https://twitter.com/artdink_tw/status/1371340412552671236 ↩
【お知らせ】21/05/06 最初この記事はHTMLに近い言語なので Qiitaにチートシートとして載せるべきだと考えていました しかしコメントで指摘がある通り エンジニア向けの記事ではないため 近日中にgithubに移転します ご迷惑をおかけしてすみません 概要 A列車で行こうはじまる観光計画というゲームには シナリオを作成できるコンストラクションモードというモードがあります このコンストラクションモードで編集できる台詞はHTMLのようなタグの記法で フォントスタイルを変更する事ができます ただし、仕様がHTML5ではなく、どちらかというとHTML4に近い記法でかつ 要素の属性名と属性値のダブルクオテーション不要、更に使えるタグと使えないタグが あったりと独自の記法になっているようです これらのタグ・変数は公表されてない物が他にもありそうなので判明次第追記します タグ タグ 効果 備考 <color=#xxxxxx> フォントの色を変更する1 yellowなどカラー名で直接指定可能 <size=xx> フォントのサイズを変更する 単位pxデフォルトは32 <i> フォントをイタリック体に変更する <b> フォントを太字に変更する <u> フォントに下線を付加する <mark> フォントをにハイライトを付加する？ 現在の仕様では背景もフォントも白色で見えない 使い方 <color=yellow>おはようございます</color> <u>あたらしい</u><size=48>街</size>も、はりきって頑張りましょう。 このように<タグ></タグ>で囲むと下記のようにスタイルが変わります 変数 変数 効果 備考 $CEO 代表者名2 コンストラクションモードでのイベントテスト再生では[代表者名]で表記 $CO 会社名2 コンストラクションモードではイベントテスト再生では[会社名]で表記 使い方 $CO代表取締役$CEO このように＄変数名を台詞の中に入れると下記のように置き換わります https://twitter.com/artdink_tw/status/1371704048617852930 ↩ https://twitter.com/artdink_tw/status/1371340412552671236 ↩
はじめに フロントエンド強化月間の参加記事です。 概要 画像をたくさん使用するWebサイトでは画面の読込に時間がかかってしまうというパフォーマンスの課題を常に抱えています。 その課題の簡単な解消方法として「Lazy Loading」があります。 Lazy Loading とは Lazy Loading（遅延読込）はリソースを事前に読み込むのではなく、必要になった時にリソースを読み込む手法のことです。 要は、画像を表示するタイミングになった時に初めて画像を読み込みます。 Lazy Loading の効果 通常の画面読込ではブラウザの表示領域外の画像も事前に読み込んでいます。 これでは画面が表示されるまで時間がかかります。 Lazy Loading ではブラウザの表示領域外にある画像（破線の部分）を読み込まないことで画面の表示速度を向上させることができます。 実装 では、実際に実装してみましょう。 1. lazysizes.min.jsをダウンロードする lazysizes をGitHubから取得します。 2021/05現在の最新バージョンは5.3.1です。 2. lazysizes.min.jsをscriptタグで読み込む bodyの閉じタグの直前辺りでlazysizes.min.jsを読み込みます。 index.html <script src="lazysizes.min.js" async></script> </body> 3. imgタグのclass属性に"lazyload"を指定する class="lazyload" とすることで、lazysizes.min.jsに遅延読込の対象であると判断させます。 index.html <img class="lazyload" src="image.jpg"> 4. imgタグのsrc属性をdata-src属性に変更する data-src="image.jpg" とすると、画像が表示領域に差し掛かったタイミングでlazysizes.min.jsが画像を読み込みます。 index.html <img class="lazyload" data-src="image.jpg"> 以上でLazy Loading（遅延読込）の実装は完了です。 検証 Lazy Loadingによってどれくらいの変化があるか検証してみます。 検証方法 Lazy Loadingを(a)実装していないページと(b)実装しているページの2種類を用意し、 キャッシュを利用しないでページを読み込んだ際の読込完了時間の差異を計測します。 両方のページでは15枚ほど画像を読み込みます。 実装内容 index.html <body> <div> <img class="lazyload" data-src="img-001.jpg"> </div> <div> <img class="lazyload" data-src="img-002.jpg"> </div> <div> <img class="lazyload" data-src="img-003.jpg"> </div> <!-- 省略 --> <div> <img class="lazyload" data-src="img-013.jpg"> </div> <div> <img class="lazyload" data-src="img-014.jpg"> </div> <div> <img class="lazyload" data-src="img-015.jpg"> </div> <script src="lazysizes.min.js" async></script> </body> 検証結果 (a)実装していないページ すべて読み込み終えるのに1.47秒かかっています。 15枚近くある画像をすべて読み込んでいるせいか17回もリクエストが発生しており、6.1MBのリソースを取得しています。 LightHouseのスコア判定でも「Avoid enormous network payloads」が警告として現れています。 (b)実装しているページ すべて読み込み終えるのに0.584秒かかっています。 表示領域内の4つの画像のみを取得しているため、リソースが1.2MBに抑えられています。 ブラウザをスクロールして画像が表示領域に差し掛かった時、残りの画像が随時読み込まれます。 LightHouseのスコア判定でも「Avoid enormous network payloads」が現れていません。 つまり、パフォーマンスが改善していることがわかります。 結果 Lazy Loading は比較的、簡単に実装・導入できる上、画像をたくさん利用するWebサイトにおいてはパフォーマンスが改善されることが見込めます。 参考
Animationを使ってbuttonにアニメーションをつけてみる 目標：Animationと@keyframesの基礎を理解するため テキストエディターはVSCode. ↓下記の方のtransitionの説明を参考にしました @7968様 とても解りやすかったです！！ 今回はcodePenで書いてみました♪ ※head部分は省略 See the Pen oNZvJQG by トモゑ☛Web作成の37? (@swan2pink) on CodePen. 詳しくcodeを書いてみます .button { color: white; width: 200px; height: 80px; background-color: pink; font-size: 30px; border-radius: 5px/5px; text-align: center; line-height: 80px; box-shadow: 5px 5px 5px black; } .button:hover { animation-name: buttons; ※ animation-duration: 1s; ※ animation-iteration-count: 3; ※ } @keyframes buttons { 0%{ width: 200px; } 100%{ width: 20%; background-color: blue; } } Animation と@keyframes を使ってアニメーションしてみました また、カーソルを hoverした時にアニメーションしてほしかったので、 hoverに animation設定をしました。 animation-iteration-count: 3 カウントを３回にしましたが無限に繰り返したい時は、３をinfinite に変更してあげます まとめ 今回は、Animation と@keyframes の基本について書いてみました。 引き続き応用にもチャレンジしていきたいと思います 今回は以上です！ ありがとうございます
オンラインブックマークサービス RainDrop を用いてブックマーク管理をしていますが、一部をQiitaで紹介させてもらいます。 目を肥やすという意味でデザイン系のギャラリーサイトは沢山ストックしておいたほうが良いので参考になれば嬉しいです。 特に解説等はいたしませんのでOGPの説明や遷移先のサイトで把握してください。 リストアップに集中しすぎて、つい脱線してフロントエンド系やディレクション支援系も載せましたが、他にもこんなのがあるよと共有してくださる奇特な方がいらっしゃいましたらコメントいただけると幸甚です。 ※本リストは適宜追加/更新予定です デザイン系 ギャラリー デザイン全般 スマホ特化 その他、LP、パーツ UI ロゴ 素材 写真 イラスト アイコン その他 アニメーション ツール フロントエンド系 ツール https://9elements.github.io/fancy-border-radius/#30.30.77.20--. ディレクション支援系 参考にさせていただいた記事 https://note.com/taqno/n/n27882b7ab9e4#BZjay
要素を中央に持ってくるやり方を毎回忘れるのでまとめてみました。 他にもやり方があるかもしれませんので、気づいた方おりましたら コメント頂けますと幸いです。 ①文字列の高さを中央にする index.html <style> .container { height: 100px; position: relative; box-sizing: border-box; border: 5px solid #76d3f4; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); margin: 20px 0px; } .char_heigth-center { /*文字要素の高さを整える*/ line-height: 100px; } </style> <div class="container"> <p class="char_heigth-center">文字の高さを中央に</p> </div> 結果 ②文字の横幅を中央にする text-align:center;でも可能だが、改行して複数行になると 両方中央寄せになるのうで使い分けが必要 index.html <style> .container { ・・・ } .char_width-center { display: flex; justify-content: center; } </style> <div class="container"> <p class="char_width-center">文字の横の配置を中央に</p> </div> 結果 ③連続した文字要素を中央に配置（縦と横を中央に） index.html <style> .container { ・・・ } .char_heigth-center { line-height: 100px; } .char_width-center { display: flex; justify-content: center; } .disflex { display: flex; } .items { margin-right: 10px; } </style> <div class="container"> <div class="disflex char_heigth-center char_width-center"> <p class="items">文字列1</p> <p class="items">文字列2</p> <p class="items">文字列3</p> </div> </div> 結果 ④文字列以外の配置を中央にする 画像のように中の文字列は中央に配置されないので注意 index.html <style> .container { ・・・ } .element-center { width: 60%; height: 60%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 5px solid #ff0000; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); } </style> <div class="container"> <div class="element-center">テスト</div> </div> 追記：以下の構文でも可能みたいです。 .element-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } または親要素に .element-align { display: flex; justify-content: center; align-items: center; } ※position は要素ごとにを中央配置できるが、 flexは親要素の中身全てが中央配置になるため、使い分けは必要です。 追記２：右下に配置する場合は以下のようにする .element-right-bottom{ position: absolute; right: 0; bottom: 0; } 結果
急な事態ですね コロナなどいろいろと急な事態なので、HTML、CSS等を学んでいきましょう。Qitaの投稿の練習も兼ねています。 開発環境の準備 まず、開発環境を準備します。実際の運用については次号で。 ダウンロード（1） 今回は簡単な内容ですのでテキストエディタでも充分なのですが、今回はVisual Studio CODEを利用します。普段使用しているVisual Studioとはちょっと違いますのでご注意ください。 上記リンク先よOSに応じたソフトをダウンロードし、インストールなどしてください。 ソフトの起動と日本語化 Visual Studio CODEを起動します。 おっと、英語メニューですね。 ここで逃げ出したい気持ちはよく分かるのですが、Visual Studio CODEはちょっとひと手間加えると日本語化できるらしいっす。 Visual Studio CODEの日本語化 アプリケーションウィンドウの右下、歯車のアイコンをクリックします。 その中にExtensions（機能拡張の意味）が表示されるのでクリックします 左上にExtensionの検索フィールドが出ますのでlanguageと入力してください Japanese Language Packが候補に出てきますので、そこのInstallボタンを押します Restart（再起動）するか右下のウィンドウで聞いてきますので、Restartをクリックします。 ソフトが再起動され、日本語化されました ダウンロード（2） XAMPPの準備 実行環境用として、XAMPPをダウンロード＆インストールします。 XAMPPは車校みたいなもの 車校（東海地区では自動車学校のことをこう呼ぶ）では、まず敷地内で運転の練習をしてから路上教習に出ますよね。XAMPPはその車校みたいなもんです。 いきなりサイトを公開するんじゃなくてXAMPPの中でテストしてから本番サーバで公開という流れをとったりします。なので、XAMPPはみなさんのパソコンの中（ローカル）にサーバを作ってテストする環境を作るツールです。（ローカルサーバって言ったりします） XAMPPダウンロード＆インストール Windows環境が無いので、こちらを参考にインストールしてください。（外部サイトが立ち上がります） 余談 余談ですけどHTML、CSS、JavasScriptのテストであればXAMPPは無くてもいいかもしれません。パソコン内のブラウザ（Chromeとか）でテストできます。 XAMPPを入れるのは、サーバが必用なPHPやSQLをいじってみたいからですね。ゲームのスコアのとか、ランキングとか記録してみたいですよね。 ここまでインストールしたら、次のステップにすすみます。
どうも7noteです。Twitterのログイン画面(PCブラウザ)がホラーで話題なので、バグでなくデザインであることを調査してみた。 結論から話しますと、 「バグではありません。そういうデザインみたいです。」 バグなのか？と話題になっている情報のまとめサイト↓ なんの事？という方もおられると思うので、ツイッターのログイン画面（PC ブラウザ）をおみせしますね。 以下のリンクからも確認することができます。（ログアウトがめんどくさい方はシークレットモードでみれますよ。） （Twitterのログイン画面の画像↓） PCのブラウザからtwitterにログインしようとするとこの画面がでてきます。正直、 「えっ、バグ？」 「偽サイト？」 「なんかまずいことした？」 って私も最初は思ってしまいました。 偽サイトでない理由 ドメインをみていただければわかると思いますが、ちゃんと【twitter.com】になっているので、公式サイトにアクセスしていることがわかります。 もし偽サイトであれば、たとえば「https://twitter.xxx.ga/」（適当）など若干の不自然感がある場合が多いです。 ただ巧妙に作られていることが多いのでなかなかわかりにくいのが現状だと思います。.comや.jpは誰でも利用できますし、SSL化している詐欺サイトなんかもあるので一概に安全といいきるにはなかなか難しいかもしれません。 バグではない理由 では実際に調査した様子を掲載しますね。 これはGoogleChromeの検証ツールというもので、これを使って調査していきます。 簡単に言えばwebサイトの構造を表示して調査したり検証したりすすのに使うものです。 これを使って、背景のバグっているように見えるところにフォーカスしていくと1つの画像を発見しました。 ここに以下のような記述があります。 <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url("https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png");"></div> imgタグをつかっている箇所もありますが、実際に表示されているのはその上にあるこのdiv要素です。 ここに「background-image:ほげほげ〜」と書かれているURLがあるのですが、これがバグっているように見える画像を表示するコードです。 表示されている画像だけを別タブで開いて確認できます。（※クリックしても安全です） https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png （Twitterのログイン画面に使われている画像↓） このdiv要素を検証ツール上で消すと、とてもシンプルな背景に戻りました。 このソースがあのバグったように見える背景を表示しているのは間違いなさそうですね。 まとめ << 結論 >> 「バグではなくそういうデザイン。偽サイトでもない。ただ画像を表示しているだけ。」 なんでTwitterがあんなにホラーなデザインを採用しているのかは不明ですが、困惑しているユーザーが多いのは間違いなさそうですね。 セキュリティ周りに関してはあまり深い知識をもっていないので、偽サイトの見分け方などはネットにある情報から参考にまとめて書いているだけですのでご了承ください。 興味本位で調査してみましたがdivとimgの両方で画像情報をもっているのは不思議ですね。 divのbackgroundで指定しているのであれば、すぐ下のimg要素は必要ないのでは？と思うのですが、なんで設置しているのかなどまた違った部分に興味がわいてきました。 普段はHTMLやCSSをはじめとしたweb周りの情報発信をしています。 よければご覧ください。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
セレクトタグにplaceholder属性をつけてもうまく表示されないし、どうしたものかと思っていましたが、良い方法がありました。 結論これでいけます⬇ <select> <option value="" disabled selected style="display:none;">選択してください</option> <option>りんご</option> <option>バナナ</option> <option>マンゴー</option> <option>ドリアン</option> </select> セレクトタグにプレースホルダーを設置したいなんてかなり需要ありそうなのにplaceholder属性使えないんですね。 結構トリッキーな方法のように感じますがこの方法でできます。
■ line - height とは 行の高さを指定するプロパティを指します。 簡単に説明をすると文字の大きさは変わりません。 ですが、ノートで言うA行のノートからB行のノートに変わったと思ってもらえればいいと思います。 こちらがイメージ図です⬇️ ■ 記述の仕方 line-height: 20px, ■ おまけ 上下中央揃えにしたいときは line-height を使う事もできます！ 投稿は以上です！
