HTML/CSS基礎④ CSS実践
講義内容
1限目
学科 HTML/CSS基礎④
CSSの記述方法について
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
メモ
・target=”_blank”がわからん
A.targetはリンクの表示先の指定(hrefで使う)
┗_self 同じウインドウ※記述なければこっち
┗_blank 新しいタブまたはウィンドウで開く
別サイトに飛ぶときは_blankを使うと良い。
ページバックで戻ると不便に感じる時がある(調べものとか、元記事を確認しながら操作するとき等)。
<li><a href="https://www.rakuten.co.jp/" target="_blank">Online Shop</a></li>・<em>わからん
A.強調表現斜体になるが斜体にしたいときに使ってはいけない。
<em>03-1234-5678</em>WEBのフルサイズスクショの方法
デベロッパーツールを開いて、Capture full size screenshotを押す。
進捗
講義資料
CSSの記述個所について
１．別でcssファイルを作る
同じフォルダにcssファイルを作成する。ベースのcss名は「style.css」で作成する。
２．htmlのheadに書く方法
基本はhead内→最初に読み込むから文章のロードが遅くなる。
会社によって記述個所が違う時がある
★どこに入れると早い？予想はフッターの下。
３．タグに直書き
変更できるがCSSの優先順位が高いため、CSSファイルで管理しているときは修正箇所が増えるから非推奨。
緊急対応の時くらいでしか使わない。
<h2>hogehoge</h2><h2 style="ここにCSSを直接記述する">hogehoge</h2>※１と２を複合して使う場合は記述が上から読み込まれることに注意する。
参考 https://qiita.com/yusuke___web/items/d5e5a770f13d063b97f7
HTMLでの属性付け
ミスしたところ
・段落の末尾に</br>つけてた。
段落の<br>は改行したいところにだけ。末尾に</br>は存在しない。
・「<a href=」を「<a herf=」で記述したためリンクが作れていなかった。
初めて使う要素はつづりに気を付ける。
・画像のリンクがコピペ元の記述のままだった。
コードをコピペするときは要注意、ミスしやすそうだから慣れるまではセクションごとに
ページの確認を行う。
画像の取り扱いについて【復習】
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。
参考サイト
特殊文字について【復習】
HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。
参考サイト
CSSの基本構造について【復習】
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。
Webページ制作実践②
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- テキスト分類タグについて
- コンテンツ埋め込みタグについて
- CSSとの紐付けについて
- セレクタの記載方法