うにょママ 復習をかねたWEB制作の学習記録と＋αで調べた事の備忘録です。
サイト制作の進め方
- 構造を考える（ブロック分け）
- XDから必要な素材（画像）の書き出し
- コーディング（レスポンシブ込）
- アニメーション・ブラウザ確認
デザインカンプから画像を書き出す際のポイント
画質が荒くなるのを避けるため、なるべく想定される最大の表示サイズより大きい画像サイズのものを利用する。
新たな知識、気を付けるポイント
画像幅、画像表示
PCとSPで表示画像が違う場合の対処方法
CSS側で背景画像（background-image）で切り替える。(重複して読み込まない)
CSS
@media (max-width: 767px) {
.bg {
background-image: url("img/img-sp.jpg");
}
}
@media (min-width: 768px) {
.bg {
background-image: url("images/img-pc.jpg");
}
}ブラウザ幅に合わせて画像のアスペクト比を維持したまま拡大縮小をする方法
padding-topを”%”で指定
- 画像の切り替えをbackground-imageで指定したい場合
- 画像などをiframeを埋め込みたい場合
- 画角の違う画像を一定の画角に収めたい場合
などにはこのような方法で画角を指定する必要がある。
例） 幅：1280px, 高さ：720pxの可変要素を作りたい場合
- 比率を固定したい要素をdivなどのタグで囲む
- 画角を計算し、対象の要素にpadding-topで指定する
720(高さ) ÷ 1280(幅) × 100 = 56.25
となるので、”padding-top: 56.25%;” と指定
padding-topを”56.25%”にすると、親要素の幅に対して56.25%の高さとなる。
HTML
<div class="wrap">
<div class="box"></div>
</div>CSS
.wrap {
width: 30%;
}
.box {
padding-top: 56.25%;
}
セクションNEWSの写真について
バラバラのサイズ画像でも同じ画角で表示されるよう、padding-topで比率を変えないようにし、position:absolute;で画像を真ん中に配置する。
CSS
.news-item-link {
color: $font-color;
font-size: 14px;
padding: 22px 0;
display: block;
@include mq("md") {
display: flex;
align-items: center;
&:hover {
.news-item-picture > img {
transform: translate(-50%, -50%) scale(1.05);
}
}
}
}
.news-item-picture {
position: relative;
padding-top: 61.5385%; // (260px /160px)
overflow: hidden;
> img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: transform .4s;
}
}box-sizingについて
reset.cssでは ”box-sizing: border-box;” を指定している。
要素の幅を1200pxと指定し、 padding: 0 40px; とした場合、コンテンツの表示幅が1120pxになる。
.innerのコンテンツの表示幅を1200pxとするために、 box-sizing: content-box; を指定。
CSS
.inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
box-sizing: content-box;
}
ハンバーガーメニュー
drawer.jsハンバーガーメニューをスマホ表示だけに適用せさる
head内のdrawer.jsのリンクに「 media=”screen and (max-width:767px)”」 を追記する。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
media="screen and (max-width:767px)">ハンバーガーメニューの位置調整でのsassの書き方について
HTML
<body class="drawer drawer--right">
<header class="header">
<div class="header-inner inner">
<h1 class="header-logo"><img src="./img/logo.png" alt="sobolon"></h1>
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav header-nav">
<ul class="drawer-menu header-nav-list">
<li class="header-nav-item">
<a class="header-nav-item-link" href="#concept">Concept</a>
</li>
<li class="header-nav-item">
<a class="header-nav-item-link" href="#feature">Feature</a>
</li>
</ul>
</nav>
</div>
</header>
</body>CSS
.drawer-hamburger {
.drawer--right & {
right: 3px;
}
}◎.drawer-hamburgerの下に.drawer–rightをネストする理由
一見子要素の下に親要素が入っているように見えるが、
コンパイル結果は「.drawer–right .header .drawer-hamburger」という順序になり、親要素と子要素がきちんと順序通りに指定されている
.drawer–rightの後の＆,＆は親参照セレクタ
.drawer–rightの後の＆には「.header .drawer-hamburger」という意味がある。
優先度、詳細度で負けてCSSが上書きされないときの対処法
回答例の動画通り書にコードを書いたが、right: 3px;に上書きされなかった。
メンターに対処法を確認➞!importantつけて強制的に上書きでOK!
詳細度で負けている。こういうのは!importantつけて強制的に上書きして問題ない。
.drawer-hamburger {
.drawer--right & {
right: 3px !important;
}
}
アニメーション
PCサイズの表示の時だけアニメーションをつける
理由：スマホで見た時にアニメーションの動きがおかしくなることが多いから。
アニメーションは、「何」を「どうする」をちゃんと指定する
transition: background-color .4s / color .4s;
そうしないとpaddingの横幅とか、意図しないアニメーションが効いてしまう事があるため。
<br>タグの使い方
pc表示だけ改行があるときはクラス名をつけて対処
<p class="about-text">そんな視点からこのブランドは生まれました。<br>
オシャレを楽しむ気持ちを大切にしながらも、<br class="is-pc">
ただ可愛いだけじゃない環境にやさしいアクセサリーを選ぶ人が増えていったら…<br>
その変化は少しずつ、だけども本質的に、<br>
この世界をHappyに変えていくのだと、私たちは考えます。</p>flexプロパティ
左右反転させるプロパティ、flex-direction: row-reverse
画像➞テキストと、スマホ表示の順番通りにhtmlを書き、PC表示のときはcssで左右反転させ、画像を右、テキストを左に配置できる。
HTML
<div class="concept2-inner">
<div class="concept2-picture"><img src="./img/concept-2@2x.png" alt=""></div>
<div class="concept2-message">
<p class="concept2-message-title">合言葉は、<br>「 “可愛い” で 地球を守る！」</p>
<p class="concept2-message-text">
深刻化している環境問題に対して、否定や制限、禁止といった強制的な方法ではなく、明るく幸せな未来を目指して、「可愛い」「楽しい」の力を信じて、愛につながる選択を世の中に増やしていきます。
</p>
</div>
</div>CSS
.concept2-inner {
@include mq("md") {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
}
.concept2-picture {
@include mq("md") {
flex: 0 0 50%;
}
}
.concept2-message {
margin-top: 34px;
@include mq("md") {
flex: 0 1 50%;
margin-right: 6.6667%; //( 80px / 1200px * 100);
}
}
flexプロパティの幅指定
固定幅と可変幅を組み合わせたレイアウトはflexプロパティを使う。
以下の様に記載すると50％分のスペースを使い、拡大・縮小はしない。
.concept-picture {
flex: 0 0 50%;
}以下の場合、50％分のスペースがなかった場合、縮小する。
.concept2-message {
flex: 0 1 50%;
}timeタグとdatetime属性
timeタグは、検索エンジンに向けて時間や日にちを示す要素。
検索エンジンやコンピューター側に、正確な日付を認識させるために、datetime属性を指定する。
HTML
<time datetime="2020-02-04">2020年2月4日</time>【初心者向け】timeタグの使い方とdatetime属性の役割を解説
ラジオボタンの表示・非表示はopacityを使う
display:none;で消すとカーソルでフォーカスされない。
opacityで表示・非表示にする。そうすればフォーカスされる。
opacityだと見えないけど要素は存在し邪魔になるのでposition:absolute;で浮かす。
HTML
<div class="contact-radio-wrap">
<label class="contact-radio">
<input type="radio" name="" class="contact-radio-input" value="法人" required checked>
<span class="contact-radio-part">法人</span>
</label>
<label class="contact-radio">
<input type="radio" name="" class="contact-radio-input" value="個人" required>
<span class="contact-radio-part">個人</span>
</label>
</div>CSS
.contact-radio {
position: relative;
}
.contact-radio-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}謎の余白ができたり、横スクロールが発生したときに原因を見つける方法
CSSに以下の記載をすると枠が表示されておかしい所を特定できる。
CSS
* {
outline: 2px solid blue;
}まとめ
まず初めに自力で課題をこなしました。
ぱっと見は結構見本に近く、いい感じにできたと思ったのですが、細かい所がボロボロでした。
回答例をじっくりみながら学習しました。
実装方法や新たに知ったCSSの記載方法があり、とても勉強になりました！