フリーで働く！
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

フリーで働く！

フリーで働く（インターネットを使って稼ぐネタ）を掲載していきます。

Amebaでブログを始めよう！
次ページ >>

HTML10回目<<装飾>>


どうも hide です。

今回で１０回目のｈｔｍｌです。

今回は装飾について説明していきます。

装飾なので、タグについての装飾になります。  

早速下記タグを見ながら、説明します。

■段落タグから 文字を強調したい場合は<strong>タグを使います。

強調させたい範囲を<strong></strong>で囲います。

またインライン要素と言われるタグでこのタグもここからここまでという具合で範囲に対して装飾します。

<span>から</span>になります。 <span>で囲んだ範囲に装飾を加えていきます。 指定方法は、style=”　この中に指定していきます。　　”　になります。

font-size : 12pt;  これは文字サイズが１２ポイントです。

color : #0000ff;   これは文字色は青です。

background-color :#ffff00;   これは背景色は黄色です。

font-family : arial;    文字体はarialです。

以上の様に　何に対してかを記述して　プロパティーを　:     ;　の中に記述していきます。

続けて記述すると下記になります。

ここで構造を良く理解してください。

<p>これは<strong>装飾を加えた <span style="font-size: 12pt; color: #0000ff; background-color: #ffff00; font-family: arial;"> 段落タグです。</span> </strong></p>

Hタグも同じ要領です。

カラーコードはこちらから調べられます。 色をクリックするとコードが表示されます。→　http://html-color-codes.info/japanese/     
<!DOCTYPE html><!--このファイルはhtml5で記述しています-->

<html lang="ja"><!--基本的に日本語のページです-->
<head><!--ここからhead-->
<meta charset="utf-8"><!--文字はutf-8で記述しています-->
<title>このページはｈｔｍｌ５です</title><!--このページのタイトルです-->

</head>

<body>
<!--段落タグです-->
<p>これは<strong>装飾を加えた
<span style="font-size: 12pt; color: #0000ff; background-color: #ffff00; font-family: arial,helvetica,sans-serif;">
段落タグです。</span>
</strong></p>
<!--見出し１のタグです-->
<h1><span style="color: #ff6600;">見出し１のタグです。</span></h1>
<!--見出し２のタグです-->
<h2><span style="font-size: 18pt; color: #008080;">見出し２のタグです。</span></h2>
<!--見出し３のタグです-->
<h3><span style="font-size: 14pt; color: #0000ff;">見出し３のタグです。</span></h3>
</body>
上記の様にコードを記述すると 下記の様な表示になります。

sss

今回は装飾でした。

次回も装飾の続きになります。  

hideでした。

HTML９回目＜＜テーブルタグ＞＞

どうも hide です。

今回で９回目のｈｔｍｌです。

 

今回は、テーブルタグについて説明していきます。

このテーブルタグは、表をあらわす為のタグです。

<TABLE>はテーブル（表）を作成するタグです。

テーブル（表）の基本的な構造は、

<TABLE>～</TABLE>内に<TR>～</TR>で表の横一行を定義して、

さらにその中に<TH>～</TH>や <TD>～</TD>でセルを定義します。

テーブル（表）の各セルには見出しを定義するヘッダセル（<TH>～</TH>）

と、 データを定義するデータセル（<TD>～<TD>）があります。

ヘッダセル内のテキストは、

一般的なブラウザでは太字でセンタリングされて表示されます。

<TABLE>タグをレイアウト目的で使用するケースがありますが、

<TABLE>タグは本来はテーブル（表）を作成するためのタグです。

レイアウト目的には、できるだけスタイルシートを利用してください。

下記のサンプルコードには、タグ要素に対して、属性の指定を入っていて

わかりにくいですが、はじめの<th>タグの中に bgcolor="EE000"　と

ありますがこれが属性です。これはバックグランドカラー（背景色）です。

EE000　は色を指定しています。

font color="FFFFFF" これは文字色は白　です。

属性には、色々あり、細かすぎるので次の記事で説明します。

では、テーブルタグのサンプルコードです。

<!DOCTYPE html><!--このファイルはhtml5で記述しています-->
<html lang="ja"><!--基本的に日本語のページです-->
<head><!--ここからhead-->
<meta charset="utf-8"><!--文字はutf-8で記述しています-->
<title>テーブルタグです</title><!--このページのタイトルです-->
</head><!--ここまでhead-->

<body>

<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333"><!--　▼テーブルここから▼　-->

<tr><!--　▼１行目ここから▼　-->
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th><!--　１列目ヘッダセル　-->
<th bgcolor="#EE0000" width="300"><font color="#FFFFFF">説明</font></th><!--　２列目ヘッダセル　-->
<th bgcolor="#EE0000" width="50"><font color="#FFFFFF">金額</font></th><!--　３列目ヘッダセル　-->
</tr><!--　▲１行目ここまで▲-->

<tr><!--　▼２行目ここから▼　-->
<td bgcolor="#99CC00" align="right" nowrap>とんこつラーメン</td><!--　１列目　-->
<td bgcolor="#FFFFFF" width="300">２４時間かけて煮込んだスープを使用</td>
<!--　２列目　-->
<td width="50" align="center" bgcolor="#FFFFFF">６５０</td>
<!--　３列目　-->
</tr><!--　▲２行目ここまで▲　-->

<tr><!--　▼３行目ここから▼-->
<td bgcolor="#99CC00" align="right" nowrap>味噌ラーメン</td><!--　１列目　-->
<td bgcolor="#FFFFFF" width="300">１３種類の味噌をブレンドしました</td>
<!--　２列目　-->
<td width="50" align="center" bgcolor="#FFFFFF">６００</td>
<!--　３列目　-->
</tr><!--　▲３行目ここまで▲　-->

</table> <!--　▲テーブルここまで▲　-->

</body>

</html>

 

上記の様にコードを記述すると

下記の様な表示になります。

ssa

 

今回は、テーブルタグでした(

<table>

<th><td> </td></th>

<tr><td> </td></tr>

</table>

)でした。

基本は<tr>は行で<td>は列です。

次回は、テーブルタグを紹介します。

それでは、hide でした

 

HTML8回目＜＜リストタグ２＞＞

どうも hide です。

今回で８回目のｈｔｍｌです。

 

今回は、リストタグについて説明していきます。

このリストタグは、順序の有るリストの表記に使います。

リストタグは(<ol><li>  </li></ol>)で記述していきます。

<OL>タグではtype属性により、算用数字（1,2,3,...）、

アルファベット小文字（a,b,c,...）、 アルファベット大文字（A,B,C,...）、

ローマ数字小文字（ⅰ,ⅱ,ⅲ,...）、 ローマ数字大文字（Ⅰ,Ⅱ,Ⅲ,...）

を指定することができます。 また、start属性により開始番号を指定できます。

<!–  –>はコメントアウト（タグの説明）です。

 

<!DOCTYPE html><!--このファイルはhtml5で記述しています-->
<html lang="ja"><!--基本的に日本語のページです-->
<head><!--ここからhead-->
<meta charset="utf-8"><!--文字はutf-8で記述しています-->
<title>リストタグです</title><!--このページのタイトルです-->
</head><!--ここまでhead-->

<body>
<h1>味噌汁の作り方</h1>
<!--　タイプ１リスト　-->
<ol type="1">
<li>いりこやカツオでダシを取る</li>
<li>具材を入れて煮込む</li>
<li>豆腐を入れて少し煮込む</li>
<li>最後に味噌を溶く</li>
<li>ネギを入れて完成</li>
</ol>

<!--　タイプ a リスト　-->
<ol type="a">
<li>いりこやカツオでダシを取る</li>
<li>具材を入れて煮込む</li>
<li>豆腐を入れて少し煮込む</li>
<li>最後に味噌を溶く</li>
<li>ネギを入れて完成</li>
</ol>

<!--　タイプ A リスト　-->
<ol type="A">
<li>いりこやカツオでダシを取る</li>
<li>具材を入れて煮込む</li>
<li>豆腐を入れて少し煮込む</li>
<li>最後に味噌を溶く</li>
<li>ネギを入れて完成</li>
</ol>

<!--　タイプ i リスト　-->
<ol type="i">
<li>いりこやカツオでダシを取る</li>
<li>具材を入れて煮込む</li>
<li>豆腐を入れて少し煮込む</li>
<li>最後に味噌を溶く</li>
<li>ネギを入れて完成</li>
</ol>

<!--　タイプ I リスト　-->
<ol type="I">
<li>いりこやカツオでダシを取る</li>
<li>具材を入れて煮込む</li>
<li>豆腐を入れて少し煮込む</li>
<li>最後に味噌を溶く</li>
<li>ネギを入れて完成</li>
</ol>

</body>

</html>

 

上記の様にコードを記述すると

下記の様な表示になります。

 

aa

 

今回は、順序の有るリストタグ(<ol><li>  </li></ol>)でした。

次回は、テーブルタグを紹介します。

それでは、hide でした

 

HTML７回目＜＜リストタグ１＞＞


どうも hide です。

今回で７回目のｈｔｍｌです。

今回は、リストタグについて説明していきます。

リストタグは、順序の無いリストの表記に使います。

リストタグは(<ul><li>  </li></ul>)で記述していきます。

リストタグは　type属性をつけると、 項目ごとに黒丸（disc）、白丸（circle）、黒い四角（square）をつけ分けることができます。

使い方は、<ul type="disc">等

<!–  –>はコメントアウト（タグの説明）です。

では、サンプルコードです。

<!DOCTYPE html><!--このファイルはhtml5で記述しています-->
<html lang="ja"><!--基本的に日本語のページです-->
<head><!--ここからhead-->
<meta charset="utf-8"><!--文字はutf-8で記述しています-->
<title>このページはｈｔｍｌ５です</title><!--このページのタイトルです-->
</head><!--ここまでhead-->

<body>
<!--　通常リスト　-->
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
<!--　点タイプリスト　-->
<ul type="disc">
<li>サンプルタイプdisc</li>
<li>サンプルタイプdisc</li>
<li>サンプルタイプdisc</li>
<li>サンプルタイプdisc</li>
<li>サンプルタイプdisc</li>
</ul>
<!--　○タイプリスト　-->
<ul type="circle">
<li>サンプルタイプcircle</li>
<li>サンプルタイプcircle</li>
<li>サンプルタイプcircle</li>
<li>サンプルタイプcircle</li>
<li>サンプルタイプcircle</li>
</ul>
<!--　■タイプリスト-->
<ul type="square">
<li>サンプルタイプsquare</li>
<li>サンプルタイプsquare</li>
<li>サンプルタイプsquare</li>
<li>サンプルタイプsquare</li>
<li>サンプルタイプsquare</li>
</ul>

</body>

</html>

上記の様にコードを記述すると

下記の様な表示になります。

a

今回は、順序の無いリストタグ(<ul><li>  </li></ul>)でした。

次回は、順序の有るリストタグを紹介します。

それでは、hide でした

HTML6回目＜＜段落、見出しタグ＞＞


どうも hide です。

今回で６回目のｈｔｍｌです。

今回は、ホームページで表示する部分の＜＜タグ＞＞を説明します。

初めは、本当に簡単なタグです。

では、段落タグ<p>と、見出しタグ<h1><h2><h3>を見ていきます。

<p>タグは、ブログやホームページの普通文章に当たります。（段落文章）

<h1>タグは、見出しの文章です。（<h1>,<h2>,<h3>,<h4>,<h5>,<h6>)等

下記の様に、表示させたい文字をそれぞれのタグで挟んで記述します。

例<p>段落タグです</p>タグの終わりはスラッシュ/ が入ります。

<!--  -->はコメントアウト（タグの説明）です。

<!DOCTYPE html><!--このファイルはhtml5で記述しています-->
<html lang="ja"><!--基本的に日本語のページです-->
<head><!--ここからhead-->
<meta charset="utf-8"><!--文字はutf-8で記述しています-->
<title>このページはｈｔｍｌ５です</title><!--このページのタイトルです-->
</head><!--ここまでhead-->

<body><!--ここから本文-->

<p>段落タグです。</p><!--段落タグです-->

<h1>見出し１のタグです</h1><!--見出し１のタグです-->

<h2>見出し２のタグです</h2><!--見出し２のタグです-->

<h3>見出し３のタグです</h3><!--見出し３のタグです-->

</body><!--ここまで本文-->
</html><!--ここまでｈｔｍｌ-->

上記の様にコードを記述すると

下記の様な表示になります。

段落、見出し

 

今回は、段落ダク<p>と見出しタグ<h1><h2><h3>でした。

次回は、色んな種類のタグを紹介します。

それでは、hide でした。

 

次ページ >>