1月の授業日記

1月
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
 

1/13 CSS1

CSSとは

  • htmlは定義した構造に見合った規定の見栄えをブラウザが解釈し表示させていたが、自由度が低い
  • 表示の部分のみを構造から分離し、独自に定義させるために追加された言語がスタイルシート(CSS)

CSSの基本書式

プロパティ:値

さまざまな表示に関する設定(プロパティ)を指定できる

HTMLの中で指定する方法

  1. タグ内にstyle属性で直接指定

タグ内にstyle属性で直接指定する場合

<タグ style="プロパティ:値">

複数のプロパティを指定する場合

ひとつのプロパティの終わりにセミコロン;をいれる

プロパティ:値;プロパティ:値;

タグの再定義

HTMLたぐの表示効果を自分の好みに応じて再定義することもできる

タグから独立して指定する場合

セレクタ{プロパティ:値}

セレクタで対象(タグなどを指定する)

記述場所

<head>内で<style>〜</style>で括った中

今日の一言

久しぶりだったので、ところどころ曖昧でした。

1/20 CSS2

スタイルシートの基本書式

プロパティ:値;

  • タグに関係なく見栄えの設定(プロパティ)を変えられる
  • プロパティと値の間はコロン(:)命令の区切りはセミコロン(;)
  • HTMLと違う書式なので溶け込ませる方法が3通りある

1.タグの中にstyle属性の属性値として入れる

<タグ style="プロパティ:値">

2.<head>に記述する

  • <head>に記述すればページ内全てを一括で指定できる
  • <style>タグでくくる
  • 何に対しての指定かを示すセレクタが必要になる

<head>
<style>
セレクタ
プロパティ:値;
</style>
</head>

3.外部スタイルシート

  • スタイルシートをHTMLとは独立したファイルにつくりリンクを貼る
  • 外部スタイルシートを修正すればリンクされているページ全てを一括変更できる

外部スタイルシートファイル

  • 拡張子.cssで作成するテキストファイル
  • HTMLではないので紛れ込ませるタグは必要なく直接CSSで記述できる

外部スタイルシートへのリンクの設定

リンクの記述は<head>内の<link>タグで記述する

<link rel="stylesheet" type="text/css" href="スタイルシートへのパス">

クラスセレクタ

タグと関係なくスタイル指定を入れる場合

(タグ).クラス名{プロパティ:値;}

  • タグの中の1部分だけ別扱い、あるいはタグと関係なくスタイル指定だけ行いたい場合、エリアに識別する名前をつけて指定することができる
  • 名前はclass属性で英数半角で自由に定義できる
  • 指定したい部分にタグがない場合、class属性をつけるために表示効果のない<div>タグ<span>タグを用いる
  • CSSでクラスを指定する際にはクラス名の前に『.』(ドット)をつける

表示効果のないタグ

文章の意味合いと関係なく文章の1部をタグ付けし区切ったりするには、意味合い・表示効果のない以下の2つのタグを用いる
ブロックなど改行を伴う部分を指定する

<div class="クラス名">〜</div>

行内の1部分など改行しない場合

<span class="クラス名">〜</span>

今日の一言

また新しいタグが出てきてさらに難しくなった気がしました(笑)
テストがんばる