7月31日 (木)講義内容- 実技(HTML・CSS基礎)1-

Pocket

◆本日使用したタグと属性

○<span>    それ自身は特に意味を持っておらず<span>~</span>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用いるタグ【インライン】(p.50)
○<em>      テキストを強調する際に使用するタグ。一般的なブラウザではイタリック体(斜体)で表示される【インライン】(p.66)
○<strong>  テキストを強調する際に使用するタグ。一般的なブラウザでは太字で表示される【インライン】(p.66)
○<address> ページ作者のメールアドレスなど、このページに関する連絡先情報を表します。【ブロックレベル】(p.52)
○<div> 範囲を指定するタグ(グループ化)。特に意味づけはされていない。【ブロックレベル】(p.50)

◆ブロックレベル要素とインライン要素

【ブロックレベル要素とは】

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識される。
CSSで指定しない限り、横幅を取り続け、自動的に改行が入ります。
横幅(width)、高さ(height)が指定出来る

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

【インライン要素とは】

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。
一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。
ただし、imgタグは特殊扱いで、インライン要素でも横幅、高さが指定出来る。

<a>、<abbr>、<img>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

【配置ルール】

インライン要素の中には、文字や他のインライン要素を配置することができるが、
インライン要素の中にブロックレベル要素を配置することはできない

ブロックレベル要素の中にインライン要素を配置
<p><strong>段落となります。</strong></p>

インライン要素の中にブロックレベル要素を配置
<strong><p>段落となります。</p></strong>

◆CSSの記述箇所

CSSには3種類の書き方があります。
1. HTMLファイルのタグに直に書き込む方法
2. HTMLファイルのheadタグ内に書き込む方法
3. 別ファイルに記述をして、それをHTMLファイルに読みこませる方法
※仕事でやる場合は3番のやり方が一番多いです。

また、「1」「2」「3」で、プロパティの値を違う物にした場合、最終的に有効になるのは、「1」の書き方です。

「1」(1番強い)>「2」>「3」

【HTMLファイルのタグに直に書き込む】

:strongタグ内の文字色を赤くして太くする指定。
<strong style=”color:#ff0000; font-weight:bold”>テキスト</strong>

【HTMLファイルのheadタグ内に書き込む】

:strongタグの文字色を赤くして太くする指定。
<head>
<style type=”text/css”>
strong {
     color:#ff0000;
     font-weight:bold;
}
</style>
</head>

◆CSSの基本書式(教科書/辞典 P153)

・スタイルの指定内容は { } 内に記述する
・スタイルの指定は、プロパティと値のセットで行われる

◆色の数値について

00に近い値ほど黒が濃くなり、FFに近い値を指定する程、白に近い明るい色になる
色指定の方法は何通りかあります。
参考サイト>>http://www.interq.or.jp/www1/da4393/begin/color.html

 

◆DreamWeaver

・サイトの管理の設定
・タブウィンドウに関して
・ワークスペースについて
・カラーパレットについて
・CSSパネルについて

【便利なショートカットキー】

ctrl + 1~6 / <h1>~<h6>タグ
ctrl + shift + p / <p>タグ
shift + enter / <br />タグ
ctrl + p / プリント

リストタグの作成

リスト化したい<p>~</p>を作り、選択。
プロパティパネルの、リストのアイコンをクリック

pタグに戻す場合は、リストにしたコードを選択「<ul>〜</ul>」し、
プロパティパネルの、リストのアイコンをクリック


今日のお題(重要

今まで勉強したタグの一覧ページを作成。

次回、CSSで背景色を付けます。

 

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください