どうも7noteです。普段作っているけど以外と知らないアレの名前をまとめてみた。 三本線のメニューや、[・・・]となっているメニュー。など。 「正式名称・・・わかりますか？」 ①「ハンバーガーメニュー」 この三本線のメニューの正式名称は・・・「ハンバーガーメニュー」 ファーストフードの王道であるハンバーガーをイメージしたメニューですね。 ロッテリアのホームページが実際のハンバーガーのようなイラストのメニューになっています。（※スマホ時） https://www.lotteria.jp/sp/ ②「ミートボールメニュー」 横並びになっている点「・・・」。これはミートボールメニューと言います。 英語でもそのまま「Meetballs Menu」というらしいですよ。 ③「弁当メニュー」 知名度が低すぎてgoogleで出すのが困難でした。。。 こちらですね。 9個の四角が並ぶこのメニュー、日本語の「弁当」からきていて 「bento menu」というようです。 しかし日本人のほとんどが知らないという悲しい現実・・・ もっといろんな人に知れ渡ればいいのですがね。。。 その他のメニュー 他にもケバブメニューやドルネメニューなど、食べ物にちなんだ名前がついているメニューがほとんどです。 食べ物なら共通認識として覚えやすいからですかね。誰がこの名前を最初につけたのか気になります。 もし知っている方がいればコメントください。 引用元: https://ux.stackexchange.com/questions/115468/what-the-difference-between-the-2-menu-icons-3-dots-kebab-and-3-lines-hambur まとめ 地域や場所によって呼ばれ方は様々ですが、その一部を紹介しました。 一般名称をしっていれば、開発するときのクラス名やID名を迷わずにサクッと書けるのでいいですね。 ただあまり一般的ではないので、どこまで伝わるかは保証できませんが・・・ 今後もきっといろいろな形のメニューが作成されていくと思うので、どんな名前がつくのか興味深いですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

仕様書の指定 ・ヒーローイメージを6秒毎に6枚フェードインで切り替え。 ・JavaScriptやjQeryは使わずにcssアニメーションで実装。 ・フェードイン後は徐々にズームしていく感じ。 HTML style属性で背景画像６枚を指定 index.html <section class="l-hero"> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__bg" style="background-image: url(./);"></div> <div class="l-hero__inner"> <p class="l-hero__heading">テキスト</p> </div> </section> CSS(Scss) ・.l-heroというblockが基準となるのでposition: relative;を指定。 ・スライドの幅や高さを指定。 ・overflow: hidden;で、imgがズームした時にはみ出た部分を隠す。 _hero.scss .l-hero { height: 100vh; width: 100%; position: relative; overflow: hidden; } ・初期値をopacity: 0;にして表示を隠す。 ・position: absolute;で、スライドの中身を.l-heroに合わせて重ねる。 ・animation: anime 36s 0s infinite;で6枚のスライドを6秒ずつ、36秒間かけてアニメーションし、infiniteによって再生をループ。 _hero.scss .l-hero__bg { position: absolute; z-index:10; top: 0; left: 0; width: 100%; height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; -webkit-animation: anime 36s 0s infinite; animation: anime 36s 0s infinite; } ・animation-delay: で、アニメーションの開始時間を6秒ごとに次の画像が現れるようにずらす。 _hero.scss .l-hero__bg:nth-of-type(2) { -webkit-animation-delay: 6s; animation-delay: 6s; } .l-hero__bg:nth-of-type(3) { -webkit-animation-delay: 12s; animation-delay: 12s; } .l-hero__bg:nth-of-type(4) { -webkit-animation-delay: 18s; animation-delay: 18s; } &.l-hero-of-type(5) { -webkit-animation-delay: 24s; animation-delay: 24s; } .l-hero__bg:nth-of-type(6) { -webkit-animation-delay: 30s; animation-delay: 30s; } @keyframes ・opacity: 0;で表示の変更 transform: scaleでサイズの変更をします。 ・3秒目から、3秒目かけてフェードイン。 36秒間かけてアニメーションするので、3秒は8%、6秒は17%。 ・6秒後に次のスライドが再生されるので、 ここからまた3秒目かけてフェードアウト。 この間、1.2倍まで画像はズームされる。 ・6枚目よりも1枚目が上に来るようにz-indexを一つ下げる。 _hero.scss @keyframes anime { 0% { opacity: 0; } 8% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 0; transform: scale(1.2) ; z-index:9; } 100% { opacity: 0 } } サンプルーコード _hero.scss .l-hero { height: 100vh; width: 100%; position: relative; overflow: hidden; //bg anime &__bg { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; -webkit-animation: anime 36s 0s infinite; animation: anime 36s 0s infinite; } &__bg:nth-of-type(2) { -webkit-animation-delay: 6s; animation-delay: 6s; } &__bg:nth-of-type(3) { -webkit-animation-delay: 12s; animation-delay: 12s; } &__bg:nth-of-type(4) { -webkit-animation-delay: 18s; animation-delay: 18s; } &__bg:nth-of-type(5) { -webkit-animation-delay: 24s; animation-delay: 24s; } &__bg:nth-of-type(6) { -webkit-animation-delay: 30s; animation-delay: 30s; } @keyframes anime { 0% { opacity: 0; } 8% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 0; transform: scale(1.2); z-index: 9; } 100% { opacity: 0; } } }

私がおすすめするpaddingとmarginをなんとなく理解するまでの流れ paddingとmarginのイメージをつかむ ↓ 動いているものを見る・大まかな使い分けを知る ↓ 試してみる・動かしてみる ↓ marginの相殺など、特殊な動きをするものを知る（これも試す） よくある padding と margin の例え アボカドver padding「果肉」 marginは「アボカドとアボカドの間」 （borderは「アボカドの皮」、文字などのコンテンツ領域が「種」 住宅街ver padding「家の庭」 marginは「道路」 （borderは「家の塀」、文字などのコンテンツ領域が「家」 ソーシャルディスタンスver padding「皮下脂肪」 marginは「人と人との距離」 （borderは「皮」、文字などのコンテンツ領域が「内蔵(?)」 例えてイメージして、使って感覚を掴む繰り返し 例えは何でもよくて、最初は繰り返しイメージを掴めればいいと思います！ また、無理にイメージを掴むより次のステップとして、コードを書いて感覚を掴むに進むでも良いかと。 使っていくうちに、 margin は、「外側の余白」だから、ボックスの周りの見えないスペース padding は「内側の余白」だから、 border と文字などのコンテンツ領域の間にあるスペース といった感覚になってくると思います！ paddingは親子関係の余白・marginは兄弟要素間の余白で使い分け paddingとmarginを動かしながら感覚を掴みます。 ここではpaddingは親子関係の余白・marginは兄弟要素間の余白と使い分けていきます。 以下のような画像だけでもいいのですが、実際のページの中で padding や margin の数値を増減させながら掴むといいと思います！ 変化を視覚的に見て感じる STUDIOというボタンを操作するだけで、marginやpaddingを表現できるツールで撮影しています。 「緑」...padding 「オレンジ」...margin ヘッダーのメニューの余白をつける 各アイテムはお互いが兄弟要素なので、小アイテムの左右に「margin」 キャッチコピーの左に余白をつける 写真が背景になっているBOXと、キャッチコピーは親子関係なので親BOXに「padding」 キャッチコピーとサブタイトルは兄弟関係なので子アイテムに「margin」 カード型デザインの余白をつける カード本体のBOXと中身の写真などのコンテンツは親子関係なので、親BOXに 「padding」 コンテンツ同士は兄弟関係なので、それぞれに「margin」 paddingとmarginどっちでもレイアウトすることは可能（できないこともある） paddingとmarginどちらをつかってもレイアウト可能です。 例えばこちらのカード型デザインを全てmarginでレイアウトすると、タイトルの下に日付が入った場合に、 日付に改めて左方向にmarginを指定しないといけなくなります。 背景色のエリアを広げたり、hoverに反応する範囲を広げつつ余白をとる場合は 「padding」 文字の上だけでクリックできるようなデザインだと、非常に使い勝手が悪いので、 背景色のエリアを広げたり、hoverに反応する範囲は 「padding」で余白をとります。 （『BOX自身の内側に 「padding」で余白をとってから、兄弟関係で余白が必要なら「margin」をとる』ともいえる） ヘッダーも修正 開発者ツールで動かしてみる 開発者ツールで色々動かしながら試してみるのもいいと思います！！ 結論、全体像を理解したら、書いたり動かしたりするのが１番！！ marginの相殺など、他にも知っておくべきポイントはたくさんありますが、 まずは自分で書いて、色々と試してみるのがおすすめです！ MDNのサイトでも数値を変えたら動くのでイメージしやすいです。 https://developer.mozilla.org/ja/docs/Web/CSS/padding