Q&A
リンク先を開こうとすると「警告: 潜在的なセキュリティリスクあり」と警告が出ました。
質問にコードを記述してください。
現在こちら(https://code-step.com/demo/html/media/)の模写コーディングを行っています(ソースコード: https://code-step.com/media-code/)
cssのheaderにてdisplay:flexをしているのですがこれは何の意味があるのでしょうか.
flexは横並びにして左右のスペースを均一に空けたりするときに使うと思っていたのですが
headerにはid="navi", id="mask"が入っています.
これらは横並びになっていなのですがなぜわざわざflexをしているのでしょうか?
またソースコードを見てみると左上のlogoと右上のハンバーガーメニュー(.toggle_btn)は
横並びになっているのですが, toggle_btn はposition:fixedで位置を決めなおしています.
これらの点からheaderをdisplay:flexにする理由が分かりません.
初心者ですがよろしくお願いいたします.
かしこまりました.
header部分だけ記載します.
[html]
<body>
<header id="header">
<h1 class="site-title">
<a href="index.html"><img src="img/logo.svg" alt="Sneakers"></a>
</h1>
<nav id="navi">
<ul class="nav-menu">
<li><a href="#pickup">PICK UP</a></li>
<li><a href="#feature">FEATURE</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<ul class="nav-sns">
<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/" target="_blank">facebook</a></li>
<li><a href="https://www.instagram.com/" target="_blank">instagram</a></li>
</ul>
</nav>
<div class="toggle_btn">
<span></span>
<span></span>
<span></span>
</div>
<div id="mask"></div>
</header>
[css]
#header {
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 40px;
position: fixed;
z-index: 10;
background-color: #fff;
}
/*
ハンバーガーメニュー
解説は、「中級編：ストアサイト（インテリア）」のCSS参照
*/
#navi {
display: block;
position: fixed;
top: 0;
left: -300px;
bottom: 0;
width: 300px;
color: #fff;
padding: 60px 25px;
background-color: #121212;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 20;
opacity: 0;
}
#navi a {
color: #fff;
}
.open #navi {
left: 0;
opacity: 1;
}
#navi ul {
margin: 0;
padding: 0;
}
#navi ul.nav-menu {
margin-bottom: 60px;
border-top: solid 1px #fff;
}
#navi ul.nav-menu li {
position: relative;
margin: 0;
padding: 20px 0;
border-bottom: solid 1px #fff;
}
#navi ul.nav-sns li {
padding: 5px 0;
}
.toggle_btn {
display: block;
position: fixed;
top: 25px;
right: 45px;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
z-index: 20;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #333;
border-radius: 4px;
transition: all .5s;
}
.toggle_btn span:nth-child(1) {
top: 4px;
}
.toggle_btn span:nth-child(2) {
top: 14px;
}
.toggle_btn span:nth-child(3) {
bottom: 4px;
}
.open .toggle_btn span {
background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
回答1件
0
ベストアンサー
そのデモに関しては、display:flex に意味はないと思われます。
検証ツールで display:flex を無効にしても、レイアウト、動作に違いはありません。
では、なぜ、設定してあるのか。
以下は、推測です。
そのサイトの他のデモをいくつか見てみましたが、ヘッダーのあるの物は、display:flex が設定してありました。それらは、position:fixed が設定されていないので、display:flex を無効するとレイアウトが崩れました。
たぶん、テンプレート的なHTML、CSSがあり、それに、コードを追加して、いろいろなデモを作成しているのだと思います。（たくさんあるデモを一からコードを書いていたら大変ですから。）
今回のデモは、position:fixed でナビを固定して、画面外に隠しておいて、jQueryでハンバーガーのクリックで表示させるというコードを追加したが、その際、もともとのテンプレートにあった display:flex を消し忘れたか、あっても影響ないので消さなかった。
というところだと思います。
本当のところはサイトの管理人に聞くしかないですが。
投稿2021/10/05 12:28
総合スコア34075
あなたの回答
tips
プレビュー
