途中まで進めていたポートフォリオについて書き込み
scssの注意点aplication.scssにこのようにインポートする
このようなディレクトリ構造で開発する
このようにインポートして変数を使うようにする(でないとエラー)
jsファイルも記述して配置する
headerの作成
header.scssを以下の記述にする
@import "variables";
@import "mixin";
@import "base";
// headerの設定担当
.header {
// 画面の上部に固定
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $navHeight;
// 背景色を透明に
background-color: transparent;
display: flex;
align-items: center;
// ヘッダーを最前面にくるようにする
z-index: 100;
&.triggered {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 0 25px -10px rgba(0, 0, 0, 0.5);
}
// スマホ画面ではヘッダー表示しない
&__nav {
display: none;
}
&__ul {
display: flex;
// 上下中央揃えにする
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
&__li {
margin-left: 20px;
& > a {
color: $cBlack;
text-decoration: none !important;
// すべて大文字にする
text-transform: uppercase;
}
}
& .logo {
font-size: 38px;
justify-content: center;
}
&__inner {
display: flex;
justify-content: space-between;
align-items: center;
// navとコンテンツのラインを同じにする
@extend .content-width;
}
}