2022/09/27

●ボックスモデルでコンテンツを操作する
→height:コンテンツの高さ
→width:コンテンツの幅
→border:境界線
→padding:境界線の内側の余白
→margin:境界線の外側の余白

●widthのデフォルト
→親要素の幅
●heightのデフォルト
→コンテンツの高さ
●overflowプロパティ
→要素から溢れたコンテンツの操作
・hidden:溢れた部分を隠す
・scroll:領域内でスクロールして表示

2022/09/13

■リストのスタイリング
●list-style-typeプロパティ
→リスト先頭の記号を変更
→circleで白丸
→lower-alphaでアルファベット
→noneで記号無し
●list-style-positionプロパティ
→insideでリストに記号内包
●list-style-imageプロパティ
→url()で画像指定
※ファイル名はクォーテーションで囲う
※上の階層は「..」
●list-styleプロパティ
→type、position、imageの値を並べて一括指定可能
→値の並びは任意で指定可能
※値同士は半角スペースで離す
※typeとimageの両方が指定された場合は以下の通り
→image:優先
→type:imageが使用できない場合の予備
※任意の値を省略可能だが、省略したプロパティは以下の初期値で指定されたものとされる
→type:disc
→position:outside
→image:none

2022/09/11

CSSで色を指定
●色キーワード
→red,blueなど
ex)color: red;
●RGBA(Red,Blue,Green,Alpha)
→RGBは0〜255、Alpha(透明度)は0.0〜1.0
※0.0が完全に透明、1.0が完全に不透明
※透明度1.0は省略可能で、その場合はrgb();と表記
ex)color: rgba(255, 0, 0, 1.0);
→16進数(00〜ff)でも表記可能
ex)color: #ff0000ff;
※16進数の場合、それぞれが同じ文字であれば1文字に省略可能(ff→f・00→0など、一部のみの省略は不可)
●HSLA(Hue,Saturation,Lightness,Alpha)
→Hueは0〜360で指定(色相環
※Hue:色相
→Saturationは0%〜100%で指定
※Saturation:彩度
→Lightnessは0%〜100%で指定
※Lightness:明度
ex)color: hsla(180, 80%, 40%, 1.0);
※透明度1.0は省略可能で、その場合はhls();と表記
●opacity
→透明度を操作
→その要素のコンテンツを含む全体の透明度に影響

2022/09/10

CSS = Cascading Style Sheet
※Cascading:段階的、連鎖的

●同じセレクタに対して同じプロパティ・違う値を指定すると、後から指定した方が有効

●スタイルの継承
→親要素に指定したプロパティが子要素に引き継がれる
※MDNで継承の有無を調べられる
●inheritキーワード
→プロパティの値を親要素から継承する
※値として指定

●検証ツール(Chrome
→調べたい要素を右クリック「検証」
※ctrl shift iでも使用
→ElementsパネルStylesタブにてCSSの確認ができる

●打消線
→text-decorationプロパティline-through
●下線
→text-decorationプロパティunderline
●下線取消し
→text-decorationプロパティnone
※リンクの下線を消す時等

●フォントの変更
→font-familyプロパティ
※値で指定するフォントが表示されるPC内に存在する必要がある
※当該フォントが無い場合の第二・第三候補はカンマで区切って記述
ex)font-family: Verdana, 'Arial black', メイリオ, sans-serif;
※フォント名に空白があればクォーテーションで囲う
CSSに日本語が含まれる(フォント名等)場合、CSSの先頭に「@charset "utf-8";」を記述
※sans-serifはフォント名ではなくフォントのカテゴリ
→前記のフォントが見つからない場合、カテゴリに属するフォントから自動選択されるため必須
・sans-serif:ゴシック体系
・serif:明朝体
cursive:筆記体
・monospace:等幅フォント

●line-heightプロパティ
→行ボックスの高さを指定
※行ボックスの高さ = 文字の高さ(ピクセル)+上下の空白(均等)
●1文字分の高さは1em
→emを指定した箇所のfont-size
●単位無しの場合もem同様
→emあり:記述した箇所のフォントサイズが基準
→emなし:継承先のフォントサイズが基準

●行ボックスのbaseline
→英語記述時の基準線
●vertical-alignプロパティ
→行ボックス内の縦方向の位置指定
→デフォルト値baseline
→topやbottomで行ボックスの端に設定
※画像にmiddleに指定すると、英小文字中央と画像中央が一致する(行ボックス中央ではない)
→px等の長さでは、baselineからどれだけ離れるかを指定

2022/09/09

●inputタグにtype属性でcheckboxを指定するとチェックボックスを配置
→labelタグで囲えばチェックボックスとキーワードの関連付け可能
●fieldsetタグで入力部品をグループ化
→legendタグを子要素に配置してグループの説明を記載できる

●inputタグにtype属性でradioを指定するとラジオボタンを配置
→配置した複数のラジオボタンにname属性で同じ値を設定(値の名前は何でも良い)
チェックボックスは0個以上・複数項目選択可能
ラジオボタンは1個以上・単一項目選択可能

●selectタグ内にoptionタグで選択肢を配置するとドロップダウンリストを作成
→size属性で数値を指定すると、その値の分だけ複数行表示
※その場合リストボックスと呼ばれる
→リストボックスで複数項目を選択可能にする場合はmultiple属性でmultipleを指定
※選択時にはctrl(command)を押しながらクリック
※ドロップダウンリストは不可
●属性と値が同じ場合、「=」以降の値を省略できる

●ボタンを表現する方法
→buttonタグ内にテキストを指定
→inputタグのtype属性をsubmit、value属性にテキストを指定
※buttonタグなら画像等を指定できる
※ctrl(command)と/で行をコメントにできる

■入力部品に予め値をセットしておく方法
●inputタグtype属性text
value属性で値に任意のテキスト指定
●inputタグtype属性checkbox
→checked属性で値にcheckedを指定
※複数選択可能な為、複数項目にchecked属性を付与できる
※属性と値が同じ為、値省略可
●inputタグtype属性radio
→checked属性で値にcheckedを指定
※複数選択不可の為、単一項目のみchecked属性を付与できる
※複数項目にchecked属性を付与した場合、最後に付与した項目が選択される
※属性と値が同じ為、値省略可
●selectタグ内optionタグ
→selected属性で値にselectedを指定
※optionタグに付与
※属性と値が同じ為、値省略可
●textareaタグ
→textareaタグ内に任意のテキストを記述
※字下げをすると、その分が空白として認識される

●disabled属性で値にdisabledを指定すればボタンを無効化できる
→必須項目選択で有効化するにはJavascript等が必要

■inputタグtype属性で指定できる値
●password
→入力したテキストを隠す
●number
→数値以外入力できない
●date
→カレンダーで直感的に入力可

2022/09/08

●labelタグでフォームに何を入力してほしいかを示す
●フォームのタグにid属性、labelタグにfor属性で同じ値を指定することで関連付けできる
→ブラウザでlabelタグをクリックすると、すぐにフォームに入力できる(フォーカスがあたる)
※labelタグ内にフォームを入れても関連付けできる(for属性、id属性不要)
●フォームのタグ内にplaceholder属性で入力例を示す
→入力を始めると消える

2022/09/04

●HTMLの詳細を調べる際はMDNから確認
https://developer.mozilla.org/ja/docs/Web

●formタグでフォームの範囲を示す
●inputタグにtype属性でtextを指定すると改行を含まない1行だけの入力フォーム
→閉じタグは不要
●textareaタグで改行を含む複数行の入門フォーム
→閉じタグが必要