Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

前期講座06

北海道工業大学電子計算機研究部ネットワークチーム 前期講座資料06

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

前期講座06

  1. 1. CSS 基礎Ⅰ
  2. 2.  スライド中のフォントについて CSS の目的 CSS の利点 CSS の書き方 CSS のルール CSS の使い方 class と id の違い class, id を使った指定 CSS Selectors 課題
  3. 3.  前回のアンケートで、「紛らわしいフォントは使わないほうが良いと思う」という意見を頂いた。 これを踏まえ、今回からスライド中でサンプルコードを記載する際のフォントは米 Adobe 社が公開しているSource Code Pro というフォントを採用する。 間違いやすい文字をここに列挙する I … (アルファベット大文字のアイ) l … (アルファベット小文字のエル) 1 … (数字の一) 0 … (数字の零) o … (アルファベット小文字のオー) O … (アルファベット大文字のオー)
  4. 4.  HTML (文書構造) にスタイル (見栄え) を定義する 似たようなスタイルを再利用する 異なるスタイルは再定義 (上書き) する
  5. 5. 昔は HTML だけで見栄えも定義していたHTML 文書の構造が煩雑になる CSS を使うと… HTML をシンプルに保てる HTML はそのままで、デザインだけを変更できる 似たようなデザインを再利用できる欠点
  6. 6.  head の中に style タグで書くor head の中で link タグを使って読み込むCSS の利点を活かすには、外部ファイルで定義して、link タグで読み込む方が良い。<link rel="stylesheet" href="style.css">
  7. 7. body {background-color: #eeeeee;}h1 {color: #ff0000;font-size: 28px;} まずは、 style タグを使って HTML 文書の中に書いてみる 次に、外部ファイルに書いて link タグを使って読み込んでみる 外部ファイルで書く際のファイルの拡張子は .css にする
  8. 8. @charset "utf-8";body {background-color: #eeeeee;}h1 {color: #ff0000;font-size: 28px;}文字コードの指定カラーコードpx を用いたサイズの指定h1 要素に対するスタイルの定義セミコロンで閉じるコロンで区切る
  9. 9. I. HTML で class または id を指定する (基本的にclass)II. CSS で class と id 、要素の親子関係を使ってスタイルを適用する要素を指定するIII. スタイルを定義する
  10. 10.  id, class は HTML 要素に対して属性として指定することが出来る<h1 id="title" class="headline">見出し</h1> id は HTML 文書の中で同じ名前が一つだけしか存在してはならない class は同じ名前が複数存在しても良い
  11. 11.  class.headline {font-size: 26px;} id#title {text-decoration: underline;}
  12. 12.  CSS で要素を選択する方法で、下記のようなものがある 要素名: 指定した要素を選択する (要素型セレクタ) .class名: 指定した class を持つ要素を選択する (class セレクタ) #id名: 指定した id を持つ要素を選択する (id セレクタ) 要素A 要素B: 要素 A の子孫要素になっている要素 B を選択する (子孫セレクタ) 要素A > 要素B: 要素 A の子要素になっている要素 B を選択する (子セレクタ)他にも様々なセレクタがある
  13. 13.  講座アンケート 別途指定

×