学科　HTML/CSS基礎③

2025.04.29

アジェンダ

  1. テキストの意味と画像について
  2. CSSの基本構造について
  3. CSSの基本構造について
  4. Webページ制作実践
  5. 本日のまとめ

テーマ：HTMLとCSSを結び付けていきましょう

HTML内のタグ

コメントアウトについて

HTML　<!–コメント–>
CSS　/*コメント*/

HTML、CSSの記述をしているとき、コメントアウトで入力することにより本文に反映されない文字を書いておくことが出来る

HTML　テキストの意味

例）<P>～</P>の中の文章で強調したい文字列がある場合など
<P> 前後の文章 <※> 強調したい文章 <※> 前後の文章 </P>

＊HTML記述の場合、強調には意味があることが前提

強調<※>の内容

  • <a>…<a href>
    ハイパーリンク、画像にもリンクを張ることが可能
  • <em>
    主張、力説したい内容
  • <strong>
    重要、重大、緊急性
  • <small>
    主要なコンテンツに付随する短いコメントなど
    免責事項、著作権、警告文など
  • <i>
    慣用句、特定用語、技術的な専門用語など
  • <b>
    意味はたいしてないが、注目してほしいところなどを太字に
  • <br>
    改行、空要素なので終了タグは不要
  • <target>
    _self　現在開いているサイトが書き換わり開く
    _blank　新しいタブやウィンドウで開く
  • <rel>
    noopener　信頼できないサイトを設定　文章改ざんできない
    noreferrer　信頼できないサイトを設定　新規タブ等で開く
  • <id=” “>
    TOPに戻るなどのサイト内リンクの誘導用に名前を付ける
  • <span>
    特定の範囲をグループ化
    意味がなくとも使える
  • <div>
    ひとつのかたまりの範囲
    意味がなくとも使える

HTML　コンテンツの読み込み

<img>　画像を扱うタグ、終了タグ不要
　_src　必須属性、パス
　alt　=”代替テキスト”、画像が表示できないとき文字起こし用
　width　横方向ピクセル値
　highth　縦方向ピクセル値

例）<img src=” ” alt=” ” width=”サイズ” highth=”サイズ”>

<i frame src> ～ </i frame>
　ページの埋め込み、グーグルマップなど、width,highthも必須
　～にはURLもしくはパスを入力

<img>タグに使えるもの

  • PNG
  • GIF
  • JPEG
  • ベクター（SVG）
  • PDF
  • アニメPNG
  • アニメGIF

特殊文字　変換ツールあり（HTML特殊文字などで検索）
　©を&COPYなど、一覧から該当のものを使用
　・文字実体参照
　・10進数
　・16進数
　　　　などで記述可能

＊HTMLチェッカーなどで内容確認が可能
　・URL貼り付け
　・ファイルを張り付け
　・内容を直にコピペ

id/class属性について

idとclassの使い分けについて　特徴
class属性　クラス名のようなもの（クラスのスケジュールを一括管理）
<div class=”class name”>
……
</div>

id属性　生徒名のようなもの（生徒一人一人を識別する感じ）
<div id=”id name”>
……
</div>

＊HTML及びCSSにてid属性、class属性を使用することが可能だが、id属性のページ内に一意な識別子を付与するために一度だけ使用できるといった特性や点数の観点からCSSではclass属性を使用することが多い。

CSSの基本構造について

CSSの書き方
・HTML内に記入<style ~ >
・別のシートで記入（学校ではこちら）

　※サイトが複数ページある場合など変更が容易なため別シートが良い

CSSの記述について

style.css（シート名）を作る

記述内容例

P{
　color:red;
　font-size:50px;
　font-weight:bold;
　}

紐づけ

<link href=”style.css” rel=”stylesheet” type=”text type”>

CSSセレクタ・プロパティ・値について

P（セレクタ＝どこの）{
　color（プロパティ＝なにを）：red（値＝どうする）
　}

記述例でいうと
P　→　セレクタで「どこを」という指定
color　→　プロパティで「何を」という指定
red　→　値で「どうする」という指定

セレクタの書き方の種類

全称（*）
型
id(#)
class(.)
子孫結合子
子結合子（>）
隣接兄弟結合子（+）
一般兄弟結合子（~）

使い方について

例）footer内のP部分の文字を赤くする
footer p{
　　　　color:red;
　　　　｝

他、文章の一部のみを変更したいなどの場合はCSSではできない。その場合は<span>タグを併用する。（spanタグ＝インライン要素のHTMLタグ）

インライン要素なら一部分だけ文字色を変更できる！

親子関係・孫・子孫の考え方

親
　子1
　　孫1
　　孫2
　子2
　　孫1
　　孫2

親
　子1
　子2
　子3
　子4
　子5
※子は兄弟関係

親子関係を整理して結合子を考えること

他、注意点

id #　ページ内リンクができる
class .　ページ内リンクが出来ない

class .{
　　　color:orange;
　　　｝

CSSの点数・加算方式、命令の優先度

セレクタ全称　　0
要素セレクト　　1
擬要素セレクト　1
属性　　　　　　10
class　　　　　　10
擬class　　　　　10
id　　　　　　　100

idを使用すると、優先順位がidに偏る
<section id=”eventTop” class=”event”>
<セクション＝イベントトップ、クラスイベント>

CSS単位

px　ピクセル
％　百分率、親に対して何％か
em　1em=100%　2em=200%　フォントで使われる
rem　フォントに使われる　r=ルート　初期値は16
vw　画面幅100％として指定する
vh　画面高さ100％として指定する
calc　値を計算してくれる　四則演算

width:calc((100% – 50px)/2);

色の指定方法
  • red
  • blue
  • lime

1.カラーネーム
2.#16進数6桁（RGB光の三原則）　HEX
　8桁の場合は透明度の情報がある場合
　3桁の場合（例：＃FF0033など2つずつ数値が続く場合F03となる）
　　R G B
　＃FF0000　赤
　＃00FF00　緑
　＃0000FF　青
　＃FFFFFF 白
　＃000000　黒
3.rgb（）関数/rgba（）関数
　　R G B a
　＃FF6600
　　R＝FF　16×16
　　G＝66　16×6+7
　　B＝00　0
　　a＝0.8

4.hsla（）関数/hsl（）関数
　hue＝色相
　hsla＝彩度+輝度
　lightness＝明るさ

5.線形グラデーション
　（linear-gradient関数）

6.放射グラデーション
　（radial-gradient関数）

感想

何とかまとめてみたが、よくわからな過ぎて何書いてるのかもあまりわかっていない。どうしよう。

＼ 最新情報をチェック ／

コメント

PAGE TOP