やりたいこと Vuetify でディープセレクタを使う v-select の余分な空白を削除する サンプル sample.vue <template> <v-select class="select-input-none" /> </template> <style scoped> .select-input-none >>> .v-select__selections input { width: 0; } </style> ディープセレクタとは 公式の説明を見ても、Webアプリ開発初心者の私としてはちんぷんかんぷん 親から子のスタイルを上書きするのは何となく理解できるけども... ネットで調べながら半日以上かかって、やっと理解できた。 覚え方 親コンポーネントに適用するスタイル名 >>> 上書きしたい子タグのスタイル名 名前をこんな感じにしてCSSを設定すると、後半で指定したスタイルを上書きでるよう。 サンプルで言うと「select-input-noneを適用したコンポーネント以下のタグ」で 「v-select__selectionsが適用されたタグの子のinputタグのスタイル」を上書きするイメージ。 Scss Scss を使うとこんな感じ (2021/05/08 追記) sample_scss.vue <template> <v-select /> </template> <style lang="scss" scoped> ::v-deep .v-select__selections { input { display: none; } } </style> （親コンポーネントのクラス指定をしなくてもいけた） v-select の余分な空白 数字1文字だけ表示して詰めたいのに、デフォルトだと謎の空白がある... ネットで調べると、英語のサイト がヒット！ .v-select__selections input { display: none } これを設定するといいらしい。 ただ、実際に 設定しまうと、キーボードの上下入力ができなくなる。 なので、display: noneではなくwidth: 0を設定するのが吉。（って書いてある） やったね
どうも、7noteです。CSSのみで、角のない矢印(>)の角が丸い矢印をつくります 矢印をアイコン画像などで作ってもいいのですが、cssを使って角丸にします。 このタイプの矢印(>)のよくある作り方としては正方形の2辺をborderで作り、45度回転させるのが多いのかなと思います。 ですがこの方法では角がかくばってしまいます。 なので違う方法を使って角の丸い矢印(>)を作っていきます。 cssで角の丸い矢印(>)の作り方 index.html <div class="arrow"></div> style.css .arrow { width: 200px; /* 適当な箱を作るための幅 */ height: 80px; /* 適当な箱を作るための高さ */ border: 1px solid #000; /* わかりやすいように線を引く */ position: relative; /* 基準位置とする */ } .arrow::before, .arrow::after { content: ""; /* 疑似要素に指定必須 */ width: 20px; /* 線の長さを指定 */ height: 3px; /* 線の幅を指定 */ display: inline-block; /* インラインブロックにする */ border-radius: 2px; /* 線を角丸にする */ background: #aaa; /* 線の色を指定 */ position: absolute; /* 相対位置に指定 */ right: 10px; /* 右から10pxの位置に配置 */ } .arrow::before { top: calc(50% - 8px); /* 数値は微調整してください */ transform: rotate(45deg); /* 45度回転させる */ } .arrow::after { bottom: calc(50% - 8px); /* 数値は微調整してください */ transform: rotate(-45deg); /* -45度回転させる */ } 解説 擬似要素のbeforeとafterの両方を使って作ります。 イメージとしては、二本の細長い棒を角丸にしてそれぞれ回転させて配置し、矢印の形にしています。 topとbottomのcalcの値を調整してきれいに重なる箇所を探してください。 まとめ もちろんCSSを使わずに画像にすれば角丸の矢印は簡単に作成できます。 もしくはアイコンフォントで作成する方法もあります。 さらにはSVGを使った方法なんかもあります。 ・アイコンフォント → https://ionicons.com/ 画像と比べると読み込み速度や、管理の面でいうとCSSでかけた方がメリットが大きいのでこの書き方も覚えておいて損はないと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
数当てゲームを改良して、正解、不正解でブラウザ上に表示する文言を変えました <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>数当てゲーム</title> <style> h1 { color:plum; font-size:100px; } h2 { color:#4f7911; font-size:50px; } body { background-color:whitesmoke; } </style> </head> <body id = "test"> <header> <div class="container"> <h1>数当てゲーム</h1> <h2>数を当ててみよう</h2> </div><!-- /.container --> </header> <main> <div class="container"> <section> </section> </div><!-- /.container --> </main> <footer> <div class="container"> </div><!-- /.container --> </footer> <script> 'use strict'; let message; let count = 1; let flag = 0; //乱数を発生させる。0~49まで数字がランダムに表示されるので1を足す。 const number = Math.floor(Math.random() * 50) + 1; //数当てゲームは5回挑戦できるようにする。 while (count <=5){ const answer = parseInt(window.prompt('数当てゲーム。1〜50の数字を入力してね。5回まで挑戦できます')); window.alert(count + "回目です。") //正解、数が小さい、数が大きい、1から50以外の数字が入った時の条件式 if(answer === number) { message = 'あたり！'; window.prompt(count + "回目で正解しました。おめでとうございます!"); document.querySelector("h1").innerHTML = "<h1>数当てゲーム、正解です!</h1>"; document.querySelector("h2").innerHTML = "<h2>おめでとうございます！</h2>"; flag = 1; break; } else if((answer < number) && (answer >= 1)) { message = '残念でした！もっと大きい'; } else if((answer > number) && (answer <=50)) { message = '残念でした！もっと小さい'; } else { message = '1〜50の数字を入力してね。'; } //入力した数字に応じてメッセージを出力する。 window.alert(message); // count = count + 1; } //3回挑戦して不正解だったら正解をアラートで表示し、HTMLに表示するメッセージを変更する。 if (flag === 0){ window.alert("正解は" + number + "です"); document.querySelector("h1").innerHTML = "<h1>残念でした!</h1>"; document.querySelector("h2").innerHTML = "<h2>また挑戦してください！</h2>"; } </script> </body> </html>
./src/App.js import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <h1>Hello React!</h1> </div> ); } export default App; ./src/App.css .App { display: flex; align-items: center; justify-content: center; background-color: #e8d3d1; height: 100vh; }
保存用 floatをつかって、別々の要素を左に寄せて、かつ寄せた要素の中の文字を中央寄せ 下記で最初は問題なかったが、アニメーションをｊｓで加えた瞬間効かなくなり、要素が改行された。 disply: flex; align-items: center; floatを使用し同じ段落へ持ってこようとしたが、disply: flexが打ち消され今度は中央揃えができなくなった。 float: left; disply: flex; align-items: center; そこでググり、line-heightを使うことで、無事、要素を左寄せし、縦に中央寄せできた。(heightとline-heightのピクセル数は一緒) float: left; height: 〇〇px; line-height: 〇〇px;
はじめに ProgateでHTML＆CSSコースを受講しました。 勉強ついでに、学習したことを備忘録としてまとめようと思います。 環境 OS：macOS エディタ：VSCode ブラウザ：Google Chrome 受講コース：HTML & CSS 初級編 1 本コース中に使用したHTMLのタグとCSSのプロパティ コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。 ここに記述した以外の使い方ができるタグもあります。 各要素のより詳細な使い方については、MDNで調べると良いみたいです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element HTMLで使用したタグ タグ（要素） 使用用途 h1〜h6 見出しの要素h1が一番大きな見出しで、h6が一番小さな見出しになる p 段落の要素見出し以外のテキストを囲むときに用いる a リンクを作成する要素href属性でリンク先を指定する(href="URL") img 画像を表示させる要素src属性で画像のリンクを指定する(src="URL") li リストを作成する要素囲む要素によって種類が変わる ul liを囲むと、リストの先頭が黒点になる ol liを囲むと、リストの先頭が数字の連番になる html "このファイルはHTMLです"という宣言 head Webページに関する情報を記述する body Webページに表示させる内容を記述する meta 文字コードなど、他のタグでは指定できない内容を指定する title 文章のタイトルを決める要素ブラウザのタブに表示されるページタイトルになる link 外部ファイルへのリンク要素CSSを適用させるファイルの定義やサイトのアイコンを指定する div コンテンツを分割する要素CSSを適用させるために、内容を分割する span 文中の一部分のみCSSを適用させる要素 input １行のテキスト入力を受け取る要素type属性の値で様々な動作になり、value属性の値でボタンに表示されるテキストを指定する textarea 複数行のテキスト入力を受け取る要素 CSSで使用したプロパティ プロパティ 使用用途 color 文字の色を変える16進数のカラーコードで色を指定する font-size 文字の大きさを変えるpxという単位を用いて、大きさを指定する font-family 文字のフォントを変えるフォント名にスペースが含まれている場合、フォント名をダブルクォーテーションで囲む必要がある background-color 背景色を変える色の指定方法はcolorと同じ width 要素の横幅を変える大きさはpxで指定する height 要素の高さを変える大きさはpxで指定する list-style listのスタイルを変えるリストの先頭のスタイルを指定できる float 要素の並び方を変えるleftを指定すると左から順に横並びになり、rightを指定すると右から順に横並びになる border 要素に枠線を付ける太さ(px)、種類、色を指定する特定の方向にのみつけたい場合は、「border-方向」のように指定する padding 要素のborderの内側に余白を作る方向を指定して余白を作ることもできる margin 要素のborderの外側に余白を作る記述方法はmarginと同様 2 HTMLの全体構造について ・実際のHTMLファイルには、決められた型を書いていく必要がある。 ・html要素の中にhead要素とbody要素が必要。headとbodyは文書中に一つだけ配置する。 ・head要素の中では、以下のような項目について設定を記述する。 ①文字コード：文字コードを指定することで、ページの文字化けを防ぐことができる。 ②ページタイトル：ページのタイトルを指定する。指定されたタイトルは、ブラウザのタブ上に現れる。 ③CSSの読み込み：href属性で読み込むCSSファイル名を指定する。（今回はstylesheet.cssを読み込む） HTMLの型 <!DOCTYPE html> //DOCTYPE宣言と呼ばれ、HTMLのバージョンを宣言する。 <html> <head> //Webページの設定に関する情報を記述する。ここに記述した内容は、Webページには表示されない。 <meta charset="utf-8"> //文字コードの指定 <title>サンプルページ</title> //ページのタイトルの指定 <link rel="stylesheet" href="stylesheet.css"> //CSSを読み込むための宣言 </head> <body> //Webページに表示させる内容を記述する。 </body> </html> 3 ボックスモデルについて HTMLでは、全ての要素がボックスと呼ばれる領域を持っている。 ボックスは下図のように4つの領域から成り、各領域の名称とその大きさを指定するプロパティは以下の表のようになっている。 領域名 プロパティ content テキストや画像などの内容を表示する領域width、heightで大きさを指定する padding 枠線の内側の領域paddingプロパティで大きさを指定する border ボックスの枠線borderプロパティで大きさ、種類、色を指定する margin 枠線の外側の領域marginプロパティで大きさを指定する 4 その他の学びや注意点について ・コメントアウトのやり方 HTMLの場合： <!-- -->で囲む CSSの場合： /* */で囲む ・エディタでコメントアウトするショートカットキーは、「command」+「/」。 ・入れ子構造要素がある場合には、インデント（字下げ）して親子関係を分かり易くする。 インデントするには、行先頭でtabキーを押す。 ・CSSのプロパティの末尾にはコロン(:)、行末にはセミコロン(;)をつける必要がある。 ・同じ要素名のうち、ある特定の要素にのみCSSを適用したい場合は、classで要素に名前をつける。 class名でCSSを指定する場合、先頭にドット「.」が必要となる。 ・タイプミスを防ぐために、補完機能を使うと良い。タグ名を入力しtabキーを押すと、終了タグまで補完してくれる。 （VSCodeには補完機能が備わっているため、tabを押さなくても良い）←すごく便利 ・paddingによる余白の指定方法(marginも同様) ① 全方向に均一に余白を作りたい padding: ○○px; ② ある特定の方向に余白を作りたい padding-top: ○○px; （下部はpadding-bottom、右部はpadding-right、左部はpadding-leftを用いる） ③ 上下には○○px、左右には□□pxの余白を作りたい padding: ○○px □□px; ④ ４方向各々に異なる余白を作りたい padding: ○○px □□px △△px ☆☆px; （上部○○px、右部□□px、下部△△px、左部☆☆pxの余白が作れる） 最後に 続いて、中級編を学習していきます。 内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。
初めに cssのclip-pathを使うと画像を切り取ることが出来ますので、関連記事を参考に理解した内容を纏めてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 clip-pathとは cssで要素にcliping領域を作って、表示したい部分（切り取りたいところ）を指定することが出来るプロパティ。 clipプロパティのupgradeバージョン。 clipとの違い clipは適用する要素の位置がposition:absoluteまたはposition:fixedでなければなりません。また、切り抜きができる形は四角のみになります。MDNの公式ドキュメントには可能であればclip-pathを使うようにとされています。 clipの構文 clip: rect(上から離れた距離, 右へ, 下へ, 左から離れた距離); ①html <section class="clip_section"> <div class="clip_path_main"> <img id="clip" style="width:100px;" src="image.jpg"> </div> </section> ②css #clip { position: absolute; top: 100px; left: 200px; height: 100px; clip: rect(50px, 90px, 90px, 40px); } ③結果 青い四角の領域で上から50px,左から50px離れたところを起点にして、左から右へ向けて90pxまで、上から下に向けて90pxまで表示されています。ちょっと使いづらいイメージでした。 clip-path clipのupgradeバージョン。こちらはpositionの指定も必要なく、円形、楕円形、多角形まで様々な形をcliping出来ます。基本的によく使われるものをclip-pathを使って表示してみました。 inset 四角い形で要素を切り抜くことが出来ます。構文はmarginやpaddingの指定の仕方と同じです。 clip-path: inset(上下 左右); clip-path: inset(上 下 左 右); ①html <section class="clip_path_section"> <div class="clip_path_main"> <img id="clip_inset" style="width:100px;" src="image.jpg"> </div> </section> ②css #clip_inset { clip-path: inset(10px 20px 5px 8px); } ③結果 circle 円形で要素を切り抜きます。やり方は半径を指定し、円の中心点を左からx,上からyで指定します。 clip-path: circle(半径 at X座標 Y座標); ①html <section class="clip_path_section"> <div class="clip_path_main"> <img id="clip_circle" style="width:100px;" src="image.jpg"> </div> </section> ②css #clip_circle { clip-path: circle(30% at 50% 50%); } ③結果 polygon 多角形で要素を切り抜きます。左からx座標と上からy座標を指定して多角形の角を決めます。例えば、３角形の場合それぞれのx,y座標の角を３セット用意します。 clip-path: polygon(第一X 第一Y, 第二X 第二Y, ...) ①html <section class="clip_path_section"> <div class="clip_path_main"> <img id="clip_polygon" style="width:100px;" src="image.jpg"> </div> </section> ②css #clip_polygon { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } ③結果 clip-pathジェネレーター clip-pathを生成するにはcssで実際にコードを書く方法以外に、作りたい形のclipを目で確かめながらコードを生成してくれるclip-pathジェネレーターがあります。作りたい形を選んでマウスでノードを動かすだけなのでとても簡単です。 https://bennettfeely.com/clippy/ https://www.uplabs.com/posts/clip-path-generator 参考記事・サイト https://developer.mozilla.org/ja/docs/Web/CSS/clip https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html https://developer.mozilla.org/ja/docs/Web/CSS/clip-path https://www.webdesignleaves.com/pr/css/css_clip_path.html
デザインなどでFontAwesomeのアイコンを重ねて表示したい時に、そのまま重ねると境界がないためきれいに表示させることができませんでした。 枠線の色を背景色と同じ色にして、枠線を太くすることでアイコンを縁取りするCSSを追加すると重ねても区別して表示されるようになりました。 svg.fa-star { stroke: #82a5c8; stroke-width: 12px; }
