CSS/SCSS 学科 CSS基礎④
display:flex; でfloatの回り込みができるか調査
結論・・・できない
flexはあくまでボックス内でのレイアウトや並びを制御するプロパティ
display: flex;は隣の要素の下へは回り込まず、要素が横並び...
CSS/SCSS
CSS/SCSS CSS/SCSS 学科 CSS基礎③
widthとmax-widthとmin-widthプロパティの違い
widthは幅を指定。初期値はauto
max-widthは最大幅を指定。初期値はnone
min-widthは最小幅を指定。初期値はauto
※max...
CSS/SCSS 学科 CSS基礎②
background-imageとimgの違い
alt属性はimg要素のみ指定可能
background-imageはなくても意味合いが通じるが、imgはないと意味合いが通じなくなる。
text-decorationプロパ...
CSS/SCSS 学科 CSS基礎①
Chrome検証ツール
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効。
表示方法
ブラウザの画面で右クリック＞検証
リセットCSS
ブラウ...
CSS/SCSS HTML/CSS備忘録
【メディアのコンポーネントを作成】
BEM設計でメディアのコンポーネントを作成
ここでいう「メディア」とは、2列のレイアウトで片方に画像や写真、もう片方に文言が並ぶ
クラス名は、
media
media__image
...
CSS/SCSS HTML/CSS備忘録
【ナビゲーションのコンポーネントを作成】
BEM設計でナビゲーションメニューのコンポーネントを作成
クラス名は、
nav
nav__list
nav__item
display: flex;で横並び
各項目...
CSS/SCSS HTML/CSS備忘録
【見出しのコンポーネントを作成】
BEM設計で見出しのコンポーネントを作成
クラス名は、
heading
heading__title
heading__link
2パターン作成
見出しの文言だけのケー...
CSS/SCSS HTML/CSS備忘録
【ボタンのコンポーネントを作成】
BEM設計でボタンのコンポーネントを作成
クラス名は、
btn
btn--short
btn--long
btn--full
ボタンの幅を指定するのに、Mo...
CSS/SCSS CSS備忘録
【リストの矢印の作り方】
border-topとborder-rightで線を作るのがポイント
widthとheightを同じ値で指定
border-topとborder-rightを指定
transform: ...
CSS/SCSS 架空サイト制作(給食パン屋さん、ドットインストール 256timesで制作)
フロントエンド案件修行 給食ぱん屋編(制限時間：8時間)
製作ファイル
↓スマホサイズでご覧ください。
index.html
案件の概要
架空パン屋さんのサイト制作(SP版のみ)
...