裏側の私

このBLOGはどこへ向かっていくのだろう・・・幅広く浅く書いてます(爆)


テーマ:

ひな型を作ってみようはこちら へ。
HEAD編はこちら
BODY編その1はこちら
BODY編その2はこちら

IE(インターネットエクスプローラー)使用という想定でお話を進めていきますので、他のブラウザの方はごめんなさい。

今回はTABLEの作り方です。
いつの間にか、アメブロでもTABLEタグが使用できるようになったみたいなので、覚えると便利かも♪
使い道思いついてないけど_| ̄|〇
今回も、BODYの中に打ち込んでいくので、前回のファイルに書き足すのが早いと思います。

では、以前に作ったHTMLファイルを開いてね。
開いたら、ツールバーの「表示」から「ソース」を選択してください。
メモ帳でソースが開くはずです。
開いたメモ帳に書き込んでいく形式になります。

見本サイトはこちら です。このようになっていれば正解です!

では、続きに打ち込んでみましょう!(タグは必ず半角英数字で・・・)

<html>
<head>
<meta name="author" content="miyo">
<meta name="description" content="ようこそ、CAFE BLOOM へ。素材と日記のページです">
<meta name="keyword" content="WEBフリー素材、日記、リヴリー">
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="ext/CSS">
<title>Cafe Bloom by MIYO</title>
</head>

<body>
<p align="center">
<table border=1>
<tr align="center">
<td bgcolor="#ffffcc">What's New?</td>
<td><img src="img/tanpopo.gif"></td>
<td bgcolor="#ffffcc"><a href="
http://guchiri-miyo.ameblo.jp/">My Blog</a></td></tr>
<tr align="center">
<td><img src="img/panse.gif"></td>
<td bgcolor="#ffffcc">Material</td>
<td><img src="img/mori_ki.gif"></td></tr>
<tr align="center">
<td bgcolor="#ffffcc">Profile</td>
<td><img src="img/sakura.gif"></td>
<td bgcolor="#ffcccc"><h3 align="center">Cafe Bloom by MIYO</h3>Welcome my site!</td></tr>
</table>
</p>
<p>
<font size="1" color="#66cccc">前々回のファイルへ <a href="
http://www.green-thumb.ne.jp/top/kouza/mihon03.html ">ここ</a></font><br>
<font size="1" color="#66cccc">前回のファイルへ <a href="
http://www.green-thumb.ne.jp/top/kouza/mihon04.html ">ここ</a></font>
</p>
<hr>

<h3>いろんな表</h3>
<div align="left">
枠線なし
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
枠線あり
<table border=1>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
枠線あり、色つき
<table border=1 bordercolor="red">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
枠線あり、色つき、背景色つき
<table border=1 bordercolor="red" bgcolor="pink">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
余白を作るには
<table border=1 bgcolor="pink" cellpadding=3>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
枠線の太さを変えるには
<table border=1 bgcolor="pink" cellpadding=3 cellspacing=3>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
ちょっと特殊形(タイトルあり、くっつきセルあり)
<table border=2 bgcolor="#cc99cc" width="300" height="100" cellpadding=3 cellspacing=3>
<tr bgcolor="#ff6699"><th></th><th>サクラ</th><th>ウメ</th><th>キク</th></tr>
<tr><td>目指す色</td><td>オレンジ</td><td>ミドリ</td><td>アオ</td></tr>
<tr bgcolor="#ffccff"><td>テントウムシ</td><td>69</td><td>0</td><td>0</td></tr>
<tr><td>バッタ</td><td>65</td><td>39</td><td>48</td></tr>
<tr bgcolor="#ffccff"><td>ルリセンチコガネ</td><td>0</td><td>0</td><td>84</td></tr>
<tr><td>ツマグロヒョウモン</td><td>0</td><td>0</td><td>0</td></tr>
<tr bgcolor="#ffccff"><td>アオムシ</td><td>0</td><td>0</td><td>2</td></tr>
<tr><td>セスジスズメ</td><td>0</td><td>0</td><td>0</td></tr>
<tr bgcolor="#ffccff"><td>クロムシ</td><td>0</td><td>0</td><td>44</td></tr>
<tr><td colspan=4>色替えエサやり一覧</td></tr>
</table>
</div>
</body>

</html>

ここまで打ち込んだら名前をつけて保管しましょう♪
保管するときは、「ファイル名.html」で保管してくださいね。


では、タグの解説です。
<table border=1></table>
表形式を書きますよという宣言になります。
このタグがないと、表を作ることはできません。
また、ここに入力されているborderで罫線の太さを指定します。
数値が大きくなると線が太くなります。

<tr></tr>
テーブルの行の指定をします。
このタグの数によって、何行の表なのか決定します。

<td></td>
データセルの設定になります。これの数でマスの数が決定します。
間違えないようにね♪

<th></th>
見出しセルの設定になります。
このタグで囲むと、自動的に太字の真ん中寄せになります。

<table border=1></table>
テーブルの外枠線の太さを指定します。
数値が大きくなれば太い線です。

<table border=1 bordercolor="red"></table>
テーブルの枠線の色の指定をします。
色の名称か、#RBGで入力します。

<table width="300" height="100"></table>
widthで横幅の指定をします。ピクセルで指定するか、パーセンテージで指定します。
heightで高さの指定をします。ピクセルで指定するか、パーセンテージで指定します。
たとえば、100%と入力すると画面いっぱいの表が作れるということになります。
横幅、高さは画像の大きさをいじるときにも使えるので覚えましょう。
幅・高さの指定はセルごとにも指定できます。
<th>や<td>タグの中に同じように入れましょう。

<table bgcolor="pink"></table>
テーブルに背景色をつけます。
背景色の指定は行・セルごとにも指定できます。
<tr><th><td>タグの中に同じように入れましょう。
ただ、やりすぎると目が疲れるよ・・・・

<table cellpadding=3></table>
セルの余白の指定になります。

<table cellspacing=3></table>
セルとセルの間隔を指定します。表の中の罫線の太さを変更すとというとわかりやすいかな?

align="" center・・・真ん中寄せ left・・・左寄せ right・・・右寄せ
横位置の指定になります。これはいろいろなところに使えますよ。
ここでは、セルの中に入れることで文字の位置をしていするのに使用しています。
tableタグの中に埋めると文字の回りこみの指定ができます。
画像に対しての文字のまわりこみにも使えるので、いろいろうちこんでみて試してください。

valign="" top・・・上寄せ middle・・・真ん中寄せ bottom・・・下寄せ
セルの縦位置の指定になります。

<th rowspan=><th>
複数行にまたがるセルを作ります。

<th colspan=><th>
複数列にまたがるセルを作ります。

<a href="URL"></a>
リンクです。これはおなじみですよね?

<img src="">
画像を貼り付けるタグです。
詳しくは3日くらい前の記事でどうぞ♪

スタイルシートを使うと、罫線を点線にしたりして遊べます。
今より細かい指定もできるようになります。

今日はこんな感じで~す。
今回はちょっとややこしいかもしれません。
でも、テーブルはいっぱい作って身につけるしかないと思うので、いろいろ作ってみてください!
面倒な場合は、ソフト入れるのが手っ取り早いけど・・・
ただ、仕組みがわかってたほうが絶対にいいと思う!
質問などありましたら、コメント欄にどうぞ!

AD
いいね!した人  |  コメント(11)  |  リブログ(0)

テーマ:

ひな型を作ってみようはこちら へ。
HEAD編はこちら
BODY編その1はこちら

IE(インターネットエクスプローラー)使用という想定でお話を進めていきますので、他のブラウザの方はごめんなさい。

今日もBODYの中を書いていく作業です。
FONTタグの使い方を説明します。
前回のファイルに書き足すのが早いと思います。

では、以前に作ったHTMLファイルを開いてね。
開いたら、ツールバーの「表示」から「ソース」を選択してください。
メモ帳でソースが開くはずです。
開いたメモ帳に書き込んでいく形式になります。

では、続きに打ち込んでみましょう!(タグは必ず半角英数字で・・・)

<html>
<head>
<meta name="author" content="miyo">
<meta name="description" content="ようこそ、CAFE BLOOM へ。素材と日記のページです">
<meta name="keyword" content="WEBフリー素材、日記、リヴリー">
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="ext/CSS">
<title>Cafe Bloom by MIYO</title>
</head>
<body>
<h1>Cafe Bloom by MIYO</h1>
<p>Welcome my site!</p>
<p>ようこそ、Cafe Bloom へ。ゆっくりしていって下さいね♪</p>
<p>
<font size="4" color="#0099cc">お品書き</font><br>
<font size="2" color="#00cc66">更新履歴</font><br>
<font size="2" color="#00cc66">自己紹介</font><br>
<font size="2" color="#00cc66">素材</font><br>
<font size="2" color="#00cc66">日記</font><br>
<font size="1" color="#66cccc">前回のファイルへ <a href="
http://www.green-thumb.ne.jp/top/kouza/mihon03.html ">ここ</a></font>
</p>
<hr>
<h3>色見本</h3>
<div>
<font color="red">赤</font>
<font color="blue">青</font>
<font color="green">緑</font>
<font color="yellow">黄</font>
<font color="pink">桃</font>
<font color="gold">金</font>
<font color="silver">銀</font>
</div>
<hr>
<h3>大きさ見本</h3>
<div>
<font size="1">1</font>
<font size="2">2</font>
<font size="3">3</font>
<font size="4">4</font>
<font size="5">5</font>
<font size="6">6</font>
<font size="7">7</font>
</div>
<hr>
<h3>文字修飾見本</h3>
<div>
<b>太字</b>
<i>斜体</i>
<u>下線</u>
<s>字消し</s>
<sup>上付文字</sup>
<sub>下付文字</sub><br>
<marquee>IEしか使えないけど・・・</marquee>
<marquee loop=1>IEしか使えないけど・・・1回で止まるってか消える</marquee>
<marquee behavior="scroll">IEしか使えないけど・・・普通に横スクロール</marquee>
<marquee behavior="alternate">IEしか使えないけど・・・跳ね返るの</marquee>
<marquee behavior="slide">IEしか使えないけど・・・ページの端でスクロールが止まるの</marquee>
</div>

</body>
</html>

ここまで打ち込んだら名前をつけて保管しましょう♪
保管するときは、「ファイル名.html」で保管してくださいね。

今回は見本サイトをご用意しましたので、こちら のようになっていれば正解です!


では、タグの解説です。
<font color=""></font>
これは文字の色指定です。
色の名前、またはRGBで指定します。
こちらのサイトがわかりやすいと思いますので、一度見てみてね。
色見本の館
この文字列を見ても分かるように、色には相性もありますし、1ページに極端に多くの色を詰め込むと目がチカチカします。
そして、子供っぽい印象になりやすいので上手に組み合わせましょう。
これはスタイルシートで指定できます。

<font size=""></font>
文字の大きさを指定します。
使えるのは1~7の数字です。
強調したければ大きな字で!
これもスタイルシートで指定できます。

<b></b>
文字を太くします。

<i></i>
文字を斜めにします。

<u></u>
文字に下線を入れます。

<s></s>
文字に字消し線を入れます。

<sup></sup>
文字を上付きにします。

<sub></sub>
文字を下付きにします。

<marquee></marquee>
文字をスクロールします。
loopbehaviorを使うことで動きを変化させることができます。
これはネットスケープでは見られませんので、ご注意を!

色を変えたり、大きさを変えたりするのはスタイルシートでしたほうが賢いです。
そのほうがHTMLファイルもすっきりするし。
そのうちスタイルシートについても書くつもりです。
まだ先だけど・・・

今日はこんな感じで~す。
今回はおなじみのタグが多いので簡単だったでしょ?
質問などありましたら、コメント欄にどうぞ!

AD
いいね!した人  |  コメント(2)  |  リブログ(0)

テーマ:

ひな型を作ってみようはこちらへ。
HEAD編はこちらへ。

IE(インターネットエクスプローラー)使用という想定でお話を進めていきますので、他のブラウザの方はごめんなさい。

前回はHEADの中身を埋めていく作業をしました~。
今日はBODYの中を書いていきます。

では、前回作ったHTMLファイルを開いてね。
開いたら、ツールバーの「表示」から「ソース」を選択してください。
メモ帳でソースが開くはずです。
開いたメモ帳に書き込んでいく形式になります。

この間書いたソースに書き足していきましょう!

前回とちょっと中身がかわっていますが、自分のHPを作っていくイメージにしますので・・・
素材集のHPを作ろうかな?という想定です。

この間書いたソースはこれ。

では、続きに打ち込んでみましょう!(タグは必ず半角英数字で・・・)

<html>
<head>
<meta name="author" content="miyo">
<meta name="description" content="ようこそ、CAFE BLOOM へ。素材と日記のページです">
<meta name="keyword" content="WEBフリー素材、日記、リヴリー">
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="ext/CSS">
<title>Cafe Bloom by MIYO</title>
</head>
<body>
<h1>Cafe Bloom by MIYO</h1>
<p>Welcome my site!</p>
<p>ようこそ、Cafe Bloom へ。ゆっくりしていって下さいね♪</p>
<h2>お品書き</h2>
<li>更新履歴</li>
<li>自己紹介</li>
<li>素材</li>
<li>日記</li>
<hr>
<div>ここからタグ打ってみた見本です。</div>
<div>DIVタグを使うと文章をブロック分けできますよ。</div>
<div>でも、Pタグみたいに1行分開かないのだ。ここまでDIVでブロックにしてます。</div>
<hr>
<p>ここからPタグで分けてます。</p>
<p>行間が広くなるんだよ。BRを入れると改行できます。<br>よいしょ、ほらね♪</p>
<hr>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<p>見出しの大きさ見本だよ</p>

</body>
</html>

ここまで打ち込んだら名前をつけて保管しましょう♪
保管するときは、「ファイル名.html」で保管してくださいね。

今回は見本サイトをご用意しましたので、こちらのようになっていれば正解です!


では、タグの解説です。
<h1>見出し1</h1>~<h6>見出し6</h6>
見出しを表示するタグになります。
これは検索エンジンによるチェックが意外と入りやすいタグです。
スタイルシートと組み合わせることで、字の大きさも改行の幅も変更できます。
上手に使いたいタグです。
見出しタグと呼ばれます。

<p></p>
俗にいうPタグ。
段落タグといいます。
前後に1行分のスペースが開きますが、これもスタイルシートでなんとでもなります。
結構、重宝してます。

<div></div>
文章をブロックとして扱う場合に使用します。
これを使用しても1行分のスペースは開きません。
また、align属性を使うことで行ぞろえを指定できます。
この説明はまた今度ね。
そうそう、このタグは画像とかにも使えます。(使い方の説明はまた今度)
手抜きでごめん(爆)

<li></li>
リストタグです。
箇条書きされます。
スタイルシートを組み合わせることで、頭の「ちょぼ」を変更できます。

<hr>
水平線タグです。長さ・太さの指定もできます。
スタイルシートと組み合わせると、点線にもなったりします。

<br>
改行タグです。
これを使えば改行ができるという優れものw(?)

今日はこんな感じで~す。
質問などありましたら、コメント欄にどうぞ!

AD
いいね!した人  |  コメント(5)  |  リブログ(0)

テーマ:

前回の記事はこちらへ。

この間は基本のひな形を作りましたので、そのHTMLファイルをまず開きましょう。
IE(インターネットエクスプローラー)使用という想定でお話を進めていきますので、他のブラウザの方はごめんなさい。
最近、IE(インターネットエクスプローラー)しか使ってないから使い方忘れたんだよ~。

では、HTMLファイルを開いたらツールバーの「表示」から「ソース」を選択してください。
メモ帳でソースが開くはずです。
開いたメモ帳に書き込んでいく形式になります。

この間書いたソースに書き足していきましょう!

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


この間書いたソースはこれ。

今回は、この<head></head>の中身を追加していきます!
この中身は必須ではないのですが、検索エンジン対策に有効ですので上手に使ったほうがいいと思います。

では、続きに打ち込んでみましょう!(タグは必ず半角英数字で・・・)

<html>
<head>
<meta name=”author” content=”miyo”>
<meta name=”description” content=”miyoのBLOGです。リヴリー観察とか、たまにHTML講座とか・・・”>
<meta name=”keywords” content=”リヴリー,HTML講座”>
<meta http-equiv=”Content-Type” content=”text/html;charset=Shift_JIS”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta http-equiv=”Content-StyleーType” content=”text/css”>
<title>裏側の私</title>
</head>
<body>
</body>
</html>


ここまで打ち込んだら名前をつけて保管しましょう♪
保管するときは、「ファイル名.html」で保管してくださいね。
まだ、真っ白ですがIEのタイトルバーに「裏側の私」が表示されてます。
こんなかんじ。↓
タイトルバー

では、タグの解説です。
<meta name=”author” content=”miyo”>
制作者の表示になります。
必須ではありません・・・・てか、私はいつも入れていません(爆)
HP作成代行をしている場合とかは入れたほうがいいのかもしれないですね。

<meta name=”description” content=”miyoのBLOGです。リヴリー観察とか、たまにHTML講座とか・・・”>
検索エンジンでタイトルの下に表示される文になります。
省略することもできますが、検索エンジンにひっかかったときにあったほうがわかりやすいと思います。

<meta name=”keywords” content=”リヴリー,HTML講座”>
ロボット型検索エンジンの多くはこのキーワードをチェックします。
ただ、たくさん入れすぎると、スパムとみなされてしまいますので、自分が何を訴えたいのかきちんと見極めることが重要になります。

<meta http-equiv=”Content-Type” content=”text/html;charset=Shift_JIS”>
ここでは、言語の指定をします。
この例の場合は、HTMLをShift_JISを使って書きますよ~という宣言になります。
他にはEUCというのもあります。
サーバーによってはEUCを推奨している場合もあります。

<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
これは、スクリプト言語の指定になります。
このファイルではJAVA SCRIPTを使用します、という宣言になります。
他に、text/vbscriptなどがあります。
スクリプト言語を組み込む場合は必須です。
外部ファイルで持つ場合も必要です。

<meta http-equiv=”Content-StyleーType” content=”text/css”>
これは、スタイルシートの指定になります。
このファイルではCascading Style Sheet(CSS)を使用します、という宣言になります。
外部ファイルで持つ場合も必要です。

どうでしたか?わかりましたか?
質問などありましたら、コメント欄にどうぞ!

いいね!した人  |  コメント(10)  |  リブログ(0)

テーマ:

うちのマウスがぶっ壊れました。
ええ、落としたのは私なので自業自得です・・・
リヴのスタンプ作ろうにも、細かい作業がやりにくくて。
昨日のスキン作りは半分ヤケでした(爆)

昨日、CSSの簡単な講座を書きますと記事に書いたのですが、まずはHTMLから書いていかないとわかりにくいかな?と思い、そこから書いてみようと思います。

基本的なところから書いていくつもりなので、HPを作ったことないけど作ってみたい、とか
ちょっと興味があるわ~という方、読んでみてください。
「わかんねーよっ!(`ε´)」
ということがあれば、コメント欄にどうぞ~。

では、ここから本文です。

まずはひな形を作ってみましょう。
最初にやることは、ウィンドウズの方は「メモ帳」を立ち上げてください。
たいてい、アクセサリーの中に格納されているはずです。
MACの方は「シンプルテキスト」です。

立ち上げました?

じゃあ、そこに次の文を打ち込んでください。
ここでは、表示させるために全角で入力しますが、半角英数字で!

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


とりあえず、ここまで打ったらファイルに名前をつけて保管します。
「hina.html」とかわかりやす名前を付けましょう。
そうすると、IEまたはNNのファイルが現れるはずです。
ただし、本文を入力していないので真っ白のページになっています。

今日はここまでで、タグの説明を・・・・

ここまで入力してわかると思うのですが、タグは2個でセットです。
この法則を間違えると表示がおかしくなります。
俗に言う、「閉じ忘れ」の状態になってしまいます。
また、記述の中身をはさみこむ状態になります。

<html></html>
ここからHTMLを書きますよということをPCに教えてあげるタグです。

<head></head>
本文には表示されない部分になります。
この中に書き込まれるのは、JAVA SCRIPTやCSSの宣言や、それに関する記述、
タイトル、検索のキーワードなどです。

<title></title>
IEやNNのタイトルバーに表示されることをここに記述します。
SEOの対策として、重要視されることが多いです。

<body></body>
ここは本文を入力するスペースになります。
記述された内容がHP上に表現されます。

今日は基本の基本ということで、ここまでです。
まずは1個作ってみてね♪
簡単で物足りない人のほうが多いと思いますが、ここをすっとばすわけにはいかないのだw

当分は基本編が続きます・・・・

いいね!した人  |  コメント(7)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。