CSS/SCSS 学科 CSS基礎①
Chrome検証ツール
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効。
表示方法
ブラウザの画面で右クリック＞検証
リセットCSS
ブラウ...
2023-06
CSS/SCSS 
Illustrator Illustrator備忘録
定番のあしらいの制作練習
使用ソフト
Illustrator
概要
リボンや矢印の装飾をIllustratorで制作しました。
制作にかかった時間
...
CSS/SCSS HTML/CSS備忘録
【メディアのコンポーネントを作成】
BEM設計でメディアのコンポーネントを作成
ここでいう「メディア」とは、2列のレイアウトで片方に画像や写真、もう片方に文言が並ぶ
クラス名は、
media
media__image
...
Photoshop Photoshop備忘録
YouTubeバナーの制作
使用ソフト
Photoshop
概要
自分のチャンネル用にYouTubeバナーを制作してみました。
制作にかかった時間
1時間30分
...
Illustrator Illustrator備忘録
アイコンの制作練習
使用ソフト
Illustrator
概要
最近Illustratorを触っていなかったため、リハビリに制作しました。アイコンを制作するだけでも様々な...
CSS/SCSS HTML/CSS備忘録
【ナビゲーションのコンポーネントを作成】
BEM設計でナビゲーションメニューのコンポーネントを作成
クラス名は、
nav
nav__list
nav__item
display: flex;で横並び
各項目...
HTML 学科 HTML基礎④
CSSの適用方法
HTML ファイルとは別に記述する場合
CSSファイルをHTML ファイルと別ファイルで記述
HTML ファイルの head タグ内（<head>～<...
HTML 学科 HTML基礎③
特殊文字
半角スペース
半角スペース1つの場合は、そのまま半角にした状態でスペースキー
半角スペース2つ以上の場合は、「 」を複数入力
全...
CSS/SCSS HTML/CSS備忘録
【見出しのコンポーネントを作成】
BEM設計で見出しのコンポーネントを作成
クラス名は、
heading
heading__title
heading__link
2パターン作成
見出しの文言だけのケー...
CSS/SCSS HTML/CSS備忘録
【ボタンのコンポーネントを作成】
BEM設計でボタンのコンポーネントを作成
クラス名は、
btn
btn--short
btn--long
btn--full
ボタンの幅を指定するのに、Mo...