ブログデザイン備忘録 ～ HTML/CSSのTips

今回はブラウザの機能の発展に伴って便利な場合があるHTML/CSSの機能について紹介したい。

1. スペルチェック機能

contenteditable="true"とすると閲覧者がHTML編集可能とすることができるが、HTML編集可能な状態でspellcheck = "true"とするとスペルチェックが機能する。 もともとフォーム入力用の機能のため、編集可能にする必要がある。

<p  contenteditable="true" spellcheck="true">Thi is a pencl. :)</p>

以下動作している状態の画像を示す。

2. 翻訳制御機能

翻訳時に企業名や固有名詞など翻訳してほしくない単語、文章はtranslate = "no"とすることで回避できる。

<p>This is a pencil.</p>

<p translate="no">This is a pencil. (No translate)</p>

<p translate="yes">翻訳可能</p>

<p translate="no">翻訳不可</p>

以下をGoogle翻訳にかけると、下の文章は翻訳されない（はず）

This is a pencil.

This is a pencil. (No translate)

日→英の場合：

翻訳可能

翻訳不可

3. 埋め込み動画のアスペクト制御

埋め込み動画の表示アスペクト比をCSSのaspect-ratioで簡単に設定することができる。 以下のようにaspect ratioを16/9から4/3に変更することで、youtube動画の埋め込みの表示が変化する。

.video1{
  width:300px;
  aspect-ratio: 16 / 9;
}

.video2{
  width:300px;
  aspect-ratio: 4 / 3;
}

See the Pen New html tag by ATATAT (@atatat) on CodePen.