デイトラweb制作中級編 DAY33~37①
nakano
最終課題：実践コーディング
今回進めた範囲（PC） ↓
苦戦したところ
メインビジュアルの配置
HTML
<section class="main-visual">
<div class="main-visual__inner">
<div class="main-visual__content">
<div class="main-visual__title">詩が生れて、画が出来る。 <br>とかくに人の世は住みにくい。</div>
<div class="main-visual__lead">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</div>
<div class="main-visual__button"><a href="#contact">お問い合わせしてみる</a></div>
</div>
</div>
</section>SCSS
.main-visual {
height: 648px;
width: 100%;
background: url(../img/mv.png) no-repeat center center / cover;
}
.main-visual__inner {
margin: 0 auto;
max-width: 1200px;
padding-top: 232px;
width: 100%;
}
.main-visual__content {
margin-left: auto;
max-width: 600px;
}「.main-visual__inner」のpadding, margin
「.main-visual__content」で右寄せ
まとめ
今回から中級編の最終課題を始めました。
メインビジュアルの配置がposition: relative;とposition: absolute;を使ってもうまくいかず、いきなり躓いて大変でした。
納期を5日とするならあと4日ですべて終わらせなければいけません。
このペースだと最後まで終わるのか怪しいのでもう少し作業の効率を上げたいと思います！
