CSS/SCSS 学科 CSS基礎⑥
レスポンシブWebデザイン
レスポンシブWebデザインとは
一つのソースコードで複数のデバイスに対応する方法
レスポンシブWebデザインのメリット
複数デバイスの HTML ファイルが1つで済むので修正や更新作業が1回で済む...
職業訓練
CSS/SCSS CSS/SCSS 学科 CSS基礎⑤
練習問題：Webページ運用・作成の困った問題
問題
レイアウトデザイン 練習問題④
修正前のサイト
回答
苦戦してた箇所
テキストエディターを、職業訓練学校で使用しているTeraPadで検証したため、全角スペース...
CSS/SCSS 学科 CSS基礎④
display:flex; でfloatの回り込みができるか調査
結論・・・できない
flexはあくまでボックス内でのレイアウトや並びを制御するプロパティ
display: flex;は隣の要素の下へは回り込まず、要素が横並び...
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
ブラウ...
HTML 学科 HTML基礎④
CSSの適用方法
HTML ファイルとは別に記述する場合
CSSファイルをHTML ファイルと別ファイルで記述
HTML ファイルの head タグ内（<head>～<...
HTML 学科 HTML基礎③
特殊文字
半角スペース
半角スペース1つの場合は、そのまま半角にした状態でスペースキー
半角スペース2つ以上の場合は、「 」を複数入力
全...
HTML 学科 HTML基礎②
リストについて(ul, ol, dl)
ul
順序のないリスト
<ul>
<li>リスト要素</li>
<li>リスト要素</li>
</ul>
リスト要素
リス...
HTML 学科 HTML基礎①
HTML・・・Web ページ内の各要素の意味や文書構造を定義
CSS・・・レイアウトデザインや各要素の装飾（色・サイズなど）を定義
JavaScript/jQuery・・・動きを付けたり計算などの処理
文字コード
...