- 投稿日:2020-04-05T23:36:30+09:00
コロナウイルスの疾患者人数を可視化するサイトを作成しました
コロナウイルスの疾患人数を可視化できるサイトを作る
疾患者が増えていると断片的にニュースで聞くものの、私自身人数規模がいまいちピンときていませんでした。
適切な危機感を持つには定量的な情報を把握するのが大事だと思い、疾患者人数をグラフ化したサイトを作りたいと思っていました。疾患者情報を提供するAPIがあると小耳に挟んだので週末で作ることにしました。
仕様要件
- 世界及び日本の疾患者数の状況が一目で分かる
- 国ごとのランキングが視覚的に分かる
- スマホでスクロールせずに見れる
制約条件
- 土日だけで完成させる(週を跨いだら多分完成しない。リリースするなら早い方がいい)
- qiitaも土日中に書き終える(アウトプットとして残す)
出来上がったもの
https://github.com/growsic/covid-overview
レポジトリURLコロナウイルスの疾患状況を可視化するサイトを作成しました。
— しましま Backend Engineer (@growsic) April 5, 2020
15分おきにデータは更新されます。
サイト作成前は2000人代だった日本の疾患者は3000人を超え、アメリカに至っては30万人を超えグラフが突出した状態です。
コロナの現状を正しく知る一助になれば幸いです。https://t.co/mVICf6Pril pic.twitter.com/cqPXGJBTIA使った技術
- RapidAPI
- GitHub Pages
- Vue.js
- APEXCHARTS
を使いました。
データ取得:COVID-19のRapidAPI
RapidAPIでは有償/無償で多くのAPIが提供されています。
世界各国の疾患状況をリストで返してくれる無償のAPIがあったのでこちらを使いました。今回使ったAPI:
https://rapidapi.com/api-sports/api/covid-193/detailsサイトの公開: GitHub Pages
RapidAPIを使うことで静的サイトのみの公開で済むため、GitHub Pagesを利用しました。
GitHubでレポジトリを作成し、Settings > GitHub Pages > Sourceでmasterブランチを選択すれば、masterブランチにcommit/mergeするだけで自動的にGitHub Pagesに反映されるのでとても便利です。JavaScript: Vue.js
ロジックや値の管理用です。復習がてら使いました。
グラフ描画: APEXCHARTS
グラフを描画するJavaScriptのライブラリとして、APEXCHARTSを使いました。
グラフの描画であればChart.jsの方が有名で使おうと思ったのですが、縦方向のグラフ
を描画しようとした時に縦の長さの調節が上手くできず、各Q&Aサイトでも解決仕切れていなそうだったので代わりのライブラリを探しました。「chartjs alternative」で検索した中で比較的人気が高く、見た目も良かったAPEXCHARTSを使いました。
大抵のグラフ描画系ライブラリは
{ series: [ { data: []←値(Y軸。今回で言えば人数) }, ], xaxis: { categories: []←ラベル(X軸。国名や時間など) }, }のような描画オプションの中にあるリストに、表示したい値の情報をpushして行けば簡単にグラフの表示が出来ます。
後は描画オプションをドキュメントにしたがってカスタマイズしていくことで希望通りの見た目に出来ます。グラフ描画系ライブラリはライブラリの提供するオプション以外での見た目変更がやりにくいため、望み通りの描画が出来ない場合は他のライブラリに乗り換えるのもありです。
困ったこと
アメリカの疾患者が多過ぎてグラフが潰れる(30万人 vs 2000人)
アメリカの30万人規模のグラフと他国を同じスケール上で並べると
2000人以上いる日本がほとんどいないように見えてしまいました。
一部の飛び値に引っ張られて他が小さく埋もれるのは意図と異なるので、人数ごと10国ずつにページングする仕様にしました。
表が思い通りの見え方にならない
先述の通りChart.jsからAPEXCHARTSに変えたところ、使用例が少なく本家ドキュメント以外参考になるサイトがありありませんでした。
ひたすらドキュメントのsearchボックスに描画オプションのキーワードを入れ、ドキュメントと公式サンプルを見比べ試行錯誤しながら解決方法を探しました。
グラフ描画系ライブラリはライブラリが提供する以外の見た目変更が難しいため、根気強くドキュメントから探すのも大切です。見た目がカッコ良くならない/レスポンシブ対応したい
普段webフロントを触らなく基本的なhtml/cssしか分からないが、せっかくなら見た目も良いものにしたい。
今回で言えばグラフはAPEXCHARTSを使ったためグラフの見た目は問題なく、世界/日本のサマリ情報の表を特になんとかしたいと思っていました。
週末で完成まで持っていきたかったので、html/cssのテンプレートを活用/改良することにしました。世界/日本のサマリ情報の表はGitHubのプラン別料金表のような表を加工すれば出来そうだと考えたので
「html css price table template」
で調べて出てきた沢山のテンプレートの中からイメージに近いものを見つけ、加工して使いました。ある程度レスポンシブ対応はされているものの細部は修正が必要だったため、要点を絞って検索して修正して行きました。
最後に
会社のとびっきり優秀なエンジニアの方に、どうやったら優秀なエンジニアになれるか聞いた時に教えてもらった一つが、
「やりたいことを決めたら、現在到達可能そうなものを作りきってみる」
ということでした。「要素技術をある程度理解したら、出来るような気持ちになってしまう。
でもいざ作り切ろうとしたら見えていなかった難しさが沢山見えてくる。
作りきってみてようやく理解できる」ということだったので、作りたいもの決めたら必ず作りきることを最近考えるようにしていました。
今回はVue.jsとChart.js組み合わせればさくっと作れるだろうと思っていたものの、いざ着手してみると細かいハマるポイントがいくつかあり、半日で作るはずが1日半以上かかっていました。何とか見てもらえるクオリティに仕上がったものの、今後も作りきることに真摯に向き合わないとなーと思っています。
- 投稿日:2020-04-05T20:13:09+09:00
CSS_リストを右寄せにして、左から順番に表示する
リストを右寄せにして左から順番に表示しようと思ったら、
右寄せにはなるけど右から順番に表示されてしまいました…例えば、Home About Contact と表示させたいのに、
Contact About Home となってしまうのです。。
調べたところ、liだけにfloat: right;としてしまったのがダメだったようです。
以下のようにするとうまくいきました。HTML <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> CSS ul { float: right; } li { float: left; }☟こちらのサイトを参考にしました。
cssのfloatプロパティについてのメモ
- 投稿日:2020-04-05T19:12:52+09:00
Sassで出来ること【vol.4】継承
Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。
継承
scssでは一度使ったセレクタを継承して使用することが出来ます。
基本的には同じで少しずつ違うスタイルのモジュールを作りたいときに重宝しています!スタイル要素の追加と変更を行うscssの例です。
.scss.hoge { margin-right: 15px; margin-bottom: 1.5em; background: #fff; } .huga{ @extend .hoge; margin-right: 30px; float: right; }cssに変換するとこの様になります。
変換後の.css.hoge, .huga { margin-right: 15px; margin-bottom: 1.5em; background: #fff; } /*--以下、追加・変更部分--*/ .huga { margin-right: 30px; float: right; }.hogeセレクタ.hugaセレクタでスタイルが共有されています。
また、.hugaで追加・変更された要素はスタイルの上書きがなされています。ただし、継承を行う際の注意点として
「@ extend .hoge, .huga;」の様に複数一括指定することは出来ません。
「@ extend .hoge」
「@ extend .huga」という様に分けて書くことで複数のスタイルを継承することが出来ます。リンク
Sassで出来ること【vol.1】Sassとは?
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数
Sassで出来ること【vol.4】継承
- 投稿日:2020-04-05T19:00:10+09:00
100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3
今日もCSSの続きをやっていきましょう。
前回のはこちら
100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2CSSのプロパティ
CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。セレクタ
セレクタ(selector)はCSSを適応させる対象のことです。
プロパティ
プロパティは適応するスタイルの種類のことで、様々な種類があります。
例えば
color
では色を指定することができます。値(value)
プロパティの値です。プロパティに対して様々な値が用意されています。
複数のスタイルを指定する
一つのセレクタにスタイルを複数指定したい場合は
1つのスタイルの宣言を;で区切ります。
p {color:red; line-height:15px;}
プロパティの数はものすごく沢山あります。
機能ごとに少しづつ押さえて行きましょう。
色合い(カラー)
color
文字の色を指定するプロパティ
RGB値(16進数) color: #f00; color: #ff0000; RGB値(10進数) color: rgb(255,0,0); RGB値(%) color: rgb(100%,0%,0%); RGBA値(10進数) color: rgba(255,0,0,0.5); RGBA値(%) color: rgba(100%,0%,0%,0.5); HSL値 color: hsl(0,255%,128%); HSLA値 color: hsla(0,255%,128%,0.5); 基本色 /* black、silver、gray、white、maroon、red、purple、fuchsia、 green、lime、olive、yellow、navy、blue、teal、aqua */ color: red; 拡張色 /* X11カラー140色など */ color: darkred; 透過色 color: transparent; 親要素のカラー値 color: currentColor;opacity
色の透明度を指定するためのプロパティ
0.0で完全な透明/* 0.0~1.0 */ opacity: 0.1; opacity: 0.5;背景
background
背景に関するプロパティの値をまとめて記述する。
値 意味 background-attachment 背景画像のスクロール方法 background-clip 背景の描画領域 background-color 背景色 background-image 背景画像 background-origin 背景画像の配置基点 background-position 背景画像の表示位置 background-repeat 背景画像の繰り返し方法 background-size 背景画像のサイズ background-attachment
背景画像のスクロール方法を指定する。
background-image
,background-position
と併用する
値 意味 fixed 背景画像を指定した位置に固定 local 背景画像を要素内のコンテンツと一緒にスクロール scroll 通常通り、背景画像を要素と一緒にスクロール(初期値) background-attachment: fixed; background-attachment: local; background-attachment: scroll;background-clip
background-imageで指定した背景画像や
background-colorで指定した背景色の描画領域を指定
値 意味 border-box 背景はボーダーボックス内に表示(初期値) padding-box 背景はパディングボックス内に表示 content-box 背景はコンテンツボックス内に表示 background-clip: border-box; background-clip: padding-box; background-clip: content-box;background-color
要素の背景ボックスの色を指定する。
colorと同じ値background-color: #f00; background-color: #ff0000; background-color: rgb(255,0,0); background-color: rgb(100%,0%,0%); background-color: rgba(255,0,0,0.5); background-color: rgba(100%,0%,0%,0.5); background-color: hsl(0,255%,128%); background-color: hsla(0,255%,128%,0.5); background-color: red; background-color: darkred; background-color: transparent; background-color: currentColor;background-image
要素の背景に置く画像を指定する。
background-image: url("aaa.gif");background-origin
background-imageで指定した背景画像に対して配置の基準とする対象のボックスを
padding-box、border-box、content-boxのいずれかで指定する。
値 意味 padding-box パディングボックスを配置の基準(初期値) border-box ボーダーボックスを配置の基準 content-box コンテンツボックスを配置の基準 background-origin: padding-box; background-origin: border-box; background-origin: content-box;background-position
background-imageで指定した背景画像の、配置領域内での位置を指定
background-position: left 10px top 15px; background-position: right 3em bottom 10px; background-position: 100% 100%;background-repeat
background-imageで指定した背景画像の繰り返しパターンを指定
値 意味 repeat-x 背景画像を水平方向に繰り返し repeat-y 背景画像を垂直方向に繰り返し repeat 背景画像を水平方向と垂直方向に繰り返し(初期値) space 背景画像は指定方向へ繰り返して配置、スペースで調整 round 背景画像は指定方向へ繰り返して配置、画像の伸縮によって調整 no-repeat 背景画像を繰り返さない background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat;background-size
background-imageで指定した背景画像のサイズを指定
値 意味 長さ 「px」や「em」などのサイズで画像の幅と高さを指定 パーセント値 パーセント値で画像の幅と高さを指定 auto 自動で画像の幅と高さを指定する。(初期値) contain 画像の縦と横の比率を保ったまま、配置領域内にすべて収まる最大のサイズに画像を調整 cover 画像の縦と横の比率を保ったまま、配置領域をすべて覆う最小のサイズに画像を調整 background-size: 100% 100%; background-size: 15px 15px; background-size: 50% auto; background-size: auto 4em; background-size: auto; background-size: 3em;ボーダー
border
ボーダーに関するプロパティの値をまとめて記述するプロパティ
値 意味 border-color ボーダーの色 border-style ボーダーの種類 border-width ボーダーの太さ border: 2px solid #f00; border: thin dotted rgb(255,0,0); border: thick double hsla(0,255%,128%,0.5);border-bottom
下側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 意味 border-width ボーダーの太さ border-style ボーダーの種類 border-color ボーダーの色 border-bottom: 2px solid #f00; border-bottom: thin dotted rgb(255,0,0); border-bottom: thick double hsla(0,255%,128%,0.5);border-bottom-color
下側のボーダーの色を指定するプロパティ
colorと同様border-bottom-color: #f00; border-bottom-color: #ff0000; border-bottom-color: rgb(255,0,0); border-bottom-color: rgb(100%,0%,0%); border-bottom-color: rgba(255,0,0,0.5); border-bottom-color: rgba(100%,0%,0%,0.5); border-bottom-color: hsl(0,255%,128%); border-bottom-color: hsla(0,255%,128%,0.5); border-bottom-color: red; border-bottom-color: darkred; border-bottom-color: transparent; border-bottom-color: currentColor;border-bottom-left-radius
左下の角丸を指定するプロパティ
数値やパーセントで指定する。border-bottom-left-radius: 10px; border-bottom-left-radius: 10em; border-bottom-left-radius: 10%; border-bottom-left-radius: 10px 10px; border-bottom-left-radius: 10em 10em; border-bottom-left-radius: 10% 10%;border-bottom-right-radius
右下の角丸を指定するプロパティ
数値やパーセントで指定する。border-bottom-right-radius: 10px; border-bottom-right-radius: 10em; border-bottom-right-radius: 10%; border-bottom-right-radius: 10px 10px; border-bottom-right-radius: 10em 10em; border-bottom-right-radius: 10% 10%;border-bottom-style
下側のボーダーの種類を指定するプロパティ
値 意味 none 罫線を引かない。(初期値) hidden 罫線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる囲み線 outset ボックス全体が隆起したようにみえる囲み線 border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset;border-bottom-width
下側のボーダーの太さを指定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い border-bottom-width: 2px; border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick;border-color
上下左右の罫線の色をまとめて設定するためのもので、値を4個指定した場合
4つの値は、上、右、下、左の罫線の色をそれぞれ順に表す
colorと同等border-color: #f00; border-color: #f00 #f00; border-color: #f00 #f00 #f00; border-color: #f00 #f00 #f00 #f00;border-image
ボーダー画像関連プロパティの値をまとめて指定するプロパティ
値 意味 border-image-source ボーダーに使用する画像を指定 border-image-slice 画像を9つにスライス border-image-width ボーダー画像の太さを指定 border-image-outset ボーダー画像の外側への拡張を指定 border-image-repeat 画像の繰り返し方法を指定 border-image: url("aaa.png") 10 10 / 30px round stretch;border-image-outset
ボーダーイメージエリアを広げるプロパティ
値 意味 長さ ボーダーイメージエリアを広げる距離を長さで指定 数値 border-widthの倍数を指定 border-image-outset: 10px; border-image-outset: 10px 10px; border-image-outset: 10px 10px 10px; border-image-outset: 10px 10px 10px 10px;border-image-repeat
border-image-sliceによって切り分けられた罫線画像の
上下および左右の罫線部分の画像の繰り返しについてキーワードで指定
値 意味 stretch 画像は繰り返されず、領域いっぱいまで拡張(初期値) repeat 画像は領域いっぱいまで繰り返される round 画像は領域いっぱいまで繰り返され、位置は画像パターンのサイズで調整 space 画像は領域いっぱいまで繰り返され、位置は余白のスペースによって調整されます。 border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; border-image-repeat: round stretch;border-image-slice
画像の分割位置を指定するプロパティ
値 意味 数値 画像の端からの距離を、「ピクセル数」や「ベクター座標」で指定 パーセント値 画像全体の幅や高さに対する割合で指定 fill スライス後の画像の中央部分が破棄されない border-image-slice: 10; border-image-slice: 10 10; border-image-slice: 10 10 10; border-image-slice: 10 10 10 10; border-image-slice: 10%; border-image-slice: 10% 10%; border-image-slice: 10% 10% 10%; border-image-slice: 10% 10% 10% 10%; border-image-slice: 10 fill; border-image-slice: 10% fill;border-image-source
ボーダーに使用する画像ファイルを指定するプロパティ
値 意味 url ボーダーに使用する画像ファイルのURLを指定 none ボーダーに画像を使用しない(初期値) border-image-source: url("aaa.png"); border-image-source: none;border-image-width
ボーダー画像の太さを指定するプロパティ
値 意味 パーセント値 「border画像領域」の幅または高さに対する割合距離を指定 数値 対応するborder-widthに対し,倍数で「border画像領域」の境界線からの距離を指定 auto border-image-sliceと同じ値 border-image-width: 10; border-image-width: 10px; border-image-width: 10em; border-image-width: 10%; border-image-width: 10px 10px; border-image-width: 10px 10px 10px; border-image-width: 10px 10px 10px 10px; border-image-width: auto;border-left
左側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 意味 border-width ボーダーの太さ border-style ボーダーの種類 border-color ボーダーの色 border-left: 2px solid #f00; border-left: thin dotted rgb(255,0,0); border-left: thick double hsla(0,255%,128%,0.5);border-left-color
左側のボーダーの色を指定するプロパティ
colorと同様border-left-color: #f00; border-left-color: #ff0000; border-left-color: rgb(255,0,0); border-left-color: rgb(100%,0%,0%); border-left-color: rgba(255,0,0,0.5); border-left-color: rgba(100%,0%,0%,0.5); border-left-color: hsl(0,255%,128%); border-left-color: hsla(0,255%,128%,0.5); border-left-color: red; border-left-color: darkred; border-left-color: transparent; border-left-color: currentColor;border-left-style
左側のボーダーの種類を指定するプロパティ
値 意味 none 罫線を引かない。(初期値) hidden 罫線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる囲み線 outset ボックス全体が隆起したようにみえる囲み線 border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset;border-left-width
左側のボーダーの太さを指定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い border-left-width: 2px; border-left-width: thin; border-left-width: medium; border-left-width: thick;border-radius
4つの角丸をまとめて指定するプロパティ
数値やパーセント値で指定する。border-radius: 10px; border-radius: 10em; border-radius: 10%; border-radius: 10px 10px; border-radius: 10px 10px 10px; border-radius: 10px 10px 10px 10px; border-radius: 10px / 10px; border-radius: 10px 10px / 10px 10px; border-radius: 10px 10px 10px / 10px 10px 10px; border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;border-right
右側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 意味 border-width ボーダーの太さ border-style ボーダーの種類 border-color ボーダーの色 border-right: 2px solid #f00; border-right: thin dotted rgb(255,0,0); border-right: thick double hsla(0,255%,128%,0.5);border-right-color
右側のボーダーの色を指定するプロパティ
colorと同等border-right-color: #f00; border-right-color: #ff0000; border-right-color: rgb(255,0,0); border-right-color: rgb(100%,0%,0%); border-right-color: rgba(255,0,0,0.5); border-right-color: rgba(100%,0%,0%,0.5); border-right-color: hsl(0,255%,128%); border-right-color: hsla(0,255%,128%,0.5); border-right-color: red; border-right-color: darkred; border-right-color: transparent; border-right-color: currentColor;border-right-style
右側のボーダーの種類を指定するプロパティです
値 意味 none 罫線を引かない。(初期値) hidden 罫線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる囲み線 outset ボックス全体が隆起したようにみえる囲み線 border-right-style: none; border-right-style: hidden; border-right-style: dotted; border-right-style: dashed; border-right-style: solid; border-right-style: double; border-right-style: groove; border-right-style: ridge; border-right-style: inset; border-right-style: outset;border-right-width
右側のボーダーの太さを指定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い border-right-width: 2px; border-right-width: thin; border-right-width: medium; border-right-width: thick;border-style
上下左右の罫線の種類をまとめて設定するプロパティ
値 意味 none 罫線を引かない。(初期値) hidden 罫線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる囲み線 outset ボックス全体が隆起したようにみえる囲み線 border-style: solid; border-style: solid solid; border-style: solid solid solid; border-style: solid solid solid solid;border-top
上側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 意味 border-width ボーダーの太さ border-style ボーダーの種類 border-color ボーダーの色 border-top: 2px solid #f00; border-top: thin dotted rgb(255,0,0); border-top: thick double hsla(0,255%,128%,0.5);border-top-color
上側のボーダーの色を指定するプロパティ
colorと同等border-top-color: #f00; border-top-color: #ff0000; border-top-color: rgb(255,0,0); border-top-color: rgb(100%,0%,0%); border-top-color: rgba(255,0,0,0.5); border-top-color: rgba(100%,0%,0%,0.5); border-top-color: hsl(0,255%,128%); border-top-color: hsla(0,255%,128%,0.5); border-top-color: red; border-top-color: darkred; border-top-color: transparent; border-top-color: currentColor;border-top-left-radius
左上の角丸を指定するプロパティ
数値やパーセント値で指定する。border-top-left-radius: 10px; border-top-left-radius: 10em; border-top-left-radius: 10%; border-top-left-radius: 10px 10px; border-top-left-radius: 10em 10em; border-top-left-radius: 10% 10%;border-top-right-radius
右上の角丸を指定するプロパティ
数値やパーセント値で指定する。border-top-right-radius: 10px; border-top-right-radius: 10em; border-top-right-radius: 10%; border-top-right-radius: 10px 10px; border-top-right-radius: 10em 10em; border-top-right-radius: 10% 10%;border-top-style
上側のボーダーの種類を指定するプロパティ
値 意味 none 罫線を引かない。(初期値) hidden 罫線を表示しません。noneとほぼ同等 dotted 点線 dashed 破線 solid 実線 double 二重線 groove 立体的に窪んだ線 ridge 立体的に隆起した線 inset ボックス全体が窪んだようにみえる囲み線 outset ボックス全体が隆起したようにみえる囲み線 border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset;border-top-width
上側のボーダーの太さを指定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い border-top-width: 2px; border-top-width: thin; border-top-width: medium; border-top-width: thick;border-width
上下左右の罫線の太さをまとめて設定するプロパティ
値 意味 数値 罫線の太さを「px」や「em」などで指定 thin 細い medium 中くらい(初期値) thick 太い border-width: 2px; border-width: 2px 2px; border-width: 2px 2px 2px; border-width: 2px 2px 2px 2px;box-decoration-break
ボックスが改行する際の表示形式を指定するプロパティ
値 意味 slice 連続ボックスとして表示(初期値) clone 別のボックスを生成 box-decoration-break: slice; box-decoration-break: clone;box-shadow
ボックスに影を付けるプロパティ
値 意味 長さ 影の長さなどを「px」や「em」で指定 色 色の指定を省略するとブラウザの設定色 inset 影をボックスの内部付 none ボックスに影を付けない(初期値) box-shadow: 5px 5px; box-shadow: 5px 5px 5px; box-shadow: 5px 5px 5px 5px; box-shadow: 5px 5px 5px 5px #f00; box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5) inset; box-shadow: 5px 5px 5px 5px #f00, 7px 7px 7px 7px #00f;フォント
font
フォント関連プロパティの値をまとめて記述するためのプロパティ
値 意味 font-style イタリック体、斜体 font-variant スモールキャップ。normal、small-capsのみ指定可能。 font-weight 文字の太さ font-size 文字の大きさ line-height 行の高さ font-family フォントの種類 caption ボタンなどのラベルに使われるフォント icon アイコンのラベルに使われるフォント menu ドロップダウンメニューやメニューリストに使われるフォント message-box ダイアログボックス内で使われるフォント small-caption 小さなコントロールのラベルに使われるフォント status-bar ステータスバーで使われるフォント font: italic small-caps bold 12px/1.2em "メイリオ","Meiryo",sans-serif; font: caption; font: icon; font: menu; font: message-box; font: small-caption; font: status-bar;font-family
フォントの種類を指定するプロパティ
値 意味 フォント名 「メイリオ」や「Verdana」などのフォント名を指定フォント名に半角スペースが含まれている場合は引用符で囲む serif 明朝体や、ヒゲ付きの書体で表示される sans-serif ゴシック体や、ヒゲなしの書体で表示される cursive 草書体や筆記体で表示される fantasy 装飾文字で表示される monospace 等幅フォントで表示される font-family: "メイリオ","Meiryo","MS Pゴシック","MS PGothic",sans-serif;font-feature-settings
OpenTypeフォント機能の利用について、有効/無効を指定するプロパティ
値 意味 normal 通常のフォントを表示(初期値) OpenTypeフォントの機能タグ値 タグの文字列と、有効/無効を示す値を指定 font-feature-settings: "dlig" 1; font-feature-settings: "smcp" on; font-feature-settings: "liga" off; font-feature-settings: "palin" off;font-kerning
欧文フォントにカーニングを適用するためのプロパティ
値 意味 auto ブラウザの設定に従います。(初期値) normal 通常のカーニングを適用 none カーニングを適用しません。 font-kerning: auto; font-kerning: normal; font-kerning: none;font-size
文字の大きさを指定するプロパティ
値 意味 数値 「px」や「pt」などの単位で指定。 パーセント指定 親要素のフォントサイズに対する割合。「%」か「em」を使用。emで指定した場合、親要素のフォントサイズの倍数値 larger 親要素のフォントより大きいサイズ smaller 親要素のフォントより小さいサイズ xx-large mediumの2倍 x-large mediumの1.5倍 large mediumの1.2倍 medium 通常の大きさ(初期値) small mediumの0.88倍 x-small mediumの0.75倍 xx-small mediumの0.6倍 font-size: 12px; font-size: 1.2em; font-size: larger; font-size: smaller; font-size: xx-large; font-size: x-large; font-size: large; font-size: medium; font-size: small; font-size: x-small; font-size: xx-small;font-size-adjust
フォントの種類の違いによるサイズのバラつきを調整するプロパティ
値 意味 数値 第1候補のフォントのaspect値を指定 none aspect値によるサイズ調整をしない(初期値) font-size-adjust: 0.5; font-size-adjust: none;font-stretch
文字の横幅の広さを指定するプロパティ
値 意味 ultra-condensed normalより4段階幅が狭い extra-condensed normalより3段階幅が狭い condensed normalより2段階幅が狭い semi-condensed normalより1段階幅が狭い normal 標準の幅(初期値) semi-expanded normalより1段階幅が広い expanded normalより2段階幅が広い extra-expanded normalより3段階幅が広い ultra-expanded normalより4段階幅が広い font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded;font-style
文字を斜体で表示するプロパティ
値 意味 normal 標準フォント(初期値) italic イタリック体フォント oblique 斜体フォント font-style: normal; font-style: italic; font-style: oblique;font-synthesis
太字や斜体を持たないフォントファミリを、無理やり太字や斜体で表示するかどうかを指定するプロパティ
値 意味 none 太字や斜体の指定を無視して、通常のフォントフェイスで表示 weight 無理やり太字で表示 style 無理やり斜体で表示 font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: weight style;font-variant
フォントの表示機能に関するサブプロパティの値をまとめて設定できるプロパティ
値 意味 normal 標準のフォントで表示(初期値) small-caps スモールキャピタルのフォントで表示フォントがスモールキャピタルに対応していない場合は、大文字を縮小したものが表示 font-variant: normal; font-variant: inherit;font-variant-position
Value:normal | sub | super | ordinalInitial:normalApplies to:all elementsInherited:yesPercentages:N/AMedia:visualComputed value:as specified
値 意味 /* CSS3の値 */ font-variant: normal; font-variant: inherit; font-variant: フォントの表示機能に関する各プロパティの値を並べます; /* CSS2.1の値 */ font-variant: normal; font-variant: small-caps;font-weight
フォントの太さを指定するプロパティ
値 意味 normal 文字を通常の太さで表示「400」と同じ太さです。(初期値) bold 文字を太く表示「700」と同じ太さです。 bolder 親要素の指定より、文字を太く表示 lighter 親要素の指定より、文字を細く表示 100、200、300、400、500、600、700、800、900 100細900太く font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: 400; font-weight: 700;テキスト
hanging-punctuation
句読点を行ボックスの外側に配置するプロパティ
値 意味 none 句読点を行ボックスの外側に配置なし(初期値) first 句読点を最初の行ボックスの外側に配置 last 句読点を最後の行ボックスの外側に配置 force-end 強制的に、句読点をすべての行ボックスの外側に配置 allow-end 必要があれば、句読点をすべての行ボックスの外側に配置 hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; hanging-punctuation: first last; hanging-punctuation: first last force-end; hanging-punctuation: first last allow-end;hyphens
行末の長い単語をハイフネーションするプロパティ
値 意味 none ハイフネーションしない manual ハイフネーション(初期値) auto ブラウザの設定に従う hyphens: none; hyphens: manual; hyphens: auto;letter-spacing
文字の間隔を指定するプロパティ
値 意味 normal 標準の間隔に(初期値) 長さ 数値に「px」「em」「ex」などの単位をつけて指定 パーセント値 数値に「%」をつけて指定 letter-spacing: normal; letter-spacing: 1em; letter-spacing: -1em; letter-spacing: 10px; letter-spacing: -10px; letter-spacing: 100%; letter-spacing: -100%;line-break
要素内での行末や行頭の禁則処理の厳密さを指定するプロパティ
値 意味 auto ブラウザの設定に従います。(初期値) loose 緩やかな禁則処理を使用 normal 一般的な禁則処理を使用「々」「…」「:」「;」「!」「?」は、行頭に送られない strict 厳密な禁則処理を使用「々」「…」「:」「;」「!」「?」に加え、拗音や促音で使われる小さいカナや、「~」「-」「―」なども、行頭に送られない line-break: auto; line-break: loose; line-break: normal; line-break: strict;overflow-wrap
単語が長すぎて1行に収まりきれない場合などに、文字のあふれを防ぐために、単語の途中で折り返しするかどうかを指定するプロパティ
値 意味 normal 改行や半角スペースなどの折り返しが可能な位置でのみ折り返し(初期値) break-word 折り返し可能な位置がない場合は、任意の位置で折り返し overflow-wrap: normal; overflow-wrap: break-word;tab-size
タブ文字の表示時の長さを指定するプロパティ
値 意味 数値 半角スペースの個数を指定 tab-size: 4; tab-size: 6; tab-size: 8; tab-size: 10;text-align
テキストの水平方向の配置を指定するプロパティ
値 意味 start 文字を行ボックスの先頭に揃えて配置(初期値) end 文字を行ボックスの末尾に揃えて配置 left 文字を行ボックスの左端に揃えて配置 right 文字を行ボックスの右端に揃えて配置 center 文字を行ボックスの中心に配置 justify text-justifyの指定に従う match-parent inheritの指定と同様です。ただし、startやendは、親要素のdirection値に従う text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: match-parent; text-align: "." center; text-align: "年" center;text-align-last
ブロック内の最終行の水平方向の配置方法を指定するプロパティ
値 意味 auto ブラウザの設定に従います。(初期値) start ボックスの先頭に揃えて配置 end ボックスの末尾に揃えて配置 left ボックスの左端に揃えて配置 right ボックスの右端に揃えて配置 center ボックスの中心に配置 justify text-justifyの指定に従う text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify;text-decoration
文字の装飾線に関するサブプロパティの値を、まとめて記述するためのショートハンドプロパティ
値 意味 underline 文字の下に装飾線 overline 文字の上に装飾線 line-through 文字に打ち消し線 blink 文字を点滅 none 文字の装飾線は表示されず、点滅なし(初期値) text-decoration: underline #f00 solid; text-decoration: overline red double; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink; text-decoration: none;text-decoration-color
文字の装飾線の色を指定するプロパティ
colorと同様text-decoration-color: #f00; text-decoration-color: #ff0000; text-decoration-color: rgb(255,0,0); text-decoration-color: rgb(100%,0%,0%); text-decoration-color: rgba(255,0,0,0.5); text-decoration-color: rgba(100%,0%,0%,0.5); text-decoration-color: hsl(0,255%,128%); text-decoration-color: hsla(0,255%,128%,0.5); text-decoration-color: red; text-decoration-color: darkred; text-decoration-color: transparent; text-decoration-color: currentColor;text-decoration-line
文字の装飾線の位置を指定するプロパティ
値 意味 none 文字の装飾線は表示なし。(初期値) underline 文字の下に装飾線 overline 文字の上に装飾線 line-through 文字に打ち消し線 text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: underline overline; text-decoration-line: underline overline line-through;text-decoration-skip
装飾線を引かない対象を指定するプロパティ
値 意味 objects オブジェクト(初期値) spaces 空白 ink 書体の上 edges コンテンツの開始端と終了端 none 対象なし text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: ink; text-decoration-skip: edges; text-decoration-skip: none; text-decoration-skip: objects spaces; text-decoration-skip: objects spaces ink edges;text-decoration-style
文字の装飾線の種類を指定するプロパティ
値 意味 solid 実線(初期値) double 二重線 dotted 点線 dashed 破線 wavy 波線 text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;text-emphasis
text-emphasis-styleとtext-emphasis-colorを、まとめて指定するためのショートハンドプロパティ
値 意味 text-emphasis-style 強調マークの種類を指定 text-emphasis-color 強調マークの色を指定 text-emphasis: filled dot #f00; text-emphasis: filled circle #f00; text-emphasis: filled double-circle #f00; text-emphasis: filled triangle #f00; text-emphasis: filled sesame #f00; text-emphasis: open dot #f00; text-emphasis: open circle #f00; text-emphasis: open double-circle #f00; text-emphasis: open triangle #f00; text-emphasis: open sesame #f00; text-emphasis: "★" #f00;text-emphasis-color
強調マークの色を指定するプロパティ
colorと同様text-emphasis-color: #f00; text-emphasis-color: #ff0000; text-emphasis-color: rgb(255,0,0); text-emphasis-color: rgb(100%,0%,0%); text-emphasis-color: rgba(255,0,0,0.5); text-emphasis-color: rgba(100%,0%,0%,0.5); text-emphasis-color: hsl(0,255%,128%); text-emphasis-color: hsla(0,255%,128%,0.5); text-emphasis-color: red; text-emphasis-color: darkred; text-emphasis-color: transparent; text-emphasis-color: currentColor;text-emphasis-position
強調マークの位置を指定するプロパティ
値 意味 above 横書きのテキストの上に強調マークを表示 below 横書きのテキストの下に強調マークを表示 right 縦書きのテキストの右側に強調マークを表示 left 縦書きのテキストの左側に強調マークを表示 text-emphasis-position: above right; text-emphasis-position: above left; text-emphasis-position: below right; text-emphasis-position: below left;text-emphasis-style
要素内のテキストに強調マークを適用するプロパティ
値 意味 none 強調マークを付けない(初期値) filled 強調マークを単一色で塗りつぶし open 強調マークを中抜き dot 小さな円を表示塗りつぶしは「•」、中抜きは「◦」 circle 大きな円を表示塗りつぶしは「●」、中抜きは「○」 double-circle 2重丸を表示塗りつぶしは「◉」、中抜きは「◎」 triangle 三角形を表示塗りつぶしは「▲」、中抜きは「△」 sesame ゴマを表示塗りつぶしは「﹅」、中抜きは「﹆」 文字列 マークとして使用する文字を1文字指定 text-emphasis-style: none; text-emphasis-style: filled dot; text-emphasis-style: filled circle; text-emphasis-style: filled double-circle; text-emphasis-style: filled triangle; text-emphasis-style: filled sesame; text-emphasis-style: open dot; text-emphasis-style: open circle; text-emphasis-style: open double-circle; text-emphasis-style: open triangle; text-emphasis-style: open sesame; text-emphasis-style: "★";text-indent
段落の最初の行に適用されるインデントの幅を指定するプロパティ
値 意味 長さ 数値に「px」「em」「ex」などの単位をつけて指定 パーセント値 数値に「%」をつけて指定 hanging 逆側にインデントを設定 each-line 各行にインデントを設定 text-indent: 1em; text-indent: 5%; text-indent: 1em hanging; text-indent: 5% each-line;text-justify
行の両端揃えの方法を指定するプロパティ
値 意味 auto ブラウザの設定に従います。(初期値) inter-word 単語間の半角スペースを広げて行を両端揃えに英語や韓国語向け。 inter-ideograph 漢字やひらがなの間を広げて行を両端揃えに日本語向け。 inter-cluster 文字の間隔を広げて行を両端揃えに東南アジアの言語向け。 distribute 単語間のスペースに加え、各文字の間隔を均等に広げて行を両端揃えに日本語向け。 kashida アラビア語の表記などで、特定の文字を引き伸ばして行を両端揃えに none 行の両端揃えを行いません。 text-justify: auto; text-justify: inter-word; text-justify: inter-ideograph; text-justify: inter-cluster; text-justify: distribute; text-justify: kashida; text-justify: none;text-shadow
文字に影を付けるプロパティ
値 意味 長さ 影の長さなどを「px」や「em」で指定 色 色の指定を省略するとブラウザの設定色 none 文字に影を付けません。(初期値) text-shadow: 5px 5px; text-shadow: 5px 5px 5px; text-shadow: 5px 5px 5px #f00; text-shadow: 5px 5px 5px rgba(0,0,0,0.5); text-shadow: 5px 5px 5px #f00, 7px 7px 7px #00f;text-transform
HTMLファイルに関係なく、テキストを大文字・小文字・全角で表示させるプロパティ
値 意味 none 記述した通りに表示されます。(初期値) capitalize 単語の先頭の文字のみ大文字で表示 uppercase すべての文字を大文字で表示 lowercase すべての文字を小文字で表示 full-width すべての文字を全角で表示全角の形式に対応していない文字の場合は変更されない text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: capitalize full-width; text-transform: uppercase full-width; text-transform: lowercase full-width;text-underline-position
文字の下線の配置を指定するプロパティ
値 意味 auto ブラウザの設定に従う(初期値) alphabetic アルファベットのベースラインに合わせる below 要素のコンテンツボックスの下端に合わせる left 縦書きモードのとき、文字の左端に合わせる right 縦書きモードのとき、文字の右端に合わせる text-underline-position: auto; text-underline-position: alphabetic; text-underline-position: below; text-underline-position: left; text-underline-position: right;white-space
テキスト内で連続した空白部分を1つにまとめるかどうか、行を自動的に折り返すかどうかについて指定するプロパティ
値 意味 normal 通常どおり、半角スペースや改行は1つの半角スペースにまとめて表示し、行は自動的に折り返し pre 半角スペースや改行をそのまま表示し、行は折り返し nowrap 半角スペースや改行は1つの半角スペースにまとめて表示し、行は折り返し pre-wrap 半角スペースや改行をそのまま表示し、行は自動的に折り返し pre-line 半角スペースは1つにまとめ、改行はそのまま表示し、行は自動的に折り返し white-space: normal; white-space: pre; white-space: nowrap; white-space: pre-wrap; white-space: pre-line;word-break
単語途中での折り返しを指定するプロパティ
値 意味 normal アルファベットの単語の途中では折り返しなし(初期値) keep-all 単語の途中でもハイフンを入れずに折り返し break-all 半角スペースや改行があるときのみ折り返し word-break: normal; word-break: keep-all; word-break: break-all;word-spacing
単語間の間隔を指定するプロパティ
値 意味 normal 標準の間隔に(初期値) 長さ 数値に「px」「em」「ex」などの単位をつけて指定 パーセント値 数値に「%」をつけて指定 word-spacing: normal; word-spacing: 1em; word-spacing: -1em; word-spacing: 10px; word-spacing: -10px; word-spacing: 100%; word-spacing: -100%;まとめ
プロパティの一部を紹介しました。
全てを完全に覚える必要はなく
プロパティと値の指定の仕方を覚えておき
適切なプロパティに変更できるように
検索の仕方を押さえておきましょう。明日もプロパティの続きを行います。
君がエンジニアになるまであと84日
作者の情報
乙pyのHP:
http://www.otupy.net/Youtube:
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMwTwitter:
https://twitter.com/otupython
- 投稿日:2020-04-05T15:31:56+09:00
CSSで華やかなサイトにしたい①~CSS適用方法と基礎文法~
CSSとは?
CSSとは、簡単に言うとHTMLを飾り付けしてくれるものです
Webページは華やかなほうがいいですようね?
HTMLのみのサイトだと、Webサイトは白い背景、黒い文字だけになってしまいます。
CSSでは色や文字の大きさだけではなくレイアウトも自由に変える事ができます1つ例を見てみましょう。以下のポートフォリオサイトのCSSをオフするとどうなるでしょうか…
https://github.com/Yuriko-Y/myportfolio1
(Githubにコード載せてます)
驚くほど殺風景ですね…HTML自体はとてもシンプルなものだったんですね…
逆に言えばシンプルなものでも、デザイン次第では、人の目を引き付けられるサイトを作れるということです今回の記事
- CSS適用方法
- CSSファイルを読み込む方法
- HTMLファイルの<head>内にCSSを書き込む方法
- HTMLタグに直接CSSを書き込む方法
- CSSの基本的な書き方
- CSSの「セレクタ」とは
- CSSの「プロパティ」とは
- CSSの「値」とは
- class属性とid属性とは?
- class属性とid属性の違いと、使い分け方法
HTMLの基礎からを学びたい人
CSS適用方法
1つ目は、「.css」の拡張子が付いたCSSファイルを作成し、それをHTMLに読み込ませる方法。
2つ目はHTMLファイルの<head>内にCSSを書き込む方法。
3つ目はHTMLタグに直接CSSを書き込む方法です。
特別な理由がない限り、1つ目のCSSファイルを読み込む方法が良いでしょう。CSSファイルを読み込む方法
CSSファイルを別に作り、読み込む方法です。
以下の記事を参考にCSSファイルを作ってみましょう
CSSで見た目の調整をしよう!HTMLファイルにCSSのファイルを読み込ませる方法は<head>タグの中に<link>タグを書きます。
index.html<link rel="stylesheet" href="">herfの中にCSSのファイルがある場所を書きます。
1つのCSSファイルを複数のHTMLで読み込むことができるので、複数のHTMLファイルに対して共通のCSSを適用できます。HTMLファイルの<head>内にCSSを書き込む方法
次にHTMLファイルの<head>内にCSSを書き込む方法です。ファイルに分ける必要もないような細かい修正を行う際に使用します。
以下のようにstyleタグを使用して、styleタグ内にcssを記入していきます。
<head>タグ内<style> h1{ color: red; } </style>HTMLタグに直接CSSを書き込む方法
HTMLのタグの中にCSSを直接CSSを書く方法です(「インラインにCSSを書く」と言ったりもします)
タグの中にCSSを書くときは、<タグ名 style="CSSをここに書く">という形になります。インラインにCSSを書く<h1 style="color: red;">猫の一日</h1>CSSの基本的な書き方
CSSの基本的な構成と文法を見ていきます。
CSSの基本文法の書き方としては「セレクタ(どれの)」「プロパティ(何を)」「値(どのように)」変えるかを指定します。CSSh1{ color:red; font-size: 50px; }このようにプロパティを改行して何個も書くことができます。この場合を日本語で解説すると、
「セレクタ(h1の)」
「プロパティ(色を)」「値(赤に)」、また
「プロパティ(フォントの大きさを)」「値(50pxに)」したとなります。CSSの「セレクタ」とは
CSSのセレクタはどの対象物を変化させるかを指定します。一番簡単なセレクタはHTMLのタグです。
例えば、h1やpタグ、divタグなどです。
しかし、h1やpタグが同じHTMLファイルにたくさんあり、それぞれ適応させたいCSSを変えたいときは「子孫セレクタ(しそん)」を使います。これは、「どこの中にある何」という指定の仕方ができます。子孫セレクタの例div h1{ color:red; }この場合だとdivタグの中のh1だけ色が変わります。
CSSの「プロパティ」とは
「プロパティ」とはセレクタで指定した物の「どの内容を変えるのか」を指定するものです。
代表的なものをを以下の表にまとめてみました。
プロパティ 意味 color 色 font-size 文字サイズ width 横幅 height 高さ background-color 背景色 font-weight 文字の太さ CSSの「値」とは
「セレクタとプロパティ」で指定したものに対して「どのように変える」かを指定するものです。
値はプロパティによって様々なものがあります。
例えば、プロパティが色なら、値は何色にするかという値が入り、プロパティが文字サイズなら、値は大きさを表す数字と単位を入れる必要があります。class属性とid属性とは?
これでだいぶCSSの基本的な書き方がわかってきたのではないでしょうか
ではこの場合はどうでしょう。
以下のコードがありました。<div> <h1>猫の一日</h1> <p>ひたすら寝てます</p> </div> <div> <h1>猫の遊び</h1> <p>猫じゃらしで遊びます。</p> </div>divタグで囲まれた塊が二つあり、それぞれh1とpタグが入っています。
上のdivタグのところだけ変えたいとします。つまりh1タグに囲まれた、「猫の一日」とpタグで囲まれた「ひたすら寝てます」の部分だけ文字の色を変えたいとします。
先ほど紹介した子孫セレクタを使用すると...
子孫セレクタの例div h1,p{ color:red; }divタグが2つあるので、2つとも変わってしまいました。
そこで使えるのが、HTMLのclass属性とid属性を利用します。class属性を使った場合
上のdivタグのところだけ変えたいので、そこにclass属性をつけ、下のdivタグと区別します。
classの名前を今回は"change_color"にしました。HTML<div class="change_color"> <h1>猫の一日</h1> <p>ひたすら寝てます</p> </div> <div> <h1>猫の遊び</h1> <p>猫じゃらしで遊びます。</p> </div>CSSファイルは以下のように書きます。
CSS.change_color{ color:red; }id属性を使った場合
class属性を付けていた部分をid属性に変えてみましょう。
HTML<div id="change_color"> <h1>猫の一日</h1> <p>ひたすら寝てます</p> </div> <div> <h1>猫の遊び</h1> <p>猫じゃらしで遊びます。</p> </div>CSSファイルは以下のように書きます。
CSS#change_color{ color:red; }class属性とid属性の違いと、使い分け方法
上記では、「class」を使うか「id」を使うかの差だけで、ブラウザ上での表示効果は全く同じです。
では、「class」と「id」の違いは何でしょうか?使用上の違いを見てみましょう。★class:
「種別名を割り当てる」
同じclass名を、1ページ中に何度でも使える。★id:
「固有の名前を割り当てる」
同じid名は、1ページ中に1度しか使えない。また、優先順位にも差があり、「idはclassよりも優先される」という規則があります。
そのため、極力idを使わずにclassだけで記述するほうが楽でしょう。最後に
今回はCSSの適応方法と基礎文法でした。
次回はCSSを使って本格的に色を付けたり、フォントを変えたり…華やかなサイトづくりの続きをしていきましょう。
- 投稿日:2020-04-05T06:53:48+09:00
初心者によるプログラミング学習ログ 281日目
100日チャレンジの281日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
281日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 4, 2020
281日目 2.0h
・xdデザインカンプからのサイト模写
・メンターさんからの修正やる#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-04-05T03:27:21+09:00
【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。
1. 記事の目的
わたしはCSSが書けません。
しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。
「最低限の見た目」=「画面サイズに依存せずに画面の中心に配置する」と考えた私は、「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」と決意しQiitaに投稿しました。それだけです。2. コード(コピペ用)
bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。
body { margin:0; display:flex; min-height:100vh; justify-content:center; align-items:center; /* flex-direction: column; */ }一般公開するので、一通り解説をします。
詳細は参考リンクに譲ります。3. CSS の解説
3-1. 解説用html
解説用のhtmlサンプルは以下の通りです。今回はbodyタグの下に見た目用のCSSを追記しています。あくまで解説用のため、本来は必要ないです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { /* ここを個々に解説をします */ /* margin: 0; */ /* display: flex; */ /* justify-content: center; */ /* min-height: 100vh; */ /* align-items: center; */ /* flex-direction: column; */ } </style> </head> <body> <div class="item item1">アイテム1</div> <div class="item item2">アイテム2</div> <div class="item item3">アイテム3</div> </body> <style> /* 枠線や背景色などの見た目用CSS */ body { box-sizing:border-box; border: black 10px solid; padding: 10px; background-color: gainsboro; } .item{ border: black 2px solid; padding: 3px; margin: 3px; background-color: #fff; } </style> </html>こんな感じの見た目になります。(通常なら見た目用CSSがないため、もっと味気ない感じになりますよね。)
図1. 何もない状態3-2.
margin:0;
まず、
margin
と呼ばれる枠(border
)の外の設定です。(図1の黒太枠の外の余白です。)デフォルトでは
margin:8px
となっていました。margin:0
に設定することで枠の外の余白をなくします。
※margin:0
のときはpxのような単位がなくても構いません。もちろん、単位があっても動作します。body { margin: 0px; /* display: flex; */ /* justify-content: center; */ /* min-height: 100vh; */ /* align-items: center; */ /* flex-direction: column; */ }黒太枠(bodyのborder)の外側の余白(margin)がなくなりました。
3-3.
display: flex;
flexコンテナと呼ばれるものを設定します。
以下のjustify-content
やalign-items
などを使用するために必要です。body { margin: 0; display: flex; /* justify-content: center; */ /* min-height: 100vh; */ /* align-items: center; */ /* flex-direction: column; */ }
display:flex
を適応するとこんな感じです。黒太枠内がflexコンテナです。
flexコンテナを適用したタグの子要素(アイテムたちのことです!)が左に寄せられています。
ブロックレベル要素(タグごとに改行される要素)のアイテムたちが横並びになっています。(図2だと縦に並んでました)3-4.
justify-content:center;
flexコンテナ内の要素を、水平方向のどの位置に配置するかを指定します。
デフォルト(指定していない場合)はjustify-content:flex-start
。左寄せになります。(図3 参照)
今回はjustify-content:center
を指定して、中央にします。body { margin: 0px; display: flex; justify-content: center; /* min-height: 100vh; */ /* align-items: center; */ /* flex-direction: column; */ }
図4. justify-content: center の適用左に寄っていたアイテムたちが、真ん中に集合しました!
3.5.
min-height:100vh;
flexコンテナの領域の最低の高さを100 vhに設定します。
vhはviewport heightと呼ばれる、viewport(表示領域)の高さに対する割合の単位です。
100vhはviewportに対して100%という意味です。
つまりmin-height:100vh
=「bodyの高さを少なくとも、表示領域と同じにする」になります。body { margin: 0px; display: flex; justify-content: center; min-height: 100vh; /* align-items: center; */ /* flex-direction: column; */ }黒太枠線(
body
のborder
)が画面いっぱいに広がりました。
それにともない、アイテムたちが縦にみょーんとなっています。3-6.
align-items:center;
図5でアイテムたちが縦にみょーんとなってしまっているのは、
align-items
のためです。
align-items
はflexコンテナ内の要素を垂直方向のどの位置に配置するかを指定します。
デフォルト(指定していない場合)はalign-items:stretch
が指定されている状態です。親要素の高さになります。(図5参照)
今回は、中央揃えにしたいのでalign-items:center
を指定します。body { margin: 0px; display: flex; justify-content: center; min-height: 100vh; align-items: center; /* flex-direction: column; */ }3-7. (追記)
flex-direction: column;
3-3.
display: flex;
でアイテムが横配置になりました。
これはflex-direction: row;
がデフォルトで反映されているからです。
flex-direction
はflexコンテナ内のアイテムの向きを指定するプロパティです。
flex-direction: column;
とすることで、縦配置のまま画面中心にコンテンツを移動することができます。4. さいごに
コンテンツを画面の中心に持ってくることができました!
これで最低限の見た目は保証がされるはずです!(私は信じています!)
あとはいいコンテンツを作るだけですね!…参考リンク
CSS フレックスボックスレイアウト
flexboxをちゃんと理解したい場合はこちら。日本語対応!CSS Flexboxのチートシートを作ったので配布します
使い方がわかりやすく参考にしています。CSS には vw, vh, vmin, vmax という単位がある
vhについてはこちら。
- 投稿日:2020-04-05T01:00:39+09:00
あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。
- 投稿日:2020-04-05T00:43:11+09:00
positionプロパティについて
positionプロパティとは?
指定した要素の配置方法を決めることができるプロパティです。
ボックスの配置方法を相対位置か絶対位置かを指定する際に使用します。
主に一緒に使われるのは、top / bottom / left / right などです。positionの値について
振り返り用。
static
デフォルトの左上を基準値とします。この値のときには、top、bottom、left、rightは適用されません。
※positionを指定していない親ボックスは全てstaticになります。
覚え方 → 初期値!
fixed
絶対位置への配置となり、ブラウザ表示領域(ウィンドウ)の左上を基準位置とします。
またスクロールしても位置が固定されたままとなります。
覚え方 → 動かざること山の如し!fixedの場所が〜〜? \\\ぜった〜い///
relative
相対位置への配置となります。staticを指定した場合と同じ基準位置になりますが、top、bottom、left、rightは適応されます。
覚え方 → 親クラスに設定するやつ
absolute
こちらも絶対位置への配置となりますが、position:relativeが設定された最も近い親要素の左上を基準位置とします。
また、どの親要素にもrelativeが設定されていない場合は、ブラウザ表示領域(ウィンドウ)の左上を基準位置とします。
覚え方 → 生みの親と育ての親が違う場合もあるので注意すべきやつ
relativeとabsoluteの関係性
ここではpositionを理解する第一歩としてrelativeとabsoluteの関係性に絞って理解を深めていきたいと思います。
positionの値(relativeやabsolute)の指定をしているはつまり、
『topとleftが、10pxがいいって?おけ!じゃあ基準位置どこにすんの?』ってことだと認識しました。とりあえず理解はできたけど、なんかパッとしませんね。
自分の腑に落とし込むために、もっと身近なもので抽象的に捉えてみましょう。
relativeとabsoluteの関係は、牧場と羊さんです!!!(あくまでも私のイメージ)
relative(牧場)を親要素で指定することによって、absolute(羊さん達)は牧場でのびのびと快適に過ごすことができます。
ただ、topやleftのサイズ指定や子要素の大きさによっては...
このように、羊さん脱走事件も起きてしまう可能性はあるので要注意。
※わざとデザイン的に上半身だけ脱走させたい時もあるので、一概に事件とは言えませんね!補足
natsukibokujo.html<body> <div class="bokujo" style="position:relative"> <div class="hitsuzisan"> <div class="ushisan" style="position:absolute"> </div> </div> </div> </body>このように、class="bokujo"にposition:relativeが付いている場合、class="ushisan"の親要素は一つ上のclass="hitsuzisan"ではなく、class="bokujo"となります。
つまり、何を親とするかはposition:relativeが記述されているものに起因する(直近のとは言っていない)ということです。最後に
様々なWEBサイトでは、このpositionにz-indexやoverflowが絡んでくることがよくあります。
コードも女も男も、一筋縄ではいかないということですね。気になるサイトを見つけたらソースを確認して、htmlとcssを確認していくのも面白そうですね!