苦学楽学塾 ホームページ
最終更新日：2024年12月27日
CSSは、Cascading Style Sheetの略です。日本社会に向けて、世界に向けて、ウェブサイトを制作して伝えたいことがあるとき、伝えたい内容、その構造については、HTMLがその役目を担いますが、レイアウト、文字色、文字のサイズ、画像などの表現の仕方についてはCSSが担う、と役割分担がなされています。20年くらい前は、表現方法も含めて、HTMLだけで実現していました。<FONT>(20年前は、HTMLの解説書ではタグを大文字で書いていました)というタグの属性で、文字色や、文字フォント、文字サイズを指定していましたが、HTMLに機能制限が付き、もともとHTMLについていた表現機能がCSSに移され、<FONT>タグも廃止されてしまいました。苦学楽学塾(20年前のサイト名は"CFV21"でした。今でもディレクトリ名に残っています)では、全てのページの書き替えを余儀なくされました(これだけで2年かかりました)。
タグの属性で表現方法を操作するよりも、CSSに分担させる方が便利なのは確かです。しかも表現方法の幅が格段に広がりました。CSSでは、文字フォント、文字色、文字サイズ、文字の太さのみならず、文字と文字の距離、1行の幅、左端からどれくらい空けるか、表示枠の形状、ラウンドをつけるかどうか、文字と表示枠との間にどれくらい余裕を持たせるか、等々、こと細かに設定することが可能です。それはそれで歓迎すべきことなのですが、1ページを記述する作業量は膨大なものになってしまいました。このページの制作でも、一々、ネット検索してどのように表示させるか調べながらやっている有様です。なので、CSSについて、その全景を書こうとすると、それだけで巨大ウェブサイトになってしまいます。このページでは、CSSの一部だけですが、凝ったサイトでなければ、この程度で充分、というものをまとめました。また、種々のスタイルが影響し合って、思うように表示してくれない、ということが多々あるので注意してください。HTML，CSSで困るのは、仕様がどんどん拡大変更されることです。上述しましたが、考え方そのものも変化してしまうのが困りものです。ブロック要素、インライン要素という分け方も廃止されているそうですが、ここでは、ブロック要素、インライン要素、という書き方で説明します。またここに書かれていても、古いブラウザでは対応していないスタイルもあります。
1．CSSの使い方
CSSは、HTMLのヘッダ内で、<style>～</style>の間に記述することにより利用できます。今は、<style>タグに何もつけないのですが、少し前までは、type属性をつけて、<style type="text/css">とする必要がありました。古いブラウザでは、スタイル記述をコメントアウトする必要もあり、苦学楽学塾のページでは、スタイル設定を、<style type="text/css"><!--と、--></style>の間に記述しています(いずれ<style>～</style>にします)。
苦学楽学塾のページでは、各ページごとに同じCSS設定を記述しているのですが、別ファイルに入れておいて共通に使うこともできます。表示するページと同じディレクトリに、CSSを記述したstyle.cssというファイルが置いてあるのであれば、HTMLヘッダ内に、
<link rel="stylesheet" href="style.css">
と書いておくと、style.cssをブラウザが読み込んでくれます。style.cssの内容を書き換えると、上記が書かれている複数のページの表現を一度に変えることができます。
また、CSSには、@import規則という機能があり、<style>～</style>の間に、url()関数を用いて、
@import url("style.css")
と記述しても、style.cssを読み込んでくれます。
また、HTML内の各タグの記述で、<div style=" ･･････ ">という具合に、style=に続いてスタイルの記述を行うこともできます。ヘッダ内の<style>～</style>の記述と矛盾するような指定がある場合、各タグに付けたstyle=" ･･････ "の方が優先されます。
2．CSSの構造
下記にCSSで設定可能なプロパティを挙げていますが、全てのプロパティが全てのタグで意味を持つわけではありません。有効かどうか試行錯誤が必要です。また、CSS記述の中では、C言語同様に、/* ･･･ */でコメントを入れることができます。以下、項目ごとに説明します。
a．セレクタ
CSSでは、スタイルの対象をセレクタと言います。スタイル記述の基本形は、
セレクタ{property1:value; propery2:value2}
です。セレクタの後ろに中カッコ'{'と'}'で挟んでスタイルを記述します。スタイルは、プロパティの後にコロン':'で隔てて値を書き、複数のプロパティを設定する場合は、セミコロン';'で隔てます。1つのセレクタに複数に分けて設定できますが、同じプロパティに異なる値を指定する場合、前の指定は後の指定で上書きされます。
以下のようなものがセレクタになります。
タグ名 そのタグ名のタグ全てのスタイルを指定します。例えば、
p{font-family:'Meiryo UI'}
とすると、<p>～</p>に書かれた文章は、デフォルトでメイリオ・フォントで表示されます。
.クラス名 クラスのスタイル記述では、クラス名の前にピリオド'.'を付けます。
.blue{color:blue}
このクラスを呼び出すときは、
<p class="blue">
として、class="クラス名"とします。この<p>以降の文字列は青色で表示されます。この方法では、異なるスタイル指定に異なるクラス名をつけておけば、<p style="クラス名">のクラス名を入れ替えれば、色々なスタイルで<p>以降を表示することができます。
#ID名 IDのスタイル記述では、ID名の前にシャープ'#'を付けます。
#red{color:red}
このIDを呼び出すときは、
<span id="red">
として、id="ID名"とします。この<span>以降の文字列は赤色で表示されます。
複数セレクタ 複数のセレクタにまとめて1つのスタイルを設定できます。
div, p, .yellow{background-color:yellow}
とすると、<div>タグも<p>タグも、クラスyellowも、背景色：黄色で表示されます。
タグ名1 タグ名2 2つのタグ名を空白を隔てて書くと、タグ名1の中にあるタグ名2にスタイルを設定します。
div p{font-size:medium}
とすると、<div>～</div>の中にある<p>の文字列表示はmediumサイズの文字で表示されます。
* すべての要素にスタイルを設定します。
div *{color:green}
とすると、<div>～</div>の中にあるすべてのタグについて、文字列は緑色の字で表示されます。
タグ名1 > タグ名2 タグ名1の子要素であるタグ名2にだけスタイルを設定します。タグ名1の孫要素にはスタイルは適用されません。
div > p{background-color:yellow}
とすると、<body>～</body>部分で、
<div><p>あいう<span>えお</span></p></div>
となっている場合、黄色の背景色は、「あいう」にのみつき、「えお」には黄色の背景色はつきません。
タグ名:empty タグ名が空要素だった場合のスタイルを指定します。
td:empty{background-color:cyan}
としておいて、<body>～</body>の中に、
<td></td>
となるところが出てくると、このテーブル内セルは、水色の背景色で表示されます。
:root 文書のルート要素<html>にスタイルを指定します。CSS変数(変数名の先頭にハイフン'-'を2文字付けます)を定義する場合に使います。例えば、
:root{--margin-top:2px}
.solid_frame{border:solid var(--margin-top) red;width:140px;height:60px;margin-top:var(--margin-top)}
としておいて、<body>～</body>の中で、
<div class="solid_frame"><p>solid枠です。</p></div>
とすると、2px幅の実線で、上側に2pxの余裕をとって矩形枠を表示します。こうしておくと、:rootの2pxを3pxにすると、var(--margin-top)としているところは全て3pxに変わります。
a:link 未訪問のリンクにスタイルを設定します。
a:visited 既訪問のリンクにスタイルを設定します。
a:active マウス押下したリンクにスタイルを設定します。
a:hover マウスが上に来たリンクにスタイルを設定します。閲覧者がリンクであることを認識し易くなります。
タグ名:focus フォーカスされたタグ名にスタイルを設定します。outlineプロパティを使ってボタンを目立たせるのに使います。
b．ボックス要素とインライン要素
CSSで扱う要素には、基本的にボックス要素とインライン要素があります。ボックス要素は、表示枠のようなもので、幅、高さ、という属性を持ちます。ボックス要素を表示するのに当たり、自動的に前後に改行が入り、基本的に上から下に向ってレイアウトされて行きます。text-align，vertical-alignのような配置の指示は無視されます(<table>では有効です)。<div>，<p>，<table>のようなタグが、ブロック要素です。
インライン要素は、表示枠の中で、前後で改行されず、原則、左から右に向って表示されていきます。<img>を除き、幅という属性はありません。1行に収まらなくなると、自動的に改行されます。<span>，<img>，<a>のようなタグがインライン要素です。
ですが、ブロック要素なのに、インライン要素のように表示したい、という局面があります。そこで、displayというプロパティを用いて、ブロック要素に、display:inline-blockと設定したりします。また、ブロック要素に上端揃え、下端揃えを指示するために、ブロック要素にdisplay:table，display:table-cellを設定したりします。
このために、原則が乱れ、表示が複雑になっています。なかなか解説書に書いてある通りに表示してくれません。期待通りに表示できるか、試行錯誤が必要になっています。
c．色の指定
CSSの中には、文字色、枠色、背景色など、色の指定を必要とするところがあります。色の指定方法はほぼ共通です。指定の仕方は大きく3通りあります。1つは色を言葉で指定するものです。白はwhite，黒はblack，赤はred，緑はgreen，青はblueという具合に指定します。
{color:red}
というスタイルで文字を表示すると赤い文字になります。背景色background-colorにredを指定すれば背景色は赤になります。色を指定する言葉は、150種類くらいあり、とても書ききれないので、ネット検索してみてください。
色を指定する2つめの方法は、16進数で指定する方法です。赤、緑、青の強さを0～255(16進数では00～ff)の範囲で指定します。例えば、limegreenという色を背景色に指定するのであれば、赤が50(16進で32)，緑が205(16進でcd)，青が50(16進で32)なので、'#'を付けて、赤、緑、青の順に、
{background-color:#32cd32}
というように指定します。なお、16進3桁で、#d4aとすると、#dd44aaと見なされます。
3つめの方法は、rgb()関数を使うものです。赤、緑、青の強度を、0～255の数値、あるいは、0～100%で指定します。rgb(255, 0, 0)，rgb(100%, 0, 0)とすると、赤になります。場合によっては、透明度もつけて、rgba()関数で指定することもあります。rgba(0, 255, 0, 0.3)とすると、緑ですが、4番目の引数で、0のとき完全透明、1(あるいは100%)のとき完全不透明として、透明度を指定します。
d．長さの数値の指定
width，height，line-height，margin，border-widthなど長さを指定するところでは、ほぼ共通の指定方法になります。いろいろな単位で指定できるのですが、画面の解像度の影響を受けますが、基本的に画面の1ピクセルをもとにした単位pxを用いるのが良いように思います。他にも、cm，mm，in(インチ)，pt(ポイント)なども可能です。
また、text-indentなど、場合によっては、文字の単位で指定する場合もあります。1文字分のサイズを1emとします。通常は、1文字分に16pxとるので、1em=16pxです。同様の単位remを使うこともあります。
親表示枠のサイズに対する割合を%単位で指定することもあります。
e．スタイルの継承、優先順位
例えば、<div>あいう<p>えお</p><.div>というようになっているときに、親タグの<div>に、例えば、{color:red}のようなスタイルを指定すると、「あいう」は赤色文字で表示されますが、子タグの<p>タグに文字色をしなくても、「えお」は赤色文字で表示されます。これを、継承と言います。全てのプロパティが継承されるわけではないので注意してください。
同一のプロパティに異なる値が指定された場合、タグに、style=" ･･････ "として指定されたスタイルが最優先されます。次に、ヘッダ内の<style>～</style>に設定されたスタイルが、外部ファイルから読み込まれたスタイルよりも優先されます。ヘッダ内の<style>～</style>に複数の指定がある場合には、後の方が優先されます。
どうしても優先したいスタイルの場合には、値の後に"!important"をつけると、最優先されます。
f．メディアクエリ
パソコンの大きな画面とスマホの小さな画面とで、表示方法を切り替える必要がある場合があります。特にGoogle検索では、検索順位を決めるのに、スマホでも表示できるか、ということを重視しているようで、Googleメールに改善要求のメールが届きます。図や長い数式の表示があるので、苦学楽学塾では、当初は、スマホは対象外とすることにしていましたが、あまりにうるさく言ってくるので、不充分ですが、2023年度に@media規則を用いるメディアクエリで対応しました。苦学楽学塾のほとんどのページはスマホでも読めると思います。
@media規則は本来は、出力媒体が、ディスプレイか、プリンタか、点字か、ということに対応するための技術ですが、@media規則を用いると、画面の幅に対応して異なるスタイルで表示することができます。<style>～</style>内で、
@media screen and (max-width:760px){ ･･････ }
とすると、{ ･･････ }を、画面であって、最大幅760px(もっと小さい幅でも分けるべきだと思いますが、苦学楽学塾には、500pxを越える幅の図もあるので妥協しました)までの画面、つまり、スマホとかパッドに対する場合のスタイル記述、として指定することができます(もっと細かく設定することができます)。CSSでは、同じプロパティに対して、複数の設定を行うと、後続の指定が前の指定を上書きしていくので、最初に一般的なパソコン画面でのスタイル設定を行い、最後に上記の@mediaを入れておくと、スマホでは、ここの記述が採用されます。
3．表示枠のスタイル
width，height 表示枠の幅、高さを指定します。幅140px，高さ60pxであれば、
.box{width:140px;height:60px}
のように指定します。表示枠のサイズは固定です。
max-width，max-height 表示枠の最大幅、最大高さを指定します。最大幅200px，最大高さ240pxであれば、
.box{max-width:200px;max-height:240px}
のように指定します。表示内容に必要なサイズの幅、高さをとって表示するのですが、内容が表示幅の最大値に達すると、改行します。内容が表示高さの最大値に達すると、枠からはみ出して表示します。
min-width，min-height 表示枠の最小幅、最小高さを指定します。最小幅100px，最小高さ40pxであれば、
.box{max-width:100px;max-height:40px}
のように指定します。
border 表示枠の形状、枠幅、枠色を四辺まとめて設定します。枠形状は、none(枠を表示しない)，solid(実線)，dotted(点線)，dashed(破線)，double(二重線)，groove(くぼんだ線)，ridge(突起線)などが指定できます。
.solid_frame{border:none 2px red;width:140px;height:60px}
画面上に枠領域を取るだけで枠を表示しません。
.solid_frame{border:solid 2px red;width:140px;height:60px}
枠幅2px，赤色枠、実線で枠を表示します。
.dotted_frame{border:dotted 2px red;width:140px;height:60px}
枠幅2px，赤色枠、点線で枠を表示します。
.dashed_frame{border:dashed 2px red;width:140px;height:60px}
枠幅2px，赤色枠、破線で枠を表示します。
.double_frame{border:double 6px red;width:140px;height:60px}
枠幅2px，赤色枠、二重線で枠を表示します。
.groove_frame{border:groove 8px white;width:140px;height:60px}
枠幅2px，白色枠、くぼんだ線で枠を表示します。
.ridge_frame{border:ridge 8px white;width:140px;height:60px}
枠幅2px，白色枠、突起線で枠を表示します。
.inset_frame{border:inset 8px white;width:140px;height:60px}
枠幅2px，白色枠、陥没線で枠を表示します。
.outset_frame{border:outset 8px white;width:140px;height:60px}
枠幅2px，白色枠、隆起線で枠を表示します。
なお、枠形状だけを実線に設定するなら、{border-style:solid}，枠幅だけを2pxに設定するなら、{border-width:2px}，枠色だけを赤に設定するなら、{border-color:red}とします。さらに、枠形状、枠幅、枠色を上辺、右辺、下辺、左辺をこの順に別々に設定するなら、{border-style:solid dashed none dotted}，{border-width:1px 2px 3px 4px}，{border-color:red orange pink yellow}とします。上辺(border-top)だけ枠色を赤に設定するなら、{border-top-color:red}とします。右辺(border-right)、下辺(border-bottom)，左辺(border-left)も同様です。枠形状、枠幅も同様に一つの辺だけに設定できます。
border-radius 枠の4つの角にラウンドを付けます。ラウンドの半径を指定します。
.frame_round{border:solid 2px white;width:140px;height:60px; border-radius:8px}
4つの角に半径8pxのラウンドを付けます。左上、右上、右下、左下のラウンドをこの順に別々に設定するなら、
.frame_each_round{border:solid 2px white;width:140px;height:60px; border-radius:8px 12px 16px 20px}
のように設定します。左上だけにラウンドを付けるのであれば、{border-top-left-radius:8px}とします。右上(border-top-right)，右下(border-bottom-right)，左下(border-bottom-left)も同様です。
margin 表示枠周囲の余裕を指定します。上下左右に10pxの余裕を確保するのであれば、
.box{max-width:100px;max-height:40px;margin:10px}
のように指定します。表示枠周囲の余裕を上側、右側、下側、左側にこの順に別々に設定するのであれば、
.box{max-width:100px;max-height:40px;margin:10px 20px 30px 40px}
のように指定します。上側だけに設定するのであれば、{margin-top:10px}とします。右側(margin-right)，下側(margin-bottom)，左側(margin-left)も同様です。
padding 表示枠と内容との間の間隔を指定します。上下左右に10pxの間隔を確保するのであれば、
.box{max-width:100px;max-height:40px;padding:10px}
のように指定します。表示枠と内容の間隔を上側、右側、下側、左側にこの順に別々に設定するのであれば、
.box{max-width:100px;max-height:40px;padding:10px 20px 30px 40px}
のように指定します。上側だけに設定するのであれば、{padding-top:10px}とします。右側(padding-right)，下側(padding-bottom)，左側(padding-left)も同様です。
outline ボタンや入力枠にフォーカスを当てたときに、元々の枠の外に表示する枠の形状、幅、色をこの順に設定します。形状は、borderと同様に指定します。幅は、thin，medium，thickのいずれか、あるいは数値で指定します。
outline-offset outlineとborderの間隔を数値で指定します。
resize ボックスのサイズ変更の可否を指定します。horizontal(横方向)，vertical(縦方向)，both(両方)を指定します。
box-shadow ボックスに影を表示します。影の水平方向オフセット、垂直方向オフセット、ぼかし半径(省略すると0，ぼかしなし)、広がり(省略すると0，広がりなし)をこの順に数値で指定し、最後に色を指定します。
z-index ボックスの上下関係を番号で指定します。番号が大きいほど手前に表示されます。
visibility ボックスの可視・不可視を設定します。visible(可視)，hidden(不可視)を指定します。{box-shadow:3px 5px 10px 2px gray}というように指定します。
4．文字のスタイル
color 文字色を指定します。{color:red}とすると、赤い文字で表示します。
font-family 文字フォントを指定します。{font-family:'Meiryo UI'}のように指定します。font-familyに指定する代表的なフォントを以下(他にもたくさんあります。CSS font-familyで検索してみてください)に掲げます。
汎用的な半角フォント
serif 日本語では、明朝系になるフォントです。
sans-serif 日本語では、ゴシック系になるフォントです。
Georgia 日本語では、明朝系になるフォントです。
'Times New Roman' 日本語では、明朝系になるフォントです。
Arial 日本語では、ゴシック系になるフォントです。
Courier 日本語では、ゴシック系になるフォントです。
Windows用半角フォント
Euclid 日本語では、明朝系になるフォントです。
Impact 日本語では、ゴシック系になるフォントです。
Century 日本語では、明朝系になるフォントです。
Century Gothic 日本語では、ゴシック系になるフォントです。
Windows用全角明朝体フォント
'ＭＳ 明朝'
'Yu Mincho'
'BIZ UD明朝 Medium'
HG明朝E
Windows用全角ゴシック・フォント
Meiryo
'MS Gothic'
'Yu Gothic'
'BIZ UDGothic'
HGｺﾞｼｯｸE
font-size 文字サイズを指定します。xx-large，x-large，large，medium，small，x-small，xx-smallの7段階あります。{font-size:large}のように指定します。数値指定することも可能です。インターネット上では、medium指定するのと同じですが、{font-size:16px}とするのが標準のようです。Times New Romanのような小さめのフォントでは、{font-size:18px}くらいでちょうどよいと思います。
font-weight 文字の太さを指定します。100，200，300，400，500，600，700，800，900の9段階あります。{font-weight:600}のように指定します。{font-weight:bold}とすると、font-weight:700と同じです。{font-weight:normal}とすると、font-weight:400と同じです。
font-style イタリック(斜体)にするかどうかを指定します。対応していないフォントもあるので注意してください。{font-style:italic}とすると、イタリック体で表示します。
line-height 行の高さを指定します。数値を指定すると、文字のサイズ×数値が行の高さになります。細かく設定するのであれば%単位で設定します。120%ではかなり詰まって見づらくなります。200%ではかなり間延びした感じです。
font font-style，font-weight，font-size，line-height，font-familyをまもとめて指定できます。{font:italic 600 large 150% 'Meiryo UI'}のように指定します。
text-decoration 傍線を設定します。位置、線種、色、太さをこの順に設定します。位置は、underline(下線)，overline(上線)，line-through(中央線、取り消し線に使います)が指定できます。線種は、solid(実線)，double(2重線)，dotted(点線)，dashed(破線)，wavy(波線)を指定できます。と指定します。太さはpx単位で設定するか、autoを指定します。黄色の下線を、波線で、太さ2pxで引くのであれば、文字列の位置の<span>要素に、<span style="text-decoration:underline wavy yellow 2px">文字列</span>と指定します。
text-emphasis 傍点を設定します。白い点を文字の上に表示する場合、<span style="text-emphasis:dot white">文字列</span>と指定します。
text-shadow 文字に影を付けます。カンマで区切って複数の影を指定することができます。<span style="font-size:xx-large;color:red;text-shadow:1px 1px 0px white, 3px 3px 2px pink">影を付ける</span>と指定すると、赤い文字に、細い白い影を付け、さらにやや太いピンクの影を付けます。
text-align 文字列を入れるボックスに、文字列表示の左詰め(left)、右詰め(right)、中央揃え(senter)を指定します。指定しないと左詰めで表示します。右詰めにする場合、{text-align:right}，中央揃えにする場合、{text-align:center}とします。
vertical-align 文字列表示の上揃え(top)，下揃え(bottom)，中央揃え(middle)を指定するのですが、親要素がテーブルでない(例えば<div>)と設定できません。<div>に対して指定する場合には、裏技を使います。親の<div>にdisplay:tableを設定し、文字列、例えば<span>に、<span style="display:table-cell;vertical-align:bottom">文字列</span>という具合に指定します。指定しなければ、上揃えで表示します。
text-indent 文字列の1行目の字下げを設定します。1行目を1文字分(1em)字下げするのであれば、{text-indent:1em}と設定します。逆に2行目以降を1文字分下げるのであれば、{text-indent:-1em}と設定します。
letter-spacing 文字列表示の文字間隔を設定します。1文字の1/10の間隔を取るなら、{letter-spacing:0.1em}と指定します。
writing-mode 文字列を縦書きにするときに使います。ボックス内で、縦書きで右から左に書いていく場合には、{writing-mode:vertical-rl}と指定します。
text-combine-upright 文字列を縦書きにする場合に、2～4桁の数字や英文字を横書きにして入れる場合に使います。「平成31年12月５日」を縦書きにする場合に、31と12を横書きにしたければ、
<div style="border:solid 2px cyan;width:100px;height:300px;writing-mode:vertical-rl">よろしくお願い致します。<br><br>平成<span style="text-combine-upright:all">31</span>年<span style="text-combine-upright:all">12</span>月５日</div>
という具合にします。
list-style-type HTMLの<ol>タグ、<ul>タグに、リストのマーカー表示方法を設定します。以下を設定可能です。disc(中を塗りつぶされた円)，circle(中空の円)，square(中か塗りつぶされた四角)，decimal(1．，2．，3．，･･･)，decimal-leading-zero(00，01，02，･･･)，upper-roman(Ⅰ，Ⅱ，Ⅲ，･･･)，lower-roman(i，ii，iii，･･･)，upper-alpha(大文字A，B，C，･･･)，lower-alpha(a，b，c，･･･)，upper-greek(Α，Β，Γ，･･･)，lower-greek(α，β，γ，･･･)，cjk-ideographic(一，二，三，･･･)，hiragana(あ、い、う、･･･)，katakana(ア、イ、ウ、･･･)，hiragana-iroha(い、ろ、は、･･･)，katakana-iroha(イ，ロ，ハ，･･･)
中を塗りつぶされた円をマーカーにするのであれば、<ul style="list-style-type:disc"><li>東京都</li><li>神奈川県</li><li>埼玉県</li><li>千葉県</li></ul>のように指定すると、
●東京都
●神奈川県
●埼玉県
●千葉県
のように表示されます。
caret-color テキスト入力枠のキャレットの色を指定します。
5．テーブルのスタイル
table-layout テーブルのレイアウト方法を指定します。auto(ブラウザが各列の横幅を最適に表示します)，fixed(1行目の幅指定で表示します)
border-collapse テーブル内隣接セルの境界線の処理方法を指定します。collapse(隣接するセルの境界線を重ねます)，separate(隣接するセルの境界線を分離して表示します)
border-spacing border-collapse:separateが設定されている場合に、セル同士の間隔を指定します。数値を1つ設定した場合は、上下左右の間隔、数値を2つ設定した場合は、最初の数値が上下の間隔、2番目の数値は左右の間隔になります。
caption-side テーブルのキャプション(題名)をどこに表示するかを指定します。top(表組の上側)，bottom(表組の下側)を指定します。
6．背景のスタイル
background-color 背景色を指定します。bodyタグに設定すれば画面の背景色、tableタグ、thタグ、trタグ、tdタグ、divタグに設定すれば矩形枠の背景色、spanタグ、pタグに設定すれば文字の背景色を設定できます。
background-image 背景画像を指定します。url関数を用いて画像の存在位置を設定します。
opacity 透明度を指定します。ボックス要素に対して指定すると、背景色が透過し、後ろ側が見えるようになります。数値は、0.0(完全透明)～1.0(完全不透明)の範囲で指定します。背景色を橙色、透明度0.3に設定する場合には、<div style="background-color:orange;opacity:0.3">と指定します。
7．配置方法に関するスタイル
columns 段組みの列数、列幅を指定します。10文字ずつの3つの段組みであれば、{columns:10em 3}と指定します。但し、無駄を生じないように、目一杯の幅で表示されます。列数(column-count)だけ、列幅(column-width)だけ、を指定することもできます。{column-count:3}とし、{column-width:auto}とすると、段組みの幅は自動的に計算されます。逆に、段組みの幅を指定して、段組みの数を自動的に計算させることもできます。
column-gap 段組みの間隔を設定します。4文字分の間隔をとるのであれば、{column-gap:4em}と指定します。指定しないと、1emとして表示されます。
display 表示枠内で要素をどのように配置するかを指定します。以下のようなものが指定可能です。
none noneを設定すると、子要素も含めて表示しなくなります。
inline <div>のようなボックス要素を前後で改行させず、inline要素として表示します。子要素には、幅、高さの指定ができなくなります。
block <img>のようなinline要素を前後で改行させるブロック・ボックスとして表示します。縦方向に配置されていきます。配置の指定ができなくなります。
inline-block それ自身がinline要素のように表示しますが、幅、高さが設定できます。
table <div>のようなボックス要素をテーブルを構成する要素であるかのように表示します。
table-cell <div>の中ではvertical-alignが設定できないのですが、親の<div>にdisplay:tableを設定すると、その中の子要素の<div>にdisplay:table-cellを設定すれば、この<div>にvertical-alignを設定できるようになります。
inline-table ブロック要素であるテーブルを、前後で改行させず、それ自身がinline要素のように横に並べて表示できるようになります。
flex 子要素が<div>のようなブロック要素であっても、inline要素であるかのように横に整列して表示してくれます。
inline-flex 子要素が<div>のようなブロック要素であっても、それ自身がinline要素であるかのように横に整列して表示しますが、justify-contentや、align-contentの制御が効かなくなります。
grid 表示枠内に境界線を引き、上側表示枠を1，その下の横境界線に2，3，･･･と番号を付け、左側表示枠を1，その右の縦境界線に2，3，･･･と番号を付け、碁盤目の位置を指定するのと同様に、横、縦の境界線の番号で位置を指定し、表示枠内の各領域を、左上の位置と右下の位置を指定して確保していく、という表示方法です。例えば、背景色灰色、幅600px，高さ800pxの表示枠内を縦方向に4つに区切り(境界線は上端下端を含めて5本)、横方向に4つに区切り(境界線は左端右端を含めて5本)、表示枠内を幾つかの領域に分けることを考えます。
表示枠には以下のように設定します。
<div style="display:grid;width:600px;height:800px;background-color:#202020;grid-template-columns:10% 30% 40% auto;grid-template-rows:5% 60% 10% auto">
ここでは、grid-template-columnsに、縦境界線で隔てられた間隔を表示枠に対する%値で、左から順に10%，30%，40%と指定しています。最後の間隔はブラウザに任せるのでautoを指定しています。10%，30%，40%を、fr単位で、1fr 3fr 4frと比率で指定することも、px単位で指定することもできます。同じ間隔で18個の間隔を作るのであれば、繰り返し関数repeat()を用いて、repeat(18, 1fr)とすることもできます。同様に、grid-template-rowsに、横境界線で隔てられた間隔を表示枠に対する%値で、上から順に、5%，60%，10%，autoと指定しています。
2番目の横境界線と3番目の縦境界線の交点を(2, 3)のように表すと、左上を(1, 1)，右下を(2, 5)とする子の<div>枠を、親の表示枠の中に作る場合は、
<div style="grid-area:1/1/2/5;background-color:#443322">あいう</div>
という具合に、'/'で1，1，2，5を区切ってgrid-areaに指定します。枠内には「あいう」という文字列が表示されます。
inline-grid inline方向にグリッド枠が形成されます。
flex-wrap 表示枠にdiplay:flexを指定した場合、表示枠右端に達して折り返す方法を指定します。通常はwrapを指定します。nowrapとすると、表示枠からあふれる場合があります。{display:flex;flex:wrap}とすると、あふれる分は、次の行に表示します。
flex-grow 表示枠にdiplay:flexを指定した場合、表示枠に余裕がある場合、指定する数値に従って表示要素を拡大して表示します。
flex-shrink 表示枠にdiplay:flexを指定した場合、スマホの表示枠に入りきらなくなることがあります。ここで指定する数値に従って縮小して表示します。画像など縮小して見えなくなってしまう場合には、{display:flex;flex-shrink:0}とすると、縮小せず、スクロール表示になります。
justify-content 表示枠にdisplay:flexを指定し、{justify-content:flex-start}とすると左揃え(デフォルト)、{justify-content:flex-end}とすると右揃え、{justify-content:center}とすると中央揃え、{justify-content:space-between}とすると左端は左揃え右端は右揃えその間は均等割り付け、{justify-content:space-around}とするとすべて均等割り付け、で表示します。
align-content 表示枠にdisplay:flexを指定し、{align-content:flex-start}とすると上端揃え(デフォルト)、{align-content:flex-end}とすると下端揃え、{align-content:center}とすると中央揃え、{align-content:space-between}とすると上側は上端に下側は下端にその間は均等割り付け、{align-content:space-around}とするとすべて均等割り付け、で表示します。
grid-template-columns 表示枠にdisplay:gridを指定した場合に、縦境界線で隔てられた間隔を左から順に設定します。表示枠の幅に対する%値で設定することも、fr単位で、1fr 3fr 4frと比率で指定することも、px単位で指定することもできます。repeat()関数を使って、同じ幅で10個指定するのであれば、repeat(10, 1fr)というように指定することもできます。autoを指定して、ブラウザに委ねることもできます。
grid-template-rows 表示枠にdisplay:gridを指定した場合に、横境界線で隔てられた間隔を上から順に設定します。表示枠の高さに対する%値で設定することも、fr単位で、1fr 3fr 4frと比率で指定することも、px単位で指定することもできます。repeat()関数を使って、同じ幅で10個指定するのであれば、repeat(10, 1fr)というように指定することもできます。autoを指定して、ブラウザに委ねることもできます。
grid-area 親表示枠にdisplay:gridを指定した場合に、親表示枠内に、子の表示枠を作ります。grid-template-columns，grid-template-rowsで設定した境界線の番号(上端を1として、その下の境界線を2，3，･･･，左端を1として、その右の境界線を2，3，･･･)で、子の表示枠の左上、右下の位置を指定します。上から2番目の境界線と、左から3番目の境界線の交点を左上、上から4番目の境界線と、左から5番目の境界線の交点を右下とする表示枠を作るのであれば、2，3，4，5を'/'で区切って、<div style="grid-area:2/3/4/5">というように指定します。
gap display:flexあるいは、display:gridを設定したときに、各要素間の間隔を指定します。横方向の間隔と縦方向の間隔を2つの数値で指定します。横方向に20px，縦方向に30pxの間隔をとるのであれば、{display:flex;gap 20px 30px}のように指定します。横方向だけ設定するのであれば{row-gap:20px}，縦方向だけを設定するのであれば{column-gap:30px}のように設定します。
position 何も指定しなければ、ブラウザは、<div>タグを上から下に向って配置していきます。このデフォルトの配置方法は、{position:static}です。親表示枠の<div>に{position:reltive}を指定し、子表示枠を、<div style="possition:absolute;top:20px;left:30px}とすると、親表示枠の左上隅から下20px，右30pxの位置を左上隅として子表示枠を表示します。
<div style="possition:fixed;top:20px;left:30px}とすると、最初に、(親表示枠ではなく)現画面の左上隅から下20px，右30pxの位置を左上隅として子表示枠を表示するのですが、スクロールしても動きません。「Topに戻る」ボタンに利用できます。<div style="possition:sticky;top:20px;left:30px}とすると、最初は、ブラウザの配置する位置になるのですが、隠れてしまう限界位置までスクロールしたときに流れずに動かなくなります。スクロールしても流れずに表示継続してほしいメニューの表示などに利用できます。
top，right，bottom，left 表示枠に、position:absolute，position:stickyを指定した場合には親表示枠、postition:fixedを指定した場合には画面に対して、上端から下方向にどれくらい離れているかをtop，左端右方向にどれくらい離れているかをleft，右端から左方向にどれくらい離れているかをright，下端から上方向にどれくらい離れているかをbottomに指定します。<div style="possition:absolute;top:20px;left:30px}とすると、親表示枠の左上隅から下20px，右30pxの位置を左上隅として子表示枠を表示します。
float 幅・高さが指定されている<div>，あるいは、<img>，<table>などのブロック要素を表示する場合に、画面または親表示枠の左側に表示して文字列などのinline要素を右側に回り込ませる(float:leftを指定)のか、画面または表示枠の右側に表示して文字列などのinlineを左側に回り込ませる(float:rightを指定)のか、を指定します。float:noneを指定すると、文字の回り込み表示をせず、文字列などのinline要素は、ブロック要素の下に表示されます。
clear float指定による文字の回り込みを解除します。clear:leftとすると、左寄せで表示されているブロック要素の下側に文字列などのinline要素を表示します。clear:rightとすると、右寄せで表示されているブロック要素の下側に文字列などのinline要素を表示します。clear:bothとすると、どちら側に寄せられているブロック要素に対しても、その下側に文字列などのinline要素を表示します。改行をする<br>タグ、<hr>タグ、<div>タグ、<p>タグなどに設定します。
shape-outside float指定を行うブロック要素に対して、回り込みの形状を指定します。margin-box(marginに沿って回り込む)，border-box(borderに沿って回り込む)，padding-box(paddingに沿って回り込む)，content-box(contentに沿って回り込む)を指定できます。なお、circle()関数(引数に円の半径を指定)、ellipse()関数(引数にx軸方向の半径、y軸方向の半径を指定)、polygon()関数(引数に多角形の頂点の座標を指定)を指定可能です。
shape-margin shape-outsideを指定する場合に、marginを数値で指定します。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。