パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホの買換えなども整理しました。
特殊なアプリや部品交換等の改造もメモしています。
電子機器として、ブルーレイやドライブレコーダー・・等々。
   

ホームページ作成関連

css 設定の覚書き

基本的なセレクタの書き方など、時々cssを編集した時、思い出せなかったり勘違いしたものをメモしています。

  1. 特定の要素に対してのみ動作するセレクタを「.」ドットで区切り記述
    (例)img.wakusen {border:3px ridge red;}
  2. 複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する
    (例)#sample , h3 , .setumei , p {color: #ff0000;}
  3. 複数のセレクタを半角スペースで区切って、絞り込み指定
    (例)#sample .setumei p {color: #ff0000;}
  4. 奇数/偶数番目の要素だけに適用するセレクタ
    (例)ul li:nth-child(even){background: whitesmoke;}
  5. リンクで使うセレクタ
  6. 画像で使うセレクタ
  7. すべてのブラウザに対応するようにベンダープレフィックスは必要か
    Flexbox で position: sticky; を使用した時の例

特定の要素に対してのみ指定するセレクタを「.」ドットで区切り記述

特定の要素に対してのみ指定するセレクタを「.」ドットで区切り記述します。

下記の例では、img要素 と p要素 に対しセレクタを記述。

css の記述

img.wakusen {border:3px ridge red;}

p.irositei {color: #ff0000;}

この場合要素 に対し、class="・・・"で指定して使用します。

html の記述

<img src="../pasokon/todo-1.png" class="sotowaku">

<p class="irositei">・・・・</p>

のように使用します。

この例の場合は、画像に枠線を描きます。


複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する

複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する

css の記述

#sample , h3 , .setumei , p {color: #ff0000;}

のように使用します。


複数のセレクタを半角スペースで区切って、絞り込み指定

複数のセレクタを半角スペースで区切って、絞り込み指定

css の記述

#sample .setumei p {color: #ff0000;}

sample の中の .setumei の中の p に対してのみ適用されます。


奇数/偶数番目の要素だけに適用するセレクタ

奇数/偶数番目の要素だけに適用するセレクタ

偶数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

偶数番目の要素だけに適用するセレクタ

ul li:nth-child(even){ background: whitesmoke; }


奇数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

奇数番目の要素だけに適用するセレクタ

ul li:nth-child(odd){ background: whitesmoke; }


リンクで使うセレクタ

HTMLで aタグでリンクを作り、さらにCSSでデザインを変える時に使用します。

css の記述

  • a:link {・・・} 未訪問のリンクのスタイル
  • a:hover {・・・} カーソルを上にのせたときのスタイル
  • a:visited {・・・} 訪問済みリンクのスタイル
  • a:active {・・・} クリックした瞬間(ボタンを押し込んだとき)のスタイル

画像で使うセレクタ

画像の上にカーソルをのせたとき少しデザインを変えたりする時に使用します。

css の記述

img:hover {・・・}


すべてのブラウザに対応するようにベンダープレフィックスは必要か

ベンダープレフィックスといえば、-webkit-、-moz-、-ms-、-o- などを思いつきますが、最近はベンダープレフィックスなしでもかなり大丈夫のようです。

ネットの記事を検索すると、ブラウザの最近の新しいバージョンではアップデートで対応もすすんでいるようです。


しかし2019年1月現在、IE10でやっと Flexbox へ対応されましたが、Gridにはまだ対応できていません。

私の場合、右サイドメニューを上下スライド途中で固定させるように
position: sticky; を使用しました。

色々なブラウザで動作させるため、Flexbox の設定にベンダープレフィックスの設定も加えています。

これを加えていない場合上手く動作しませんでした。(2019年1月現在)

css の記述

.container {
  width: 1000px;
  display: -ms-flexbox; /* IE10以下 対応 */
  display: -webkit-box; /* Safari3.1~6.0 対応 */
  display: -webkit-flex; /* Safari6.1 以降 対応 */
  display: flex;
  }


position: sticky;を使用するための設定に、Safariへの対応用ベンダープレフィックスの設定も加えています。

これを加えずに iPad で確認すると動作しませんでしたが、1行追加すると動作します。

css の記述

.side-menu {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  }

上記設定のみでは Internet Explorer 11 で動作しません。(2019年1月現在)

しかし Microsoft Edge では正常に動作します。

polyfill という JavaScript を読み込むことにより動作するようですが、ページの読込み速度が低下する恐れがあるので、極力 JavaScript を使用していません。