10.CSS abc順
(使ったことがあるCSSと面白いものだけ)


*(アスタリスク)

* { color: red; }

アスタリスク( * )は、すべての要素に適用されます。上記は、文書内のすべての要素を赤字にします。といってもクラス指定などで指定したところはその指定通りになっています。

このように書くと action属性やinput type="text"などは クラス指定でclass="line"
スタイルシートにはこのように書くと * {
 color:red;
}
.line {
 color:#800000;
}
このように表示されます

getでは、長い文章などを送信するのには向いていません。通常postに切り替えます。
action属性:送信先の指定で送信先のURLをcgiの中に書きます。
input type="text":一行テキストボックスを作成する(初期値)。
textareaタグは複数行のテキスト入力欄を作成します。
cols属性:入力欄の横幅で文字数で指定(初期値は20)
rows属性:入力欄の高さを行数で指定(初期値は2)
maxlength属性:入力できる最大文字数を指定
type="submit":type属性の値にsubmitを指定すると、フォームの送信ボタンを作成します。
value属性:ボタンに表示する文字を決めます。このボタンを押すことでメール送信されます。

アスタリスクで全体を指定しても、個々に指定すればそちらが優先されるようです。


@charset(アットマークキャラセットまたはアットマークチャーセット)

@charset "utf-8";

UTF-8:utf-8
シフトJIS:Shift_JIS
EUC:euc-jp

外部スタイルシートファイルの文字コードを指定します。ファイルの先頭行に記述します。

ブラウザは下記の優先順位でCSSファイルの文字コードを判断することが推奨されています。
・HTTPのContent-Typeヘッダにあるcharset情報。
・ファイル先頭のBOM、またはファイル先頭の@charset宣言
・<link charset="">などのメタデータ指定
・スタイルシートやドキュメントが参照する文字コード
・UTF-8

ファイル先頭のBOM
テキストファイルによく使われる文字コード「UTF-8」には「BOM」という仕組みがあります。「BOM」は、「バイトオーダーマーク(Byte Order Mark)」の略でファイルの文字コードが「UTF-8」であることを示します。「BOM」を付ける付けないは自由なので、テキスト保存時に選択できます。「BOM」は付けない方がいいらしいです。(矛盾がありますが無視してください)


background-color(バックグラウンドカラー)

{ background-color:#eef; }

背景に色を指定します。
<body>や<table>だけではなく、<p>・<div>・<span>などの要素にも使えます。

イメージ・デザインの統一、デザイン性の向上、オリジナリティ。赤字やマーカーと同様で目立たせる。文字色が浮き出て立体感がでる。目に優しい色が使える。画像に合う色を適応。rgba()で指定することで透明化も可能。
CSS3では、R、G、Bに透明度α(alpha)を加えたrgba(R、G、B、A)が定義されました。R、G、Bは0~255または0~100%で指定、透明度αは0(完全に透明)~1(完全に不透明)の数値で指定します。#ffffffのような16進数で指定することはできません。

このように書くと <p class="alfa1">背景色に rgba(0,0,255,0.5) を指定、半透明</p>
<p class="alfa2">背景色に rgba(0,0,255,0.1) を指定、薄い透明</p>
<p class="alfa3">背景色に rgba(0,0,255,0) を指定、完全に透明</p>
スタイルシートにはこのように書くと p.alfa1 {
 background-color:rgba(0,0,255,0.5);
}
p.alfa2 {
 background-color:rgba(0,0,255,0.1);
}
p.alfa3 {
 background-color:rgba(0,0,255,0);
}
このように表示されます

背景色に rgba(0,0,255,0.5) を指定、半透明

背景色に rgba(0,0,255,0.1) を指定、薄い透明

背景色に rgba(0,0,255,0) を指定、完全に透明


background-image(バックグラウンドイメージ)

{ background-image:url(image/st10.gif); }
{ background-image:url(https://joywave.net/image/joy.gif); }

背景画像を表示します。
デフォルトは繰り返し表示で、ひとつだけとか、スクロール固定とか設定もできます。
<body>や<table>だけではなく、<p>・<div>・<span>などの要素にも使えます。

背景画像の表示に対して細かな設定ができます。
body {
 background-image:url(image/st10.gif);
 background-position:center center;
 background-repeat: no-repeat;
}
上のように書くと画面の中央に背景として画像1枚だけ表示されます。
その他background-size、background-repeat、background-attachmentなどがあり、設定できます。


border(ボーダー)

{ border:solid 1px blue; }

ボーダーライン(境界線)の線種、太さ、色をまとめて指定します。(書き順に指定はありません)
border:style(border-style) width(border-width) color(border-color)

値は、
style:solid(実線) dotted(点線) dashed(破線) double(二重線)
width:ピクセル(px)以外も使えますが、ピクセルがいいでしょう。
color:#f33(色コード)、色名(red、blueなど)


border-collapse(ボーダーコラプス)

{ border-collapse:collapse; }

隣り合ったテーブルセルの枠線の表示方法を指定します。テーブルを作るときに時々利用します。
collapse:重なり合わせて表示します。
separate:離して表示します。隙間の間隔は border-spacing で調節します。


color(カラー)

.line { color:#800000; }

テキストの色を指定します。上記はクラス指定で「line」と名前を付けたところに適用します。色コードはhtmlでは6桁ですが、スタイルシートは3桁でも使えます。例えば#ff6633の場合、#f63にできます。

<p><span class="line">value属性</span>:ボタンに表示する文字を決めます。このボタンを押すことでメール送信されます。</p>

結果、
value属性:ボタンに表示する文字を決めます。このボタンを押すことでメール送信されます。

他の書き方
{ color: #f00; }:スタイルシートのみ使える3桁の指定
{ color: red; }:ブラウザで名前が定義されている約140色
{ color: rgb(255, 0, 0); }:赤,緑,青の各色を0~255の値で指定
{ color: rgb(100%, 0%, 0%); }:赤,緑,青の各色を0~100%で指定
{ color: rgba(100%, 0%, 0%, 0.5); }:赤,緑,青の各色を0~100%で指定。透明度0~1.0で指定。

CSS3では、R、G、Bに透明度α(alpha)を加えたrgba(R、G、B、A)が定義されました。


display(ディスプレイ)

display:flex;

要素をどのような形式で表示するかを指定します。上記のプロパティ(flex)の部分、たくさんあるので書きあげてみると、

inline:インラインボックスとして表示します。
block:ブロックボックスとして表示します。
list-item:リストアイテムとして表示します。
inline-block:インラインボックスの様に前後で改行されず、ブロックボックスの様に高さ、横幅を指定可能なボックスです。
run-in:状況に応じて、後続のブロックの先頭インライン要素になります。
compact:状況に応じて、後続のブロックの左余白に表示されるボックスになります。
table:テーブル要素。table要素に該当します。
table-row:テーブルの列。tr要素に該当します。
table-column:テーブルの行。col要素に該当します。
table-cell:テーブルのセル。th要素、td要素に該当します。
table-caption:テーブルのキャプション。caption要素に該当します。
inline-table:インラインレベルのテーブルとなる。
ruby:ルビ。ruby要素に該当します。
flex:フレックスコンテナとして表示します。詳細はflexを参照してください。
inline-flex:インラインのフレックスコンテナとして表示します。

などです。
これまでに少しだけですが勉強したのは以下の「flex」だけなので、そちらで説明します。


flex(フレックス)

display:flex;

基礎知識
コンテンツを横に並べるには、初期の時代はテーブルが使用されていました。CSS1~CSS2 の時代には、float:left と clearfix を用いた手法が用いられていましたが、今後は CSS3 で策定中のフレキシブルボックス(フレックスボックス)が主流になると思われます。ただ、CSS3 での仕様が数回変更されていることや、IE でのサポートが遅れたことから、一般的に使用されるには、もう少しだけ時間がかかりそうです。 フレキシブルボックスを用いて、コンテンツを横方向に並べることができます。並べる要素をフレックスアイテム、それを包含する要素をフレックスコンテナと呼びます。display に flex を指定することでフレックスコンテナを作成します。フレックスコンテナの子要素はフレックスアイテムとして扱われます。

例えば、以下のようにサイズの小さな5枚の写真を用意します。

1枚の写真を<div>で囲んで名前も表示すると、


馬刺し
こんな風になります。

写真5枚を同様に処理すると、写真は縦に並んでしまいます。

このように書くと <div class="naka"><img src="image/st18.jpg" alt=""><br>馬刺し</div>
<div class="naka"><img src="image/st19.jpg" alt=""><br>コロッケ</div>
<div class="naka"><img src="image/st20.jpg" alt=""><br>焼売</div>
<div class="naka"><img src="image/st21.jpg" alt=""><br>寿司</div>
<div class="naka"><img src="image/st22.jpg" alt=""><br>うな重</div>

馬刺し

コロッケ

焼売

寿司

うな重
これを横に並べるのが「flex」です。

このように書くと <div class="yoko">
<div class="naka"><img src="image/st18.jpg" alt=""><br>馬刺し</div>
<div class="naka"><img src="image/st19.jpg" alt=""><br>コロッケ</div>
<div class="naka"><img src="image/st20.jpg" alt=""><br>焼売</div>
<div class="naka"><img src="image/st21.jpg" alt=""><br>寿司</div>
<div class="naka"><img src="image/st22.jpg" alt=""><br>うな重</div>
</div>
スタイルシートにはこのように書くと .yoko {
 display:flex;
}
このように表示されます

馬刺し

コロッケ

焼売

寿司

うな重

float(フロート)

float:left;

画像の回り込みにも使いますが、勉強したのは<div>の横配置です。(通常、<div>は改行して終わるため次の<div>は下の配置になります)
floatは一度指定するとず~っと続くため、終了を「clear」で指定します。

float:right;もあります。float:left;の場合はclear:left;、float:right;の場合はclear:right;が必要ですが、clear:both;で両方に対応できます。

<div>の並びには今後「float」ではなく「flex」を使う機会が多くなると思いますので、説明はこのくらいで。


font(フォント)

font: italic bold 16px/150% "MS UI Gothic";

font: style weight size/height family;
フォントのスタイル、(変換)、太さ、サイズ、表示高さ、ファミリ(font-familyを指定)をまとめて指定します。

font: style(font-style) weight(font-weight) size(font-size) height(line-height) family(font-family);

書き方は、
style:normal(通常のフォント)、italic(斜体のフォント)
weight:normal(通常の太さ)、bold(太字)、lighter(より細く)、bolder(より太く)
size:small(少し小さく)、large(少し大きく)、16px(ピクセル単位)、130%(標準に対する比率)
height(行の高さは、size の後に / height で指定):
 16px(行の高さをピクセル単位で)、200%(行の高さを比率で)
family:serif(明朝体など)、sans-serif(ゴシック体など)、cursive(筆記体)、fantasy(装飾の多い文字)、monospace(等倍フォントなど)

フォントをカンマで区切って複数指定すると、最初のものから順に探し、最初に見つかったフォントを利用します。下記の例では、Windows では「メイリオ」が無ければ「MS Pゴシック」、Mac では「ヒラギノ角ゴシック」が無ければ Osaka、いずれも無ければ sans-serif フォントを利用します。

例:(font-familyで書きます)
font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;