ボックスにマウスが重なった時に a 要素全体を半透明にすると、 ボックスが光ったような効果を与えることができる。 半透明は「 opacity 」プロパティで指定できる。 ◉ 書き方 opacity : 値 ; ※値について 値の部分には0.0～1.0までの数値で不透明度を指定。…
◉ vertical-align プロパティ 行の中で、テキストや画像などの縦方向の位置揃えを指定することができる。 ◉指定できる値 ⚫︎ baseline 適用した要素のベースラインを親要素のベースラインに揃える。初期値。 例Example.baseline ⚫︎ top 上端揃え。 例Example.…
インライン要素（<p>など）のボックスは、 ブロックレベル要素 （<a>など）のボックスとは、違った特徴を持っている。 ◉ インライン要素の主な特徴 ● width height プロパティを設定することができない。 仮に指定しても無視される。 ●インライン要素のボックスは</a></p>…
id 属性はページ内の固有の要素を示すもであるため、 １つの HTML ページ内に同じ id 名は1度しか使えない。 このようなルールを持っているのは、 CSS の id セレクタで装飾するためだけでなく、 ページ内リンクなどにも id 属性が利用されるためである。 例…
text-decoration プロパティは 主にテキストに下線を表示するために使用するが、 そのほかにも、自由に設定できるものがある。 ◉text-decoration に指定できる値 ● underline テキストに下線をつける。 underline: 下線が付く。 ● overline テキストに上線を…
擬似クラスを使って、ある要素の中の任意のn番目の要素にのみ、 CSSを指定することができる。 ◉基本 ● :first-child ある要素内で最初の要素 ● :last-child ある要素内で最後の要素 ● :nth-child(n) ある要素内で最初からn番目の要素 ● :nth-last-child(n) …
◉ ベンダープレフィックス "Google Chrome" や "Mozilla Firefox"、"Safari" といった様々なブラウザの ベンダーがＣＳＳ３の拡張機能を実装するのに使用する識別子のこと。 プレフィックス(Prefix)とは「接頭辞」という意味。 ＣＳＳ３のプロパティの接頭辞…
ボックスに width プロパティや height プロパティの値を指定した場合に、 それらは要素の内容（赤枠内部）の横幅、縦幅を表している。 これは、ブラウザの基準値では、 「 box-sizing 」プロパティの値に、「 content-box 」が指定されているため。 ◉ box-s…
◉ background-position background-image プロパティで指定した画像の 開始位置を指定することのできるプロパティ。 横方向、縦方向の順で、スペース区切りで値を指定する。 EX) body { background-image : url ( " ../images/01.png"); backgroun-repeat: n…
◉ background-image background-image プロパティで body要素に画像を指定すると、 ブラウザの表示領域全面に繰り返して表示されてしまう。 継ぎ目の目立たない画像を用意することで、 自然な背景を作ることができる。 繰り返しても継ぎ目の見えないような背…
◉ パス リンクを設定する際に、 a 要素の href 属性にしているファイルの場所の記述のことをいう。 a 要素で HTML ファイルの場所を示すだけでなく、 img 要素で画像ファイルの場所を指定する場合や、 link 要素でCSS ファイルの場所を指定する場合など、 フ…
リンク（a要素）に様々な装飾をすることを指定できる、擬似クラス。 ◉ a 要素の装飾を見てみる。 ⚫︎ a 全てのリンク ⚫︎ a:link 未訪問のリンク リンクのデフォルトの状態を意味する。 ⚫︎ a:hover リンクにカーソルが重なっている時 マウスをリンクの上に持っ…
◉ target 属性 リンク先を新しいタブで開くようにするには、 target 属性に属性値を設定する。 target 属性の属性値は任意の半角英数字で指定する。 EX) <ul> <li><a href="https://www.facebook.com" target="new">Faccebook ページ</a></li> </ul> 新しく開いたタブには、属性値で指定したフレーム名がつく。 また、複数のリンク先…
要素を作るボックスは大きく、 ブロックレベル要素とインラインレベル要素の ２つに分類される。 ◉ ブロックレベル要素 ブロックレベル要素は、 見出し・段落・表など、文書を構成する基本となる要素で、 一つのブロック（かたまり）として認識される。 ブラ…
id と class では、 id セレクタに指定したプロパティの方が優先される。 どちらが優先されているかを確認するには、 Google Chromeの「検証ツール」が便利。 このように、 優先されたものがある場合、 優先順位の低かった側に、取り消し線が引かれている。
clearfix によってフローティングボックスが親要素からはみ出す不具合を解消できるが、 「 overflow : hidden ;」というプロパティを使用しても、解消できる。 ◉ overflow : hidden ; clearfix と違って、非常に短い記述で済むため、とても良い方法ではある…
clearプロパティとfloatプロパティの間では、 後続要素をclear しただけでは、 フローティングボックス（どちらか左右に寄せた要素）が、 親要素のボックスからはみ出してしまうことがある。 この問題を解消するために考えられたのが、 「clearfix」で、この…
◉ float 値を指定した要素を左右に寄せて配置するプロパティ。 後続のコンテンツは、floatを指定した要素の反対側に回り込む。 ● float プロパティで指定できる値 ⚫︎ left 要素を左に寄せる ⚫︎ right 要素を右に寄せる ⚫︎ none float を指定しない ◉ clear f…
◉＜time＞タグ 日付は、<time> タグで囲む。 <time>タグには、 属性を追加し、 コンピュータが正しい日付を認識できるように決まった書式で 日時を入力できるようにする必要がある。 ◉日時の書き方 ● 時刻は「 :（コロン） 」で区切る ・・・・15:45:20 など ● 日付は「-</time></time>…
◉ページ全体をセンターに寄せる これまでの作成では、 ブラウザ枠の横幅めいいっぱいまで表示されている。 そこでページ全体の横幅を固定して、 コンテンツ部分のブラウザをセンターに寄せて見やすくする。 ◉<div> ~ </div> ① HTMLで<div> タグでページ全体を囲む ② div に i</div>…
◉©️（コピーライト）マーク 特殊文字と呼ばれ、 ブラウザで「©️」と表示したい箇所に、 ソースコード中では、「 © 」と記述する。 ◉特殊文字 コピーライトのように、特殊文字はいくつかあり、 それらは、 「 & ; 」のように、 「 ＆（アンド） 」と「 ;…
google font に限らず、 一般的にフォントは、標準の書式を基準にして、 そこから文字の太さや斜体などの変更ができるように 様々なバリエーションが用意されている。 見出しレベルの違いなどを同じ書式を使うことによって ページ全体で統一感を出すことがで…
Google Fonts https://www.google.com/fonts/ で利用する。 操作方法等が適宜リニューアルされているので、 現在は、以下のサイトを参考にするのがわかりやすかと思われる。 https://sodamelo.com/google-fonts/ 簡単に順序を説明すると、 ①カテゴリを選択。…
ブラウザによって、 段落タグや見出しタグには、 予め標準の文字サイズと上下マージンが設定されている。 EX) CSSファイルにおけるブラウザ標準値 body { font-size : 16px ; } p { font-size: 1em ; margin: 1em 0 ; } h1 { font-size: 2em ; margin: 0.67e…
◉< figure >〜</figure > figure要素は、写真、挿絵、図表、コードなどのまとまりを表す。 figure要素によるまとまりは、単体で独立したものでならない。 つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、 切り出した内容自体で意味が通る…
<img src="images/img_01_01.jpg" alt="" width="720" height="390"> <img src="images/img_01_02.jpg" alt="確認写真。" width="720" height="390"> 上記の例で考える。 ◉ src 属性 <img> タグでは、src 属性をつけて、 埋め込み画像ファイル（フォルダ／ファイル名）があることを示す。 ◉ alt 属性 alt 属性には画像の代替テキストを入力する。 これは、主に、 スクリーンリーダー（目が不自由な方のための音…
ウェブページでは主に３つの画像形式が用いられる。 ◉「GIF（ジフ）」 単位：「 .gif 」 GIFは、256色までの色を扱うことのできる圧縮画像形式。 主にイラストやアイコン、ロゴなど、 色のはっきりした画像を保存するのに用いられる。 GIFでは、使用する色数…
コンピュータでは、領域をマス目で区切り、ひとつひとつの色を変えることで 様々な画像を表現している。 マス目が塗り分けられて表現されるので、 マス目が細ければ細いほど、 多彩な画像と言える。 このマス目１つを「１ピクセル（画素）」という。 ◉ 解像…
ブラウザによっては、 文字のサイズが同じでも、文字の高さが異なり、 行間が詰まって見えることがある。 これを解消するのが 「 line-height 」で、 上下にどれくらいの余裕を持たせるのかを指定できるプロパティ。 上下の余白も含めたサイズである。 ◉ lin…
世間には、 Google Chrome, Internet Exploer, Safari, Firefox, Operaなど 様々なブラウザがあり、 ブラウザによって少しずつ見た目に差異が出てきてしまう。 若干見た目が違ってくるのは、 各HTMLタグに対して設定されているCSSの標準値がブラウザによって…
