意外に知られていないhtmlとcssで出来る便利なこと
12日目は
@ariakiさんの【ITカンファレンスを企画したくなったら】東京都内の施設貸出可能な大学まとめでした！
会場探しは大変なので、こういったリストは助かりますね〜👍
はじめに
普段何気なくjavasciptを実装しているものが実はhtmlとcssだけで実装できたりするものってどれくらいあるんだろうって気になって調べてみました！
使用頻度高めなもの
スムーズスクロール
アンカーリンクで目的の位置までに遷移する時の動きを設定するものです。
何もしていないと対象の箇所まで瞬間移動しますが、アニメーションを設定していると滑らかに動きながら移動します。
javascriptで実装していましたが、今はcss1行で完結します。
素晴らしい！
デモはMDNで確認できます。
html {
scroll-behavior: smooth;
}
6,7年前はこのライブラリを毎回使ってたなぁ。
アンカーリンクの位置調整
これもjavascriptでよくやっていましたが、いつのまにかCSSで出来るようになってました。
遷移先となる要素にscroll-margin-topを付与します。
これだけで設定された分の余白が追加されるようになります。
便利！
ソースコード
<a href="#hoge">hogeに移動</a>
<section id="hoge"></section>
section {
scroll-margin-top: 1em;
}
自分がjavascriptで実装してた時はクリックした要素の高さを取得してスクロール時に高さ分を引いた位置に移動するみたいな手間のかかることをしてました。
途中でテキストを省略する
text-overflowを使えば出来ます。
何行目まで表示をするかで省略するかを判定しているため、レスポンシブ対応も可能。
javascriptで実装してた時は何行目ではなくて文字数で省略するかの判定をしていました。
文字数で判定していると困るのが、表示できる文字数が画面幅によって異なるため適切なタイミングで省略するのが難しくなります。
その点こちらは行数で省略するタイミングを決められるためレスポンシブ対応が非常に楽になりました。
ソースコード
<p>
アンカーリンクで目的の位置までに遷移する時の動きを設定するものです。
何もしていないと対象の箇所まで瞬間移動しますが、アニメーションを設定していると滑らかに動きながら移動します。
アンカーリンクで目的の位置までに遷移する時の動きを設定するものです。
何もしていないと対象の箇所まで瞬間移動しますが、アニメーションを設定していると滑らかに動きながら移動します。
</p>
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ○行目で省略するか */
overflow: hidden;
background: #eee;
}
その点text-overflowは行数で判定しているため、様々な画面幅に対応出来るのが良きです。
アコーディオン・トグル
これもjavascriptでよく実装していましたが、inputを使う事で実装できます。
最近だとdetailsとsummaryタグだけでも実装出来るようになったみたいです。
inputで実装したものに比べるとhtml構造がシンプルになりました。
モーダルウインドウ
dialogを使うことでjavascript無しで実装できるようになってました。
モーダルの実装自体はjavascript無しで出来ますが、デフォルトのデザインがダサいのでCSSでスタイルする必要がありそうですね。
フォーム関連
バリデーション
これは知っている人は多いとは思います。
javascriptを使ってバリデーションを実装する事はよくありますが、複雑なもので無いのであれば
html5で提供されているバリデーションだけで十分だったりします。
個人的には一番使います。
難点としては1つのinputに対して1つのpatternしか設定できない事です。
※自分が知らないだけかも
複数パターン必要、又は複雑になりそうであれば素直にライブラリを使った方が実装は楽ですね。
サンプル
- pattern属性
- 正規表現を入力して値を制限することができます
- title
- バリデーションに失敗した時に表示するメッセージ
ソースコード
<input
class="input"
type="text"
required
maxlength="13"
placeholder="電話番号を入力してください"
pattern="0\d{1,4}-?\d{1,4}-?\d{4}"
title="電話番号の形式で入力してください"
>
/* バリデーション成功した時のstyle */
input:focus:valid{
border-color: green;
}
/* バリデーション失敗した時のstyle */
input:focus:invalid{
border-color: red;
}
よく使う正規表現
| 項目 | 正規表現 |
|---|---|
| 数字 | [0-9]+ |
| 電話番号（ハイフンは任意） | \d{2,4}-?\d{2,4}-?\d{3,4} |
| 郵便番号（ハイフンは任意） | \d{3}-?\d{4} |
| パスワード（英半角・数字を含めて8文字以上か） | (?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{8,} |
| メールアドレス | .+\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9] |
| URL | https?://[\w/:%#\$&\?\(\)~\.=\+\-]+ |
| 10文字以上が入力されているか | .{10,} |
| 1〜10文字までの間で入力されているか | .{1,10} |
| カタカナ・半角と全角の空白と-のみ許可する | (?=.*?[\u30A1-\u30FC])[\u30A1-\u30FC\s]* |
| ひらがな・半角と全角の空白と-のみ許可する | (?=.*?[\u3041-\u309F])[\u3041-\u309F\s]* |
| 半角・全角の空白のみの入力を禁止する | .*\S+.* |
フォームに入力候補を表示する
datalistを使うことで、inputで入力補完が出来るようになります。
あくまでも出来るのは入力補完なので、入力内容の制限は出来ないです。
そのため候補にないものも入力は出来ます。
ブラウザの機能だけで部分一致・あいまい検索が出来るのはいいですね。
便利なんだけど、いまいち使い道が思いつかない。
カラーピッカー
なんとinput type="color"を使えば簡単にカラーピッカーが使えるようになります。
これは自分は知らなかったです。
終わりに
どうでしょう？
javascriptを使わなくても実装できるものは少しずつ増えてきてます。
IE11の事を気にしなくて良いようになったのでモダンな実装もかなりしやすくなったかと思います。
使えそうなものはどんどん使っていきましょう！
以下サイトでCSSで出来ることが投稿されているので、気になるかたは参考にしてみてください。
注意点としてはhtml・cssだけで実装出来るからと言って、それらで実装する事にこだわりすぎないようにしましょう。
Discussion