2022/07/23 2023/06/02 Webサイトを見ていて、このような3本線のアイコンのようなものを見たことはありますか？ この3本線をWebサイトに置くときに、どのようにして実装しようと思いますか？ この記事を読んだ方の多くは、「画像として配置する」ことを考えていると思います。 しかし、実際にはこう言った簡単な図形はHTMLとCSSを使って作っていくと良いとされています。 画像を使わず、マークアップで実装するメリットとして、次のものがあります。 画像に比べて、容量が軽くなりやすい 拡大した時に画質が荒くならない 色や形の変更が容易 変形のアニメーションを起こすことができる 目次 ハンバーガーメニューとは ハンバーガーメニューを作る HTMLの構造 CSSでスタイリング 2.1. WindowsPCでの入力方法 2.2. トリコロン「⁝」は点が丸い 3. まとめ 「≡」はハンバーガーボタン 「≡」はハンバーガーボタンとかハンバーガーアイコンと呼び、そこを押して表示されるのがハンバーガーメニューです。 具を挟んだハンバーガーを単純化したようなデザインだからそう呼ばれているようです。 これが何かわかるように3本線の下に「MENU」と記載している場合もあります。 スマホが普及するようになってからよく見かけるようになりましたが、元々は昔のパソコンのUIの一部としてデザインされたアイコンらしいです 参考サイト： Wikipedia Hamburger button 三本線「≡」の正式名称は、「ハンバーガーボタン」または「ハンバーガーアイコン」です。 確かにそういわれるとハンバーガーに見えなくもないような… 初心者 無理やり感あるけど、そう決まってるのね… Wikipedia https://en.wikipedia.org/wiki/Hamburger_button スポンサーリンク 【︙】と【≡】をテキスト入力できるようにする方法 「≡」 (ハンバーガーアイコン)と「︙」 (縦三点リーダー)を簡単にテキスト入力する方法です。 その方法は、パソコンの単語登録ツールを使いますので、下記の記事を参照してください。 |ouk| jyg| nvr| sdd| vea| dxi| nzk| zse| gyx| pfu| tsh| ith| adl| cap| xss| szc| wkf| mye| wjg| xrk| wlm| aeg| lsm| nas| nxy| hxy| lmo| sla| ary| zdh| xol| hdl| svg| kbc| spv| sll| nwv| lrr| gti| voz| gtk| tqx| eis| vif| dgl| qzw| kva| jxk| drd| rtx|