1. 概略・詳細・リファレンス
概略は「ウィキペディア - CSS」でどうぞ。
詳細やリファレンスは、下記でどうぞ。
「CSS | MDN」
「CSS リファレンス - CSS | MDN」
ここも結構、おすすめ。
「スタイルシートリファレンス（目的別）」
「スタイルシートリファレンス（ABC順）」
2. 基本的な構文
基本的な、構文は
p /* comment */ ← コメントは /* */ のみ
{
color: red;
}
てな感じで記述します。
p は html のタグになりますがこれを CSS では「セレクタ」と言うらしい。
color は色定義の意味になりますが「プロパティ名」、red が実際の色で「プロパティ値」と言うらしい。
3. img を縮小する
画像の表示に使用する img タグ。
基本形は
<img src="ファイル名" alt="ブラウザで表示できないときに表示する文字列" width="幅" height="高さ">
で、幅や高さは指定しなくても構わないが、指定した方が解釈が速くなる分表示が速いということになっています。
画面に収まりきれないような画像を表示する際は、例えば 1000px × 500px の画像を表示させるには 10% で縮小表示させようとすると「width="100px" height="50px"」と記述しないと縦横比が正しく表示されません。
大きな画像の img を記述するたびに電卓をたたいて計算していましたが、スタイルシートで解決する方法があったんですね。
「【CSS】スタイルシートで画像を縦横比そのままにリサイズする方法。」を参考にさせていただきました。
スタイルシートに横の上限を決めさせる場合
img
{
max-width: 100px;
height: auto;
}
スタイルシートに縦の上限を決めさせる場合
img
{
width: auto;
max-height: 50px;
}
このように記述していれば
<img src="ファイル名" width="1000px" height="500px">
と記述している画像がどちらも 100px × 50px で表示されます。
4. HTML 内に CSS を記述するには
こちらは「CSS の記述方法」を参考にさせていただきました（そういう名称のサイトがありましたが、リンク切れになりました。2020年1月10日）。
HTML 内に CSS を記述するには <head> と </head> の間に下記の型式で記述します。
<style type="text/css">
<!--
ここに CSS を記述します
-->
</style>
これはわたしの話ですが、気を付けなければならないのは PHP - smarty のテンプレートで記述している場合、CSS の記述に括弧の文字(「{」「}」 )がはいるので、前後を {literal}～{/literal} でくくらないと PHP でエラーになってしまいます。
5. 画像をウィンドウの固定位置に配置する
これは、あちこちに書かれていたのですが、その通りに書いたつもりでなかなか思うようにならず、試行錯誤の結果、なんとかなりましたが、結局どこの記述が参考になったのかよくわからなくなってしまいました。
結論的に出たものを以前、「索引」に置いてあった広告の画像です。
上記の例では親要素が body になりますが、body には次の指定を行っています。
position: relative;
position: relative; と position: static; は、body タグのみでは違いはわかりませんが、body に含まれる要素に対する影響が違ってくるようです。
で、中の画像の指定ですが
<div style="position: fixed; top: 0; bottom: 0; left: ウィンドウ左端からの距離; margin: auto; width: 画像の幅; height: 画像の高さ;">
<img 画像ファイルの記述>
</div>
と <div> ～ </div> タグで囲んで、position: fixed; (絶対位置かつ固定でという意味だそうです) top と bottom の位置を 0 にして、margin を auto にするとなぜかウィンドウの中央に配置されます。
ブラウザがどういう解釈でこういう動きになるのかはまだ理解できていません(笑)(汗)。
6. link のマウスオーバー時の色を変える
リンク (<a> ～ </a>) の上にマウスがいるときの文字色を変更するには css で
a:hover
{
color: #FFFFFF;
/* 以下略 */
}
3行目：色番号の指定です。black や white のようなキーワードを指定することもできます。
7. img の大きさをデバイスに合わせる
ここのサイトが時々 Google の検索にかかってくれますが、やたら「ページがモバイル フレンドリーではありません。」と書かれています。
これを少しでも「モバイルフレンドリー」にする方法のひとつで min-device-width、max-device-width というのがあります。
これはそのマシンの横幅の最小・最大値のことです。
例えば、大きな画像を表示する場合
@media all and (min-device-width: 800px)
{
img
{
max-width: 800px;
height: auto;
}
}
@media all and (max-device-width: 800px)
{
img
{
max-width: 600px;
height: auto;
}
}
と記述すれば。
横幅最小値が 800px であれば、画像を最大 800px で表示。
横幅最大値が 800px であれば、画像を最大 600px で表示になり、表示するマシンにより画像の最大幅を調整できます。
モバイル等の横幅は「Google Chrome - エミュレーション機能」を使えば、知ることができるし、テストもできます。
ただ、現在はやたら機種が多く、それぞれに横幅が違ってたりするので、すべてに合わせるのは・・・難しいですな。
8. タブのカラム数を指定する
タブ幅を指定できるらしいのです。例えば 4 カラムにするには
-moz-tab-size: 4; /* firefox */
tab-size: 4; /* other */
実験の結果、半角・全角が混じるとちょっと変になりますが、ある程度うまくいくようです。
2017年11月23日時点で、「Edge」は未対応のようです。
