はじめに CSSでのフォントサイズの指定方法には２つの分類がある。 絶対値 サイズが固定される。指定されたサイズで表示され、他の要素の影響を受けない。 相対値 指定された要素自体の値を持っていない。サイズは親要素のフォントサイズによって変わる。依存する親要素のフォントサイズが変われば、それに応じて相対値を指定された要素のフォントサイズも変わる。 フォントサイズ指定によく使われる単位 px 絶対値 指定されたサイズが16pxであれば親要素のサイズに関係なくフォントサイズは16px % 相対値 親要素のフォントサイズに対する割合。親要素のサイズによって指定した要素のサイズも変わる。emと同じ。 sample.css html { font-size: 100%; } div { font-size: 16px; } /* 親要素の半分の8px */ div > p { font-size: 50%; } em 相対値 ％と同じ。親要素のフォントサイズに影響される。 sample.css html { font-size: 100%; } div { font-size: 16px; } /* 親要素の半分の8px */ div > p { font-size: 0.5em; } rem 相対値 ルート（html）要素が基準になる。 sample.css /* 16px */ html { font-size: 100%; } /* html要素の2倍の32px */ div { font-size: 2em; } /* html要素の半分の8px */ div > p { font-size: 0.5em; } vw ビューポートの幅の1/100の大きさを持った単位。ビューポートが100pxの場合1vw、1vwは1pxとなる。 画面サイズによってフォントサイズが変わる。 ↓画面サイズによって可変する単位 単位 説明 vw ビューポートの幅の1/100(100vwで横幅いっぱい) vh ビューポートの高さの1/100(100vhで縦幅いっぱい) vmax ビューポートの高さか幅の大きいほうの1/100 vmin ビューポートの高さか幅の小さいほうの1/100 レスポンシブデザインと画面サイズによって可変する単位 vwで指定すると画面サイズが小さい時にはフォントサイズも小さくなり、画面サイズが大きくなればフォントサイズも大きくなるのでレスポンシブデザインに使用するとフォントサイズが扱いやすくなる。 320px（一番小さいデバイスの幅）を基準としてフォントサイズを指定する。これで画面サイズに合わせてフォントサイズも大きくなってくれる。 サイズ早見表 px vw 10px 3.125vw 11px 3.4375vw 12px 3.75vw 13px 4.0625vw 14px 4.375vw 15px 4.6875vw 16px 5vw 計算方法 フォントサイズ14pxの場合 14px ÷ 320px = 0.04375(4.375%) = 4.375vw ブラウザのデフォルト ブラウザのデフォルトフォントサイズは 100% = 16px = 1em = 1rem
CSSでのフォントサイズの指定方法には２つの分類がある。
サイズが固定される。指定されたサイズで表示され、他の要素の影響を受けない。
指定された要素自体の値を持っていない。サイズは親要素のフォントサイズによって変わる。依存する親要素のフォントサイズが変われば、それに応じて相対値を指定された要素のフォントサイズも変わる。
絶対値 指定されたサイズが16pxであれば親要素のサイズに関係なくフォントサイズは16px
相対値 親要素のフォントサイズに対する割合。親要素のサイズによって指定した要素のサイズも変わる。emと同じ。
html { font-size: 100%; } div { font-size: 16px; } /* 親要素の半分の8px */ div > p { font-size: 50%; }
相対値 ％と同じ。親要素のフォントサイズに影響される。
html { font-size: 100%; } div { font-size: 16px; } /* 親要素の半分の8px */ div > p { font-size: 0.5em; }
相対値 ルート（html）要素が基準になる。
/* 16px */ html { font-size: 100%; } /* html要素の2倍の32px */ div { font-size: 2em; } /* html要素の半分の8px */ div > p { font-size: 0.5em; }
ビューポートの幅の1/100の大きさを持った単位。ビューポートが100pxの場合1vw、1vwは1pxとなる。 画面サイズによってフォントサイズが変わる。
↓画面サイズによって可変する単位
vwで指定すると画面サイズが小さい時にはフォントサイズも小さくなり、画面サイズが大きくなればフォントサイズも大きくなるのでレスポンシブデザインに使用するとフォントサイズが扱いやすくなる。 320px（一番小さいデバイスの幅）を基準としてフォントサイズを指定する。これで画面サイズに合わせてフォントサイズも大きくなってくれる。
フォントサイズ14pxの場合 14px ÷ 320px = 0.04375(4.375%) = 4.375vw
ブラウザのデフォルトフォントサイズは
100% = 16px = 1em = 1rem
本日はCSSについてです。 HTMLからの続きになるので そちらがまだの方はこちらをどうぞ HTMLにの基礎1 HTMLにの基礎2 HTMLにの基礎3 HTMLにの基礎4 CSSとは CSS（Cascading Style Sheets） カスケード・スタイル・シートなどと呼び、ウェブページのスタイルを指定するための言語です。 HTMLなどで作成されるウェブページにスタイルを適用する場合には、 スタイルシート言語の1つであるCSSが一般的に利用されており CSSは、HTMLと組み合わせて使用します。 HTMLがウェブページ内の各要素や情報構造を定義するのに対し CSSではそれをどのように装飾するかを指定します。 例えば、色・サイズ・レイアウトなどの表示スタイルを指定することができます。 HTMLは情報構造を定義するための言語であるので HTMLでは文書構造のみを定義して スタイルについてはスタイルシートで指定することが推奨されています。 CSSを適用する HTML内で文書にスタイルシートを適用するには以下の方法があります。 1.<link>要素で外部CSSファイルを呼び出して適用する 2.<style>要素で文書単位に適用する 3.要素にstyle属性を追加して局所的に適用する 外部CSSファイルを呼び出して適用する スタイルシートを記述したCSSファイルをHTMLファイルとは別で用意して HTML文書の中で呼び出して適応させる方法です。 先ずはCSSファイルを用意しましょう。 以下のソースコードを書いたファイルを用意します。 sample.css p {color:red; } sample.html <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <p>こんにちは、今日は能天気ですね</p> </body> </html> ファイルは同じディレクトリに配置します。 デスクトップなどで行う場合は両方のファイルをデスクトップにおきます。 用意できたらブラウザーでHTMLを見てみましょう。 CSSファイルに書かれたスタイルは p {color:red} となっています。 意味は pタグの色を red にするという意味です。 ソースコードに間違いがなければ文字が赤色になるはずです。 こうしてCSSファイルを分離しておくと デザインと文書構造を切り離すことができ、複数人で共同開発がおこえます。 style要素で文書単位に適用する 外部からCSSファイルを適応せず 直接HTMLの中にスタイルを書き込んでしまう方法です。 head要素にスタイルシートを書き込んでおきます。 スタイルシートの書き方は <style type="text/css">スタイル</style> となります。 sample2.html <html> <head> <style type="text/css"> <!-- p {color:red; } --> </style> </head> <body> <p>またまた能天気</p> </body> </html> 用意できたらブラウザーでHTMLを見てみましょう。 一人で開発する場合であればよく用いられる手法です。 ソースコード書く際にファイルを切り替えなくて済むので こちらの方が楽な場合がありますが ある程度慣れたら、CSSファイルに分離する方法も覚えておきましょう。 要素にstyle属性を追加して局所的に適用する head要素にスタイルを書かずにタグの中で 直接スタイルを指定する方法です。 書き方は <タグ style="スタイル"> sample3.html <html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:red; ">能天気です!!</p> </body> </html> 結果は style属性によるスタイル指定は、部分的にスタイル指定する際などには便利ですが HTMLソースが複雑になり管理が複雑になりがちです。 効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化しましょう。 CSSの書き方 CSSでスタイルを指定する際には、どの部分にどんなスタイルどんな感じで 適応させるのかを指定します。 CSSの各部分には名称がついており、基本的なCSSの書き方は セレクタ {プロパティ名:値;} となります。 セレクタ {プロパティ名:値;}の{から}で囲んだ部分を宣言ブロック（declaration block） プロパティ名と値を:(コロン)で1つにした部分をスタイル宣言（declaration）と呼びます。 セレクタ(selector) セレクタはCSSを適応させる対象のことです。 プロパティ(property) プロパティは適応するスタイルの種類のことで、様々な種類があります。 例えば colorでは色を指定することができます。 値(value) プロパティの値です。プロパティに対して様々な値が用意されています。 複数のスタイルを指定する 一つのセレクタにスタイルを複数指定したい場合は 1つのスタイルの宣言を;で区切ります。 p {color:red; line-height:15px;} コメントの書き方 コメントは一時的にCSSを無効にしたり、CSSソース内にメモを残す際などに使用します。 /*から*/で囲んだ範囲はコメントとなります。 コメント部分はブラウザには無視されます。 コメントの例： p {color:red; line-height:2;} /*段落を赤くして行の高さを2倍にする*/ /* コメントは複数行にすることも可能です。 */ そのほか 大文字、小文字どちらでも区別しませんが 小文字に統一しておいた方が良いでしょう。 まとめ 一般的なCSSの使い方と書き方を押さえておこう。 明日は色々なスタイルについて学んでいきます。 君がエンジニアになるまであと86日 作者の情報 乙pyのHP： http://www.otupy.net/ Youtube： https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw Twitter： https://twitter.com/otupython
本日はCSSについてです。
HTMLからの続きになるので そちらがまだの方はこちらをどうぞ
HTMLにの基礎1 HTMLにの基礎2 HTMLにの基礎3 HTMLにの基礎4
CSS（Cascading Style Sheets） カスケード・スタイル・シートなどと呼び、ウェブページのスタイルを指定するための言語です。
HTMLなどで作成されるウェブページにスタイルを適用する場合には、 スタイルシート言語の1つであるCSSが一般的に利用されており CSSは、HTMLと組み合わせて使用します。
HTMLがウェブページ内の各要素や情報構造を定義するのに対し CSSではそれをどのように装飾するかを指定します。
例えば、色・サイズ・レイアウトなどの表示スタイルを指定することができます。
HTMLは情報構造を定義するための言語であるので HTMLでは文書構造のみを定義して スタイルについてはスタイルシートで指定することが推奨されています。
HTML内で文書にスタイルシートを適用するには以下の方法があります。
1.<link>要素で外部CSSファイルを呼び出して適用する 2.<style>要素で文書単位に適用する 3.要素にstyle属性を追加して局所的に適用する
<link>
<style>
style
スタイルシートを記述したCSSファイルをHTMLファイルとは別で用意して HTML文書の中で呼び出して適応させる方法です。
先ずはCSSファイルを用意しましょう。
以下のソースコードを書いたファイルを用意します。
sample.css
p {color:red; }
sample.html
<html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <p>こんにちは、今日は能天気ですね</p> </body> </html>
ファイルは同じディレクトリに配置します。
デスクトップなどで行う場合は両方のファイルをデスクトップにおきます。
用意できたらブラウザーでHTMLを見てみましょう。
CSSファイルに書かれたスタイルは p {color:red} となっています。
p {color:red}
意味は pタグの色を red にするという意味です。 ソースコードに間違いがなければ文字が赤色になるはずです。
pタグ
こうしてCSSファイルを分離しておくと デザインと文書構造を切り離すことができ、複数人で共同開発がおこえます。
外部からCSSファイルを適応せず 直接HTMLの中にスタイルを書き込んでしまう方法です。
head要素にスタイルシートを書き込んでおきます。
head
スタイルシートの書き方は <style type="text/css">スタイル</style> となります。
<style type="text/css">スタイル</style>
sample2.html
<html> <head> <style type="text/css"> <!-- p {color:red; } --> </style> </head> <body> <p>またまた能天気</p> </body> </html>
一人で開発する場合であればよく用いられる手法です。
ソースコード書く際にファイルを切り替えなくて済むので こちらの方が楽な場合がありますが ある程度慣れたら、CSSファイルに分離する方法も覚えておきましょう。
head要素にスタイルを書かずにタグの中で 直接スタイルを指定する方法です。
書き方は <タグ style="スタイル">
<タグ style="スタイル">
sample3.html
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:red; ">能天気です!!</p> </body> </html>
結果は
style属性によるスタイル指定は、部分的にスタイル指定する際などには便利ですが HTMLソースが複雑になり管理が複雑になりがちです。
効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化しましょう。
CSSでスタイルを指定する際には、どの部分にどんなスタイルどんな感じで 適応させるのかを指定します。
CSSの各部分には名称がついており、基本的なCSSの書き方は セレクタ {プロパティ名:値;} となります。
セレクタ {プロパティ名:値;}
セレクタ {プロパティ名:値;}の{から}で囲んだ部分を宣言ブロック（declaration block） プロパティ名と値を:(コロン)で1つにした部分をスタイル宣言（declaration）と呼びます。
{
}
:
セレクタ(selector)
セレクタはCSSを適応させる対象のことです。
プロパティ(property)
プロパティは適応するスタイルの種類のことで、様々な種類があります。
例えば colorでは色を指定することができます。
color
値(value)
プロパティの値です。プロパティに対して様々な値が用意されています。
複数のスタイルを指定する
一つのセレクタにスタイルを複数指定したい場合は 1つのスタイルの宣言を;で区切ります。
;
p {color:red; line-height:15px;}
コメントの書き方
コメントは一時的にCSSを無効にしたり、CSSソース内にメモを残す際などに使用します。 /*から*/で囲んだ範囲はコメントとなります。 コメント部分はブラウザには無視されます。
/*
*/
コメントの例：
p {color:red; line-height:2;} /*段落を赤くして行の高さを2倍にする*/ /* コメントは複数行にすることも可能です。 */
そのほか
大文字、小文字どちらでも区別しませんが 小文字に統一しておいた方が良いでしょう。
一般的なCSSの使い方と書き方を押さえておこう。
明日は色々なスタイルについて学んでいきます。
君がエンジニアになるまであと86日
乙pyのHP： http://www.otupy.net/
Youtube： https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw
Twitter： https://twitter.com/otupython
See the Pen Frosted glass background by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. テキストの乗っているレイヤーを、擦りガラスで透かしたような表現を作っています。 CSS(Sass) HTMLはごくシンプルなのでCSSの要点箇所について。 body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; } まず body と section:before に同一の背景画像を設定しています。 次に section:before のみにCSSフィルター filter:blur を設定しぼかしています。 section ではなく section:before に背景を設定しているのが要です。 section に blur を設定するとテキストなど中の要素すべてがぼけてしまうため、 section:before にぼかした背景を設定し section 本体の後ろに重ねる形にする手法で実現しています。
See the Pen Frosted glass background by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
テキストの乗っているレイヤーを、擦りガラスで透かしたような表現を作っています。
HTMLはごくシンプルなのでCSSの要点箇所について。
body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; }
まず body と section:before に同一の背景画像を設定しています。
body
section:before
次に section:before のみにCSSフィルター filter:blur を設定しぼかしています。
filter:blur
section ではなく section:before に背景を設定しているのが要です。
section
section に blur を設定するとテキストなど中の要素すべてがぼけてしまうため、 section:before にぼかした背景を設定し section 本体の後ろに重ねる形にする手法で実現しています。
blur
Webサイト制作実践講座（後編）で行ったCSSの初期設定をメモします。 body { margin: 0; background: #ccc; font-size: 12px; } h1, h2, h3 { margin-top: 0; } #wrapper { background: white; width: 960px; margin: 0 auto; } ＊body → marginは0にして全体の余白をなくす(必要なら後でつける) ＊タイトル → トップの余白をなくす(必要なら後でつける) ＊wrapper → margin: 0 auto; で中央揃えにする
Webサイト制作実践講座（後編）で行ったCSSの初期設定をメモします。
body { margin: 0; background: #ccc; font-size: 12px; } h1, h2, h3 { margin-top: 0; } #wrapper { background: white; width: 960px; margin: 0 auto; }
＊body → marginは0にして全体の余白をなくす(必要なら後でつける) ＊タイトル → トップの余白をなくす(必要なら後でつける) ＊wrapper → margin: 0 auto; で中央揃えにする
100日チャレンジの279日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 279日目は、 おはようございます279日目・xdデザインカンプからのサイト模写・メンターさんからの修正をやる#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 2, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 279日目は、
おはようございます279日目・xdデザインカンプからのサイト模写・メンターさんからの修正をやる#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 2, 2020
おはようございます279日目・xdデザインカンプからのサイト模写・メンターさんからの修正をやる#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
