就活でポートフォリオを提出してくださいとのことで、 準備していたら、 あるページだけサイズがおかしい（小さい）ことに気づいた。 ん？ どっかフォント間違ったかな？ margin?? 他のページなどと比較して色々調べるが、 どうも、 検証ツールによると、 Ma…

HTML＆CSSで作ったポートフォリオサンプルが、 どうも 中央（Body)が、 設定値も、margin なども合っているのに、 全体に広がってしまう・・・。 よおお〜〜〜〜〜〜く調べると、 htmlファイルの div id = page の切れ目（ /div ） が head までで切れてしま…

◉ ドメイン名 インターネット上のコンピュータを識別する住所のようなもので、 URLやメールアドレスに含まれている（赤字部分）。 URL http://www.examle.com Mail mail@example.com 自分が希望するドメインを持つには、 独自ドメインを取得する必要があり、…

◉ position プロパティ 基本的に、位置を指定する top / bottom / left / right プロパティと組み合わせて利用する。 ◉ position プロパティで指定できる値 ⚫︎ static 配置方法を指定しない。 top / bottom / left / right プロパティの指定ができない。 初…

◉ rgbを用いて１０進数で表示 これまで１６進数（＃FFFFFFなど）で色を表示してきたが、 １０進数を指定する方法もある。 ● rgba（ R値, G値, B値, A値 ） ※数値の間には 「 ,（カンマ）」が必要。 r=red g=green b=blue の３色の指定に加えて、 a=alpha ( …

CSS では 好みのデザインボタンを作るために、微調整しながら作成するのは、 なかなか面倒なもの。 そこで、デザインソフトと同じようにボタンを視覚的に作成する、 ボタン用サービスがある。 「 CSS Button Generator 」 https://webdesign-assistant.com/b…

◉ インライン−ブロック要素とは？ インライン要素とブロック要素の両方の特徴を併せ持った要素のこと。 ● インライン要素の特徴 要素の幅は中身と同じ大きさになる 要素同士が横に並ぶ 幅（width）と高さ（height）が指定できない 余白（padding・margin）が…

ボックスにマウスが重なった時に 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 テキストに上線を…

◉ ベンダープレフィックス "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>…

◉©️（コピーライト）マーク 特殊文字と呼ばれ、 ブラウザで「©️」と表示したい箇所に、 ソースコード中では、「 &copy; 」と記述する。 ◉特殊文字 コピーライトのように、特殊文字はいくつかあり、 それらは、 「 & ; 」のように、 「 ＆（アンド） 」と「 ;…

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…