セージ の メモ書き

メモこそ命の恩人だ

HTML/CSS

CSS - 疑似クラス/疑似要素

セレクタ 疑似クラス :link/:visited :hover :active 疑似要素 ::before ::after セレクタ セレクタ { プロパティ: 値; } div { color: red; } 上記が CSS の基本構成。 セレクタには、要素名、id、class の名称を指定する。 疑似クラス 要素が特定の状態の…

CSS - margin/padding プロパティ

概要 値の設定方法 その他 ポイント margin の相殺 センタリング(水平方向) 概要 https://saruwakakun.com/html-css/basic/margin-padding どちらも余白を設定できる。 margin:要素の外側の余白 padding:要素の内側の余白 要素はボックスのイメージ。 ma…

CSS - float プロパティ

float プロパティ left right 活用例 サムネイル表示 float プロパティ https://www.itra.co.jp/webmedia/float-property.html 要素を横に並べることができる。 float:浮く 通常は要素が沈むとこを、浮かせるイメージ。 水面に要素が浮くイメージ?みたいな…

CSS - position プロパティ

position プロパティ static relative absolute fixed 活用例 固定ボタン 自社の登録画面風 補足 top/right/bottom/left プロパティ inset プロパティ position プロパティ https://html-coding.co.jp/annex/dictionary/css/position/ https://webst8.com…

HTML - disabled 属性

disabled 属性 Vue.js の活用 disabled 属性 disabled 属性を付与すると、要素を無効化できる。 注意:以下のどちらも無効化される。 disabled="true" disabled="false" true・false で有効・無効の制御は行えない。 要素の有効・無効を制御する場合 ... Jav…

CSS - カラーコード/グラデーション

カラーコード カラーネーム 緑(green) グラデーション 線形:linear-gradient 円形:radial-gradient カラーコード https://www.colordic.org/ #RRGGBB HTML、CSS で色を表現する際に使用するコード。 先頭が "#"、残りが "6桁" のコード。 RGB の各要素を…

HTML - 表(table/tr/th/td 要素)

概要 色調整 文字色 背景色 サイズ調整 幅調整 高さ調整 セル結合 横方向 縦方向 概要 要素 単語 内容 tr Table Row 表の行 th Table Header 表のヘッダー td Table Data 表のデータ table 要素で表を表示する。 table 要素の階層は以下のイメージ。 tr:レ…

HTML - hr 要素

hr 要素 スタイル hr 要素 Horizontal Rule:水平方向の罫線 セパレーターを表示できる。 終了タグは不要(= 空要素) <hr> スタイル 点線、矩形 etc. スタイルを自由に変えられる。 hr タグの style 属性に直接書いてもOK。 border-top で大体指定できる。 px、</hr>…

HTML - 箇条書き(ul/ol/li 要素)

概要 ul 要素 ol 要素 アイコンで箇条書き 方法1:li 要素(オススメ) 方法2:ul 要素 階層化 おしゃれ化 概要 要素 単語 内容 ul Unordered List 番号なしの箇条書き ol Ordered List 番号ありの箇条書き li List Item 箇条書きの項目 "l" が "List" の…

HTML- div・span タグ

共通点 相違点 div タグ span タグ 共通点 まとまりを識別させるためのタグ。 タグで囲った範囲にスタイルシートを適用できる。 相違点 No. 項目 divタグ spanタグ 1 style属性 display: block display: inline 2 ネスト 可 inline要素のみ可 3 タグ前後の改…

HTML - シングルクォーテーション・ダブルクォーテーション

<div id='app'> </div> <div id="app"> </div> 意味 文字列を表現する。どちらも機能は同じ。 HTML と JavaScript の両方で同じ考え。 使い分け プロジェクト全体でルールが決まってればよい。 C# をよく使うなら、文字列は " の方が馴染みがある。 VSCode のデフォルト ダブルクォーテーションだった…

HTML - aタグ

a タグ(Anchor:錨, いかり) ボタン表示(Bootstrap) a・button・input との違い a タグ(Anchor:錨, いかり) リンクを表示するためのタグ。 読み方:アンカー href属性に URL を指定すれば、そこにリンクできる。 href属性に ID を指定すれば、ページ…