Zenn
Open6

HTML/CSS学習

CSS
HTML
湊湊

box-shadow

  • 右と下に10px,ぼかし10px,広がり10pxの影をつける
    box-shadow: 10px 10px 10px 10px #cdcdcd;

  • 上記を内側の影にする
    box-shadow: 10px 10px 10px 10px #cdcdcd inset;
    inset指定すると向きが逆になる

湊湊

ブロック要素とインライン要素

HTMLタグはブロックレベル要素の性質とインラインレベル要素の性質のどちらかを持っている

ブロックレベル要素

  • 高さ、幅を指定することができる
  • 横幅の初期値は親要素と同じになる
  • 他要素と並べたときは改行される

例：<div>, <h1>~<h6>, <p>, <table>, <form> など

インラインレベル要素

  • 高さ、幅の指定はできない
  • 横幅の初期値はコンテンツに合わせて決まる
  • 他の要素と並ぶ時改行しない

例：<span>, <a>, <strong>, <input>, <select> など

<input>, <textarea>

<input>

  • 1行のテキスト入力を受け取る要素
  • type属性を指定し、type属性にsubmitを指定すると、送信ボタンになる
    • value属性に任意の値を指定することで、ボタンに表示されるテキストを変更できる
    • 例：<input type="submit" value="保存">

<textarea>

  • 複数行のテキスト入力を受け取る要素
湊湊

アイコンを使う

Font Awesomeというサイトが便利らしい

使い方

  1. Font AwesomeのCSSファイルを読み込む
  2. <span>タグにfaクラスとfa-アイコン名クラスを指定する
    （Font Awesomeのサイトにアイコンごとのクラス名が載っている）
湊湊

要素を透明にする

  • opacityは要素の中身すべてを透明にする
  • rgbaは背景色のみを透明にする
    • rgbは色の指定の仕方で、3つの値の組み合わせで色が決まる
    • 書き方:background-color: rgba(84,190,238,0.5);
      カンマで区切った4つめの値が透明にする度合いのこと
湊湊

入力フォーム

  • フォームの入力要素には<label>タグをつける
  • placeholderと<label>タグは組み合わせて使う
湊湊

レスポンシブ対応

viewport

viewportはウェブページを閲覧する画面の領域のこと。パソコン向けブラウザならブラウザのウィンドウ、モバイル端末なら画面全体がviewportである。

<!-- viewportの一般的記法 -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

デバイスの画面サイズに合わせて幅を調整し、初期表示時に拡大率を1.0に設定している。

メディアクエリ

画面サイズやデバイスの種類によってCSSのスタイルを切り替える機能のこと。

/* メディアクエリの書式 */
@media media-type and (media-feature-rule) {
条件を満たした時に適用するCSS
}

メディア種別

  • all（すべて）
  • print（印刷）
  • screen（画面）
  • speech（音声合成）