暮らしをおトクにかえていく|ポイントインカム
ワラウ - 遊べるポイントサイト
Internet Explorer
Version 7以降
Fire Fox
Version 3.5以降
Safari
Version 5以降
それ以前のバージョンでは表示が異なる場合があります。
  • 現在製作中...


HTML & CSS & JavaSc...

HTML & CSS & JavaScriptリファレンス

価格:2,625円(税込、送料別)

レンタルサーバー&ドメイン

ホームページを作るときにはサーバー(作ったHTMLを置く所)を借りなければいけません。お手頃なレンタルサーバーをいくつか上げてみました。



月額105円から、キャンペーンあり


380円から借りれるお得なサーバ!!オススメ


ナウでヤングなレンタルサーバー


20GBの大容量で『お試し期間が2週間!!』


文章を書く

見出し

新聞・雑誌などで、記事内容が一目でわかるように、文章の前に書く簡単な言葉・標題・タイトルのことを『見出し』 と言います。HTMLでも『見出し』用のタグがあります。

<h1>見出し1番目</h1>
<h2>見出し2番目</h2>
<h3>見出し3番目</h3>
<h4>見出し4番目</h4>
<h5>見出し5番目</h5>
<h6>見出し6番目</h6>

※<h1>が一番重要な見出しです。次に<h2>、<h3>...と続きます。

見出し1番目

見出し2番目

見出し3番目

見出し4番目

見出し5番目
見出し6番目
<h2>の見出しで『修学旅行のしおり』を表示してみましょう。

答えはここをクリック

<h2>修学旅行のしおり</h2>

段落(だんらく)

文章を書くときに見出しをつけたら次は『段落』です。文章と文章を区切るときに使います。
段落には<p>(ピー)タグをつかいます。

<p>昔々ある所におじいさんとおばあさんが住んでおりました。</p>
<p>ある日、おじいさんは山へ芝刈りに、おばあさんは川へせんたくに...</p>

昔々ある所におじいさんとおばあさんが住んでおりました。

ある日、おじいさんは山へ芝刈りに、おばあさんは川へせんたくに...

このように自動で行と行の間にスペースができます。

『今日の朝ごはん』と『今日のお昼ごはん』をそれぞれ別の段落で表示してみましょう。

答えはここをクリック

<p>今日の朝ごはん</p>
<p>今日のお昼ごはん</p>

改行(かいぎょう)

文章を書いているうちに、次の行からあらたに始めたい場合は<br>(ビーアール) タグで強制的に改行することができます。

ドンブラコッコッ ドンブラコッコッと桃がながれてきました。<br>おばあさんは桃をひろあげようとしました...
ドンブラコッコッ ドンブラコッコッと桃がながれてきました。
おばあさんは桃をひろあげようとしました...

見た目は『段落』と似ていますが、段落の場合は<p>タグ、 改行の場合は<br>タグを使うようにしましょう。

水平線(すいへいせん)

文章や画像の区切りとして線を引きたいときは<hr>(エイチアール) タグで水平線を引くことができます。

ももたろうは立派にスクスク育ちました。<hr>青年になったももたろうはある日...
ももたろうは立派にスクスク育ちました。
青年になったももたろうはある日...

<hr>水平線は長さ(width) や太さ(size)を変えたり、色(color) を付けたりすることができます。widthやsize、colorはすでに出てきています。指定の仕方は同じです。
くぼみのような影を消したい場合は、noshadeを加えます。

高さを変える
<hr size="30">
長さを変える
<hr width="40">
色を変える
<hr color="blue">
くぼみを消す
<hr size="10" noshade>
高さを変える
長さを変える
色を変える
くぼみを消す
『ももたろう』と『きんたろう』の間に『緑色(green)』の、太さ『10』 の水平線を引いてみましょう。

答えはここをクリック

ももたろう
<hr color="green" size="10">
きんたろう

リスト

ホームページでは、ページの左側や右側にサイトの項目をしめすナビゲーションがあります。  これらはリストをつくるタグで書かれている場合が大半です。タグは<ol>、<ul>、<li> といっきに三種類もタグがでてきます。順番に見ていきましょう。

まずリストに番号をつけて表示します。

<ol>
 <li>いぬ</li>
 <li>さる</li>
 <li>きじ</li>
</ol>
     
  1. いぬ
  2.  
  3. さる
  4.  
  5. きじ

このように上から順番に自動で数字が表示されます。では<ul>はどうでしょう

<ul>
 <li>ももたろう</li>
 <li>きびだんご</li>
 <li>おびがしま</li>
</ul>
     
  • ももたろう
  •  
  • きびだんご
  •  
  • おにがしま

<ul>はリストのあたまに●がつきます。

それでは好きな食べ物をリスト表示してみましょう。1.カレーライス、2.ハンバーグ、3.オムライス

答えはここをクリック

<ol>
 <li>カレーライス</li>
 <li>ハンバーグ</li>
 <li>オムライス</li>
</ol>

これで文章を書くの必要なタグはだいたい出てきました。
今までに出てきたタグと組み合わせて色を付けたり大きさを変えたりすればホームページを作っていくことができます。

次のページでは『フォーム』を見ていきます。