20200405のCSSに関する記事は9件です。

コロナウイルスの疾患者人数を可視化するサイトを作成しました

コロナウイルスの疾患人数を可視化できるサイトを作る

疾患者が増えていると断片的にニュースで聞くものの、私自身人数規模がいまいちピンときていませんでした。
適切な危機感を持つには定量的な情報を把握するのが大事だと思い、疾患者人数をグラフ化したサイトを作りたいと思っていました。

疾患者情報を提供するAPIがあると小耳に挟んだので週末で作ることにしました。

仕様要件

  • 世界及び日本の疾患者数の状況が一目で分かる
  • 国ごとのランキングが視覚的に分かる
  • スマホでスクロールせずに見れる

制約条件

  • 土日だけで完成させる(週を跨いだら多分完成しない。リリースするなら早い方がいい)
  • qiitaも土日中に書き終える(アウトプットとして残す)

出来上がったもの

https://github.com/growsic/covid-overview
COVID-19 Overview.jpeg

レポジトリURL

使った技術

  • 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の方が有名で使おうと思ったのですが、縦方向のグラフ
スクリーンショット 2020-04-05 19.24.09.png
を描画しようとした時に縦の長さの調節が上手くできず、各Q&Aサイトでも解決仕切れていなそうだったので代わりのライブラリを探しました。

「chartjs alternative」で検索した中で比較的人気が高く、見た目も良かったAPEXCHARTSを使いました。

大抵のグラフ描画系ライブラリは

{
    series: [
      {
        data: []←値(Y軸。今回で言えば人数)
      },
    ],
    xaxis: {
      categories: []←ラベル(X軸。国名や時間など)
    },
}

のような描画オプションの中にあるリストに、表示したい値の情報をpushして行けば簡単にグラフの表示が出来ます。
後は描画オプションをドキュメントにしたがってカスタマイズしていくことで希望通りの見た目に出来ます。

グラフ描画系ライブラリはライブラリの提供するオプション以外での見た目変更がやりにくいため、望み通りの描画が出来ない場合は他のライブラリに乗り換えるのもありです。

困ったこと

アメリカの疾患者が多過ぎてグラフが潰れる(30万人 vs 2000人)

アメリカの30万人規模のグラフと他国を同じスケール上で並べると

2000人以上いる日本がほとんどいないように見えてしまいました。

一部の飛び値に引っ張られて他が小さく埋もれるのは意図と異なるので、人数ごと10国ずつにページングする仕様にしました。
スクリーンショット 2020-04-05 22.41.08.pngスクリーンショット 2020-04-05 22.41.25.png

表が思い通りの見え方にならない

先述の通りChart.jsからAPEXCHARTSに変えたところ、使用例が少なく本家ドキュメント以外参考になるサイトがありありませんでした。
ひたすらドキュメントのsearchボックスに描画オプションのキーワードを入れ、ドキュメントと公式サンプルを見比べ試行錯誤しながら解決方法を探しました。
グラフ描画系ライブラリはライブラリが提供する以外の見た目変更が難しいため、根気強くドキュメントから探すのも大切です。

見た目がカッコ良くならない/レスポンシブ対応したい

普段webフロントを触らなく基本的なhtml/cssしか分からないが、せっかくなら見た目も良いものにしたい。
今回で言えばグラフはAPEXCHARTSを使ったためグラフの見た目は問題なく、世界/日本のサマリ情報の表を特になんとかしたいと思っていました。
週末で完成まで持っていきたかったので、html/cssのテンプレートを活用/改良することにしました。

世界/日本のサマリ情報の表はGitHubのプラン別料金表のような表を加工すれば出来そうだと考えたので
「html css price table template」
で調べて出てきた沢山のテンプレートの中からイメージに近いものを見つけ、加工して使いました。

ある程度レスポンシブ対応はされているものの細部は修正が必要だったため、要点を絞って検索して修正して行きました。

最後に

会社のとびっきり優秀なエンジニアの方に、どうやったら優秀なエンジニアになれるか聞いた時に教えてもらった一つが、
「やりたいことを決めたら、現在到達可能そうなものを作りきってみる」
ということでした。

「要素技術をある程度理解したら、出来るような気持ちになってしまう。
でもいざ作り切ろうとしたら見えていなかった難しさが沢山見えてくる。
作りきってみてようやく理解できる」

ということだったので、作りたいもの決めたら必ず作りきることを最近考えるようにしていました。
今回はVue.jsとChart.js組み合わせればさくっと作れるだろうと思っていたものの、いざ着手してみると細かいハマるポイントがいくつかあり、半日で作るはずが1日半以上かかっていました。

何とか見てもらえるクオリティに仕上がったものの、今後も作りきることに真摯に向き合わないとなーと思っています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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プロパティについてのメモ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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】継承

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

CSSのプロパティ

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_HcJKKSOXMw

Twitter:
https://twitter.com/otupython

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSで華やかなサイトにしたい①~CSS適用方法と基礎文法~

CSSとは?

CSSとは、簡単に言うとHTMLを飾り付けしてくれるものです:relaxed:
Webページは華やかなほうがいいですようね?
HTMLのみのサイトだと、Webサイトは白い背景、黒い文字だけになってしまいます。
CSSでは色や文字の大きさだけではなくレイアウトも自由に変える事ができます:bangbang:

1つ例を見てみましょう。以下のポートフォリオサイトのCSSをオフするとどうなるでしょうか…
image.png
https://github.com/Yuriko-Y/myportfolio1
(Githubにコード載せてます)
:arrow_down:

image.png
驚くほど殺風景ですね…HTML自体はとてもシンプルなものだったんですね…
逆に言えばシンプルなものでも、デザイン次第では、人の目を引き付けられるサイトを作れるということです:heart_eyes:

今回の記事:arrow_down:

  • CSS適用方法
    • CSSファイルを読み込む方法
    • HTMLファイルの<head>内にCSSを書き込む方法
    • HTMLタグに直接CSSを書き込む方法
  • CSSの基本的な書き方
    • CSSの「セレクタ」とは
    • CSSの「プロパティ」とは
    • CSSの「値」とは
  • class属性とid属性とは?
    • class属性とid属性の違いと、使い分け方法

HTMLの基礎からを学びたい人:point_down_tone2:

CSS適用方法

CSSを適応させる方法は3つあります。
css.png

1つ目は、「.css」の拡張子が付いたCSSファイルを作成し、それをHTMLに読み込ませる方法。
2つ目はHTMLファイルの<head>内にCSSを書き込む方法。
3つ目はHTMLタグに直接CSSを書き込む方法です。
特別な理由がない限り、1つ目のCSSファイルを読み込む方法が良いでしょう。

CSSファイルを読み込む方法

CSSファイルを別に作り、読み込む方法です。

以下の記事を参考にCSSファイルを作ってみましょう:point_down_tone2:
CSSで見た目の調整をしよう!

HTMLファイルにCSSのファイルを読み込ませる方法は<head>タグの中に<link>タグを書きます。
コメント 2020-03-01 125523.png

index.html
<link rel="stylesheet" href="">

herfの中にCSSのファイルがある場所を書きます。
1つのCSSファイルを複数のHTMLで読み込むことができるので、複数のHTMLファイルに対して共通のCSSを適用できます。

HTMLファイルの<head>内にCSSを書き込む方法

次にHTMLファイルの<head>内にCSSを書き込む方法です。ファイルに分ける必要もないような細かい修正を行う際に使用します。

以下のようにstyleタグを使用して、styleタグ内にcssを記入していきます。
コメント 2020-04-05 103148.png

<head>タグ内
    <style>
        h1{
            color: red;
        }
    </style>

このようにh1の部分だけcssが適応されました。
image.png

HTMLタグに直接CSSを書き込む方法

HTMLのタグの中にCSSを直接CSSを書く方法です(「インラインにCSSを書く」と言ったりもします)
タグの中にCSSを書くときは、<タグ名 style="CSSをここに書く">という形になります。

コメント 2020-04-05 105129.png

インラインにCSSを書く
<h1 style="color: red;">猫の一日</h1>

先ほどと同じ結果になりました!
image.png

CSSの基本的な書き方

CSSの基本的な構成と文法を見ていきます。
セレクタ.png
CSSの基本文法の書き方としては「セレクタ(どれの)」「プロパティ(何を)」「値(どのように)」変えるかを指定します。

CSS
h1{
    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の基本的な書き方がわかってきたのではないでしょうか:yum:

ではこの場合はどうでしょう。
以下のコードがありました。

<div>
    <h1>猫の一日</h1>
    <p>ひたすら寝てます</p>
</div>

<div>
    <h1>猫の遊び</h1>
    <p>猫じゃらしで遊びます。</p>
</div>

divタグで囲まれた塊が二つあり、それぞれh1とpタグが入っています。
image.png

上のdivタグのところだけ変えたいとします。つまりh1タグに囲まれた、「猫の一日」とpタグで囲まれた「ひたすら寝てます」の部分だけ文字の色を変えたいとします。

先ほど紹介した子孫セレクタを使用すると...

子孫セレクタの例
div h1,p{
        color:red;
    }

image.png

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;
    }

image.png
無事上のdivタグの中身だけ色を変えられましたね。

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;
    }

コメント 2020-04-05 134343.png
先ほどと同じ結果になりました。

class属性とid属性の違いと、使い分け方法

上記では、「class」を使うか「id」を使うかの差だけで、ブラウザ上での表示効果は全く同じです。
では、「class」と「id」の違いは何でしょうか?使用上の違いを見てみましょう。

★class:
「種別名を割り当てる」
:point_right_tone2: 同じclass名を、1ページ中に何度でも使える。

★id:
「固有の名前を割り当てる」
:point_right_tone2: 同じid名は、1ページ中に1度しか使えない。

また、優先順位にも差があり、「idはclassよりも優先される」という規則があります。
そのため、極力idを使わずにclassだけで記述するほうが楽でしょう。

最後に

今回はCSSの適応方法と基礎文法でした。
次回はCSSを使って本格的に色を付けたり、フォントを変えたり…華やかなサイトづくりの続きをしていきましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 281日目

100日チャレンジの281日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
281日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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.PNG
図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; */
}       

1.PNG
図2. margin:0 を設定

黒太枠(bodyのborder)の外側の余白(margin)がなくなりました。

3-3. display: flex;

flexコンテナと呼ばれるものを設定します。
以下のjustify-contentalign-itemsなどを使用するために必要です。

body {
    margin: 0;
    display: flex;
    /* justify-content: center; */
    /* min-height: 100vh; */
    /* align-items: center; */
    /* flex-direction: column; */
}         

1.PNG
図3. display: flexの適用

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; */
}     

1.PNG
図4. justify-content: center の適用

左に寄っていたアイテムたちが、真ん中に集合しました!

3.5. min-height:100vh;

flexコンテナの領域の最低の高さを100 vhに設定します。

vhviewport 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; */
}     

1.PNG
図5. min-height: 100vh の適用

黒太枠線(bodyborder)が画面いっぱいに広がりました。
それにともない、アイテムたちが縦にみょーんとなっています。

3-6. align-items:center;

図5でアイテムたちが縦にみょーんとなってしまっているのは、align-itemsのためです。
align-itemsflexコンテナ内の要素を垂直方向のどの位置に配置するかを指定します。
デフォルト(指定していない場合)はalign-items:stretch が指定されている状態です。親要素の高さになります。(図5参照)
今回は、中央揃えにしたいのでalign-items:centerを指定します。

body {
    margin: 0px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
    /* flex-direction: column; */
}     

1.PNG
図6. align-items: center の適用

3-7. (追記)flex-direction: column;

3-3. display: flex;でアイテムが横配置になりました。
これはflex-direction: row;がデフォルトで反映されているからです。

flex-directionflexコンテナ内のアイテムの向きを指定するプロパティです。
flex-direction: column;とすることで、縦配置のまま画面中心にコンテンツを移動することができます。

4. さいごに

コンテンツを画面の中心に持ってくることができました!

これで最低限の見た目は保証がされるはずです!(私は信じています!)
あとはいいコンテンツを作るだけですね!…

参考リンク

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。

できたもの

こちら

途中だけどとりあえず公開しちゃいます。
あとで綺麗にまとめます。

あとでつくるリスト

  • 時間プルダウンに「絞り込まない」追加
  • 項目並び替え実装(売値の昇順、降順)
  • Cookieを使用して南半球などのチェック設定を保持
  • Cookieを使用して捕まえたかどうかのチェック項目を追加
  • レスポンシブ化
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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がいいって?おけ!じゃあ基準位置どこにすんの?』ってことだと認識しました。

とりあえず理解はできたけど、なんかパッとしませんね。
自分の腑に落とし込むために、もっと身近なもので抽象的に捉えてみましょう。
IMG_4901.jpg

relativeとabsoluteの関係は、牧場と羊さんです!!!(あくまでも私のイメージ)

relative(牧場)を親要素で指定することによって、absolute(羊さん達)は牧場でのびのびと快適に過ごすことができます。

ただ、topやleftのサイズ指定や子要素の大きさによっては...
IMG_4902.jpg

このように、羊さん脱走事件も起きてしまう可能性はあるので要注意。
※わざとデザイン的に上半身だけ脱走させたい時もあるので、一概に事件とは言えませんね!

補足

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を確認していくのも面白そうですね!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む