WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTML基礎

リストタグ

ul(unorderedlist/アンオーダーリスト)

順番が変わっても良い時に使う。

例:
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

  • リスト1
  • リスト2
  • リスト3

ol(orderedlist/オーダーリスト)

順番が決まっている時に使う。1,2,3…と先頭に文字が入る。

例:
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

  1. リスト1
  2. リスト2
  3. リスト3

dl(definitionlist/ディフィニッションリスト)

リスト全体に対して名称(用語)とその説明文(定義)をセットにしてリスト化するときに使う。

例:
<dl>
  <dt>用語1</dt>
  <dd>定義1<dd>
  <dt>用語2</dt>
  <dd>定義2<dd>
</dl>

用語1
定義1
用語2
定義2
|


http://efu.sakura.ne.jp/web/0318/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の献立</title>
</head>
<body>
<h1>今日の献立</h1>
<p>今日は子供も大人も好きなカレーを作ろうと思います。</p>
<h2>カレーの材料</h2>
<ul>
<li>カレー・ルー</li>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>

<dl>
<dt>りんご</dt>
<dd>赤い色をした丸い果物。</dd>
<dt>バナナ</dt>
<dd>黄色い色をした細長い果物。</dd>
</dl>

<ol>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ol>
</body>
<html>

画像を表示

<img src="画像のソース" width="400" height="250" alt="" title="メガネ">

http://efu.sakura.ne.jp/web/0318/index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML:画像を表示</title>
</head>
<body>
<h1>画像を表示</h1>
<p>HTML内に画像を挿入する記述</p>
<p><img src="img/01.jpg" width="400" height="250" alt="画像の説明文" title="オンマウスで表示"></p>
</body>
</html>

昔はwidthとheightを書くと早かったので書いていたが今は普通と変わらないので書かないことが多い。
alt(オルタネート/alternate)は検索エンジンで拾われる。
画像が出ないエラーの時に文字が表示される
titleはオンマウスで表示。(必要な時のみ使用)

見出しと段落

h1~h6

見出し
重要度が高い順番に1~6ある

p

段落
h1とpはセットで記述する


http://efu.sakura.ne.jp/web/0318/index4.html

<!DOCTYPE html>
<html lang=ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<h1>デザインの話</h1>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました</p>
<h2>パッケージの色</h2>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>

<h3>見出しと段落のレイアウト</h3>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
<h4>見出しのレイアウト</h4>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で・・・といった具合に、重要なものから順々にマークアップいきます。

見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で・・・といった具合に、重要なものから順々にマークアップいきます。</p>
<h5>段落のレイアウト</h5>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。

パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします</p>

</body>
<html>