どっこと備忘録群

アウトプットしないとインプットできない私が Androidアプリ開発をメインとした備忘録を載せています。

HTML/CSSについて

HTML/CSS CSSを設定するときに頻出する設定項目

  • width
    • タグ要素の幅。divで頻出。
  • height
    • タグ要素の高さ。divで頻出。
  • background-color
    • タグ要素内の背景色。RGB指定。
  • font-size
    • タグ要素内のテキストのテキストサイズ。 指定方法が色々ある。
    • px,em。
    • larger/smaller （親要素のフォントサイズとの相対）とか。
  • color
    • タグ要素内のテキストの色。RGB指定。
  • font-style
    • タグ要素内のテキストのスタイル。
    • normal／italic／obliqueとか。
  • padding
    • タグ要素内に設定する余白。px,em指定。
    • 1つ指定は全方向に同一の値を設定。
    • 4つ指定は上、右、下、左の順に設定される。
  • margin
    • タグ要素外に設定する余白。px,em指定。
    • 1つ指定は全方向に同一の値を設定.
    • 4つ指定は上、右、下、左の順に設定される。
  • list-style
    • リストタグ（ul）限定。左につくボッチの指定。
    • noneを指定すると消える。
  • border-style
    • 枠線を表示する際のスタイルを指定できる。
    • solid(実線),dashed(破線)など。
  • border-width
    • 枠線を表示する際の枠線の太さ設定。
    • px, em指定。
  • border-color
    • 枠線を表示する際の枠線の色指定。
    • RGB指定。
  • border
    • border-style, border-width, border-colorを一括で指定できるプロパティ。

CSSファイル内にコメントを書く

/** こんな感じ */ でコメントを書く。

CSS に追加するときの タグ／クラス／IDの指定

タグ指定によるカスタマイズ

タグ指定によるCSSはタグ名をそのまま書く。

/* bodyタグの指定 */
body {
 ...
}
/* h1タグの指定 */
h1 {
 ...
}

クラス指定によるカスタマイズ

クラス指定によるCSSはピリオド「.」をつけて書く。

/* hogeクラスの指定 */
.hoge {
 ...
}
/* fugaクラスの指定 */
.fuga {
 ...
}

また、タグ指定とクラス指定を組み合わせることができる。

/* hogeクラスが設定されているdivタグの指定 */
div.hoge {
 ...
}

/* fugaクラスが設定されているpタグの指定 */
p.fuga {
 ...
}

ID指定によるカスタマイズ

ID指定によるCSSはシャープ「#」をつけて書く。

/* ID:header */
#header {
 ...
}

/* ID:footer */
#footer {
 ...
}

ID指定も、タグ指定、クラス指定を組み合わせることができる。

/* ID:headerが指定されているdivタグ */
div#header {
 ...
}

/* new-articleクラス、ID:title 指定 */
.new-article#title {
 ...
}

/* divタグ、commentクラス、ID:title 指定 */
div.comment#title {
 ...
}

指定のタグ／クラス／ID内の要素に対してCSSを指定できる。

/* ID:headerが指定されている要素内のaタグ指定 */
#header a {
 ...
}

/* new-articleクラス内の div 指定 */
.new-article div {
 ...
}

参考

HTML/CSS マウスオーバーしたときの表示をカスタマイズする

マウスオーバーしたときに表示を切り替えたいときは、CSSに疑似クラスを指定する。

a:hover {
  マウスオーバー中に表示したい内容
}

この指定を複数の要素に指定することで、例えばテキストやイメージの表示切替などもできる。

a:hover {
  マウスオーバー中に表示したい内容
}

.a-covered:hover {
  マウスオーバー中に表示したい内容
}

マウスオーバー以外にも疑似クラスの指定により表示を変えられるものは以下。

  • link：未訪問のリンク
  • visited：訪問済みのリンク
  • hover：マウスオーバー
  • active：リンククリック中

参考

HTML/CSS 画面上のテキストや画像を選択状態にできないようにする

該当のテキスト・画像のタグに以下を設定します。

user-select: none;

例えば画像に設定する場合は img タグなので以下。

img { 
    user-select: none;
}

参考

HTML/CSS/JavaScript モーダル(ポップアップ)表示する

モーダル表示用の div を body タグにいれる＋不要になったら捨てる。

<div id="modal-view" class="modal-background">
  <div class="modal"/>
</div>
  • modal-background クラスは背景として設定。
  • modal クラスをポップアップぽくCSSを設定する。
  • 背景、ポップアップは参考サイトの設定を見てなんとなく。

不要になったら以下で捨てる。

var view = document.getElementById('modal-view');
document.body.removeChild(view);

CSS 親要素を基準に位置を決める

親のスタイルに対して以下を設定する

position: relative;

位置を決めたい要素のスタイルに対して以下を設定する

position: absolute;

上記を設定したら、後は特定の要素に対して left, top, right, bottom を指定する。 例えば右下を指定する場合は以下。

right: 0;
bottom: 0;

参考

最終更新: 2026.6.13