Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- ハンバーガーアイコンの作り方
- [ flex-flow + justify-content ]プロパティで縦中央揃え
- ユーザー目線のちょっとした気遣い
解説動画
コードの解説
HTMLの記述
<header class="header">
<div class="logo"><a>ロゴ</a></div>
<div class="drawer-icon">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
</div>
</header>
手順
▶︎ ３本の棒を<span> を使って作る。
▶︎ 共通のクラス bar と 特有のクラス bar1 ~ bar3 をつけておく
CSSの記述
.header {
width: 100%;
height: 90px;
background: #f5e9e9;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.drawer-icon {
padding: 20px 30px;
width: 100px;
height: 70px;
display: flex;
flex-flow: column;
justify-content: space-between;
.bar {
display: block;
width: 100%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
&:hover {
cursor: pointer;
}
}
.drawer-icon.js-open {
.bar1 {
transform: translateY(14px) rotate(30deg);
}
.bar2 {
display: none;
}
.bar3 {
transform: translateY(-14px) rotate(-30deg);
}
}
手順
▶︎ drawer-icon の箱を作る
▶︎ ユーザーが押しやすいように padding で余白を上下左右につけ、アイコンより少し外側を押したときにも反応するようにしておく
▶︎ [ flex-flow : column ] でフレックスコンテナの向きを縦にし、[ justify-content : space-between ] プロパティで両端均等揃えにすることで、３本の棒が縦に均等に配置される
▶︎ js-open クラスがついたときのアイコンの位置を調整
▶︎ transform プロパティの使い方に注意！ ( こちらの記事 を参考 )
jQueryの記述
$('.drawer-icon').on('click', function () {
$(this).toggleClass('js-open');
return false;
});手順
▶︎ drawer-icon を押したら js-open クラスのつけ外しを行う
解説で使用したスニペット
scss.json
"hover": {
"prefix": "hover",
"body": [
"&:hover {",
" $1",
"}",
],
"description": "hoverアクションの際に使用できる"
},javascript.json
"click": {
"prefix": "click",
"body": [
"\\$('$1').on('click', function () {",
" $2",
" return false;",
"});",
],
"description": "クリックイベント"
},
"class": {
"prefix": "class",
"body": [
"\\$('$1').$2Class('$3');",
],
"description": "クラスの付け外し"
},Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog