みかづち工房

ドラクエ10(休止中)・ドラクエウォーク・星ドラ・ポケモンGOを楽しんでます。他にも興味のある事をジャンルを問わず気の向くままに書いています。

ウェブカツ

HTML・CSS部入門Lesson11~15@ウェブカツ

投稿日:2018年12月5日 更新日:

こちらで掲載している画像は ウェブカツ の動画内で使われたものを引用しています。

スポンサーリンク

Lesson11「セレクタ」

セレクタの主な種類は上の画像を見て下さい。

スタイルの優先順は上の画像を見て下さい。

今回は文章で書くより見て貰った方が早いので画像のみになります。

Lesson12「ブロックレベル要素とインライン要素」

HTMLで定義されている要素のうち、<body>~</body>の中で使用される要素の多くは、 ブロックレベル要素か、インライン要素に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

こちらの文章はHTMLクイックリファレンスに記載されている文章を引用したものです。

Lesson13「marginとpadding」

「margin」は「border」の外側に領域を設ける為に使用する。インライン要素の「img」には縦のmarginを指定する事は出来ない。指定するにはCSSでブロックレベル要素に変換する。

「padding」は「border」の内側に領域を設ける為に使用する。

Lesson14「単位の指定」

大きさの指定と色の指定がある。

大きさの指定は「px」と「%」が主に使用される。「px」は画像の解像度によって大きさが変わる。「%」は画面のサイズによって大きさが変わる。

色の指定は色の名前が分かれば「red」や「white」等で指定でき、それ以外に「RGBカラー」を16進数で指定します。指定方法は「#000000」~「#FFFFFF」の6桁を指定するかRGBカラーがそれぞれ同じ数字の場合は「#000」の3桁で指定します。もう一つ「RGBaカラー」があり「0,0,0,0」~「255,255,255,1」で指定します。

Lesson15「positionとfloat」

positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。

positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

こちらの文章はHTMLクイックリファレンスに記載されている文章を引用したものです。

floatプロパティを適用された要素はその親要素のコンテンツボックスの左または右に配置される。後続の要素は適用された要素を回り込んで配置される。

スポンサーリンク







-ウェブカツ
-

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

JavaScript・jQuery部入門Lesson8@ウェブカツ

WordPress › エラー

このサイトで重大なエラーが発生しました。

WordPress でのデバッグをさらに詳しく見る。