あったらいいな、コンビニのスイーツデリバリー。こんにちは、フロントエンドエンジニアのザワです。
我々フロントエンドは、普段から何十種類というCSSプロパティを駆使してWebサイトの見た目を作るお仕事をしています。今回は、そのプロパティの中でも、渋くて優しくて気のきくジェントルマン、カウンターバーで「お隣の方からです……」的な、ホスピタリティあふれるCSSプロパティにフォーカスしていきたいと思います。
pointer-events: none;
効果
クリックやタッチイベントを無効化する。
場面
使う場面としては、スマホ画面などでよく見られる、ハンバーガーメニューをクリックして表示されるメニュー画面の表示非表示などです。opacityを0に設定すると要素が透明になって見た目では見えなくなりますが、要素自体は存在するのでクリックできてしまいます。
そこで「pointer-events: none;」を使用することで要素がクリックできなくなり、あたかも存在しないかのような挙動になります。さりげなく存在を消す、気がつかえるプロパティですよね。
See the Pen pointer-events: none; by Zawa (@sowork) on CodePen.
word-wrap: break-word;
効果
連続した半角英数字テキストを折り返す。
場面
英語テキストが使用される箇所に適用することが多いです。何も指定していないと、連続した半角英数字は要素内で折り返さず、要素からはみ出て表示されてしまいます。よくあるパターンはURLなどです。特定の要素に指定してもいいですが、body要素に対して指定することで対応するパターンが多いように思います。
See the Pen word-wrap: break-word; by Zawa (@sowork) on CodePen.
white-space: nowrap;
効果
行を折り返さない。
場面
前述した「word-wrap: nowrap;」とは対照的に、テキストを折り返したくない場合に使います。たとえば、table要素の特定の列のタイトルは折り返し表示にしたくない場合などです。開発者によって使いどころに個性が出そうなプロパティですよね。色々なCSSを試して、どうにもならないってときに一筋の光が差し込むような感覚です。今後もここぞという時に活躍してくれるでしょう。
See the Pen white-space: nowrap; by Zawa (@sowork) on CodePen.
まとめ
今回紹介したのは、私がいつもお世話になっているプロパティでした。みんな、気づけばいつも使っている愛着のあるCSSプロパティ、もしくは組み合わせがあるはずですよね。エンジニア間で好きなプロパティ談義が盛り上がることもしばしばあるでしょう。今後も新しいCSSに出会い、そして別れを繰り返しながら楽しい制作ライフを過ごしていきましょう！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
