親のブロック要素の縦幅は子要素の量に応じて伸縮するし、テキスト要素は親のブロック要素の右端で自動的に改行されるので、子要素が巨大な画像だったり、縦幅を小さく指定したりしない限り、子要素が親のブロック要素をはみ出すことは基本的にない。それらの連続は、一つの半角スペースとして表示される。プロパティで見た目を整えよう。親のブロック要素を右(左も)にはみ出したテキストを「...」のように三点リーダで表示したい場合、ちょっと手間がかかる。以下のように三つのプロパティをセットで指定しなければならない。この場合、三点リーダが表示されるのは親要素の(パディングを含めない)コンテンツ領域内となり、三点リーダの分だけ表示領域をさらに狭めることになる。あかりは、だってあかりは、だってあかりは、主役だよー!!!要素を非表示にHTMLソース中に存在する要素を表示したくない場合がある(コメントアウトするのではなく)。CSSによって要素を非表示にする方法は実にいろいろある。領域やマージンもなかったことになる。領域やマージンは確保される。要素全体を透明化する。領域やマージンは確保される。中身の文字を見えなくする。はみ出した部分を隠す。(以下略)これらの方法は、たとえばモバイル向けなどで一部の要素を非表示にしたりするのに利用されるが......検索エンジンに過剰な情報を提供するために利用された過去があるため、Googleなどはこれらの不適切な利用をSEO(検索エンジン最適化)スパムとみなすので注意。通常のユーザーからは隠し、スクリーンリーダーを利用する視覚障害者などには表示させる方法として使う場合、以下の方法が使える。*/}これはかなり念入りな指定となるが、まず幅と高さをゼロにはしないで、1pxにしておく(1)。はみ出した部分を隠し(2)、さらに1pxの領域から中身が見えないように透明化する(3)。絶対配置にして(4)、左上に張り付かせる(5)。スクリーンリーダーだけに表示(というか音読)させたい要素に“screen-reader-text”というクラス名を付ければOK(クラス名は何でもいい)。●注:疑似ではなく、擬似である。クラスとはCSSを適用するためにHTMLタグに付ける名前の一種であるが、CSSには擬似クラスというものがある。これは、HTMLに記述するクラスではないが、HTML要素の(ページ上の)現在の状態を表し、これをセレクターとしてCSSを記述することができる。いう擬似クラスは、その要素にマウスオーバー(マウスポインターを合わせること)している状態を表す。これにCSSを適用することにより、要素にマウスオーバーしているときだけ別のスタイルを適用することが可能になる。ハイパーリンクの文字列にマウスオーバーすると文字の色が変わったりするのはWeb界の常識であるが、このような擬似クラスが使われているのだ。#999999;}このブログで実際に使っている指定の一部。書いている理由は、リンクでないa要素が存在するため。(フォーム内の要素が無効化されているとき)などの擬似クラスが存在する。擬似クラスセレクターには、必ず頭に「コロン」を付ける。擬似クラスを使いこなすことにより、よりユーザー・フレンドリーなサイトを作ることができる。次に擬似要素だが、これを使うとHTMLタグすらない場所に、CSSを使って要素を挿入することができる。2種類であり、それぞれセレクターで指定した要素の前と後に擬似的な要素を追加し、それにスタイルを適用できる。#9999ff;}※クオーテーションマークはダブルクオーテーションでもいい。擬似要素によって追加されたテキストは、一般的なブラウザではマウスドラッグで選択できないが、スクリーンリーダーでは問題なく読み上げるらしい。