【第13回】プログラミング初心者向けCSS3講座【表示について】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第12回】プログラミング初心者向けCSS3講座【マルチカラムについて】

  

【次回記事】

【第14回】プログラミング初心者向けCSS3講座【ルールについて】

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・表示についてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

表示について

 

今回は表示の方式について学習していきます。

 

 

float

floatとは、画像などの要素の表示する位置を指定するために使用するプロパティとなります。値にはleftやrightなどを指定することで、要素の表示方法を指定できます。その際は、テキストが回り込んで表示されるようになります。

 

回り込み表示を解除するには、clearを使用します。使用方法については以下の通りです。「float」は浮くという意味になります。

 

float:

left; 要素を左側に寄せます。その際、テキストは右側に回り込みます。

right; 要素を右側に寄せます。その際、テキストは左側に回り込みます。

top;

bottom;

block-start;

block-end;

inline-start;

inline-end;

snap-block;

snap-inline;

none; 回り込み表示をいたしません。

 

 

clear

floatで回り込みを指定した際の、回り込みを解除します。floatによる要素のずれを解除する際に使用します。

 

clear:

left; 左側の回り込みのみを解除します。

right; 右側の回り込みのみを解除します。

both; 左右両方の回り込みを解除します。

inherit; 親要素の値を継承します。

none; 回り込みの解除をしません。

 

 

overflow

コンテンツが、その要素の高さ、横幅を超えた際に、スクロールして表示する、表示しない、はみ出して表示する、などを指定することができるプロパティとなります。使用方法は以下の通りです。

 

overflow:

visible; 要素の範囲を超えて、はみ出すようにコンテンツを表示します。

hidden; 要素の範囲を超えた部分のコンテンツは表示しません。

scroll; 要素の範囲を超えたコンテンツは、スクロールで表示します。

auto; 自動で計算して、スクロール表示します。

no-display; コンテンツがはみ出す場合、要素自体を非表示にします。

no-content; コンテンツがはみ出す場合、コンテンツ全体を非表示にします。

 

overflowの値は2個まで指定します。値を1つ指定する場合は、横方向、縦方向ともに反映されます。値を2つ指定する場合には、横方向、縦方向の順に指定されます。

 

overflow-x

overflowの横方向の指定方法となります。使用方法はoverflowと同様となります。

 

 

overflow-y

overflowの縦方向の指定方法となります。使用方法はoverflowと同様となります。

 

 

visibility

要素を表示にするか、非表示にするかを指定します。

 

visibility:

visible; 要素を表示します。

hidden; 要素を非表示にします。

collapse;

テーブルの行や列を非表示にします。折りたたみで表示できるようになります。また、テーブル以外のところで使用すれば、hiddenと同じ意味になる値となります。

 

 

display

要素をどのように表示するかを指定します。

 

 

display:

none; 非表示となります。

inline; インライン表示にします。

block; ブロック表示にします。

list-item; リストアイテムとして表示します。

inline-block;

インラインブロック要素表示とします。

run-in; 後ろに続くブロックの、先頭のインライン要素になります。

compact; 後ろに続くブロックの、左の余白に表示されるボックスになります。

table; table要素に該当します。

table-row-group; tbody要素に該当します。

table-header-group; thead要素に該当します。

table-footer-group; tfoot要素に該当します。

table-row; tr要素に該当します。

table-column-group; colgroup要素に該当します。

table-column; col要素に該当します。

table-cell; th要素、td要素に該当します。

table-caption; caption要素に該当します。

inline-table; インラインテーブルを生成します。

ruby; ruby 要素に該当します。

ruby-base; rb要素に該当します。

ruby-text; rt要素に該当します。

ruby-base-group;もしくはruby-base-conainer;

ルビベースグループ。rbc要素に該当します。

ruby-text-group;もしくはruby-text-container;

ルビテキストグループ。rtc要素に該当します。

flex; フレックスボックスを適用します。

inline-flex; インラインのフレックスボックスを適用します。

 

 

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:displayとfloatの使い方を理解しておこう。

 

ということで第13回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です