2006年11月06日

作業1 マークアップその1

それでは、やってみましょう。ここでは、「フーン、CSSってこんなことができるんだ」ってなことがわかるように解説していきますね。

あっと、その前にカテゴリの「はじめに」と「文書構造」と「CSSの基礎」は読んでいただけましたか?必ず読んでおいてくださいね。

それから、デスクトップに「csstips」といフォルダを作成してありますか?そのフォルダの中に、更に「images」というフォルダも作成しておいてくださいね。

もう一つ、「TerPad(テラパッド)」はダウンロードして、インストールしてありますね。TOPページにダウンロードの場所と「はじめに」にインストール後の設定方法が記述してあります。準備OK?!

それでは、以下の文章をコピーして「Terapad」に貼り付け、デスクトップに作成してある「csstips」フォルダに「part1.html」と名前を付けて保存して下さい。

*********************この下から*********************************************


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>CSSは簡単!簡単 Part1</title>
</head>

<body>
いまさら聞けないインターネット用語集

SNS(ソーシャル・ネットワークキング・サービス)

「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。

社会的ネットワークをインターネット上で構築するサービスのこと。登録制、招待制などのいくつかの仕組みがあり、そのサービスのポリシーごとに分類される。


BLOGブログ(ウェブログ、Blog、Weblog)

狭義にはWorld Wide Web(Web)上のウェブページのURLとともに覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。"WebをLogする"という意味でWeblogと名付けられた。

現在、より頻繁に用いられている広義には作者の個人的な体験や日記、特定のトピックに関する必ずしもWebに限定されない話題などのような、時系列で比較的頻繁に記録される情報についてのWebサイト全般を含む。このようなWebサイトの作成機能を提供するソフトウェアやサービスなどを指して呼ぶ場合もある。又、SNSやブログや口コミメディアを総称してCGMと呼ぶこともある。

携帯電話などのモバイル端末を使用しメールを送信して更新するブログはモブログ(moblog)、写真画像を主体として更新されるブログはフォトログ(photolog、fotolog)、ビデオコンテンツを配布するビデオブログはヴログ(Vlog)、と呼ばれ通常、投稿にはテキストやイメージが添えられる。


IP電話(アイピーでんわ)

インターネットプロトコル(Internet Protocol)電話の略で、電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。

狭い意味では、電気通信事業者のIP加入者線を利用した電話番号の割り当てられるサービスをさす。日本の電気通信事業法の電気通信役務の届出区分では、インターネットを使用した電話番号の割り当てられないものも含む。また、一般的にはIP電話との認知は無いまたは薄いが、中継網にVoIPを活用している中継電話もある。IP電話とVoIPを区別せずに記述する向きもある。また、IPセントレックスなど内線電話のVoIP化として利用も増えている。


Copyright (C) 2006 1-spc.com. All Rights Reserved

</body>
</html>


*********************この上まで*********************************************

うまく保存できたなら、「TeraPad」のツールバーの右側を見て下さい。

インターネット・エクスプローラーのアイコンとネットスケープのアイコンが表示されましたね。では、インターネット・エクスプローラーのアイコンをクリックしてブラウザを起動してみて下さい。

あららら……。とんでもない表示になっていますね。

これは、テキストベースでいくら改行してもブラウザはどこで、改行しているのか判断が付かないので

「まァ、いいか。1行で表示しちゃおう」などと勝手に解釈してしまったのです。

そこで、この文章にカテゴリ「文書構造」のところで、説明してあるように「マークアップ」という作業をすることにしましょう。


<body>〜</body>の間です。わかりやすいように太字にしてあります。半角英数字で記述して下さい。

*********************この下から*********************************************


<h1>いまさら聞けないインターネット用語集</h1>


<h2>SNS(ソーシャル・ネットワークキング・サービス)</h2>

<p>「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>

<p>社会的ネットワークをインターネット上で構築するサービスのこと。登録制、招待制などのいくつかの仕組みがあり、そのサービスのポリシーごとに分類される。</p>


<h2>BLOGブログ(ウェブログ、Blog、Weblog)</h2>

<p>狭義にはWorld Wide Web(Web)上のウェブページのURLとともに覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。"WebをLogする"という意味でWeblogと名付けられた。</p>

<p>現在、より頻繁に用いられている広義には作者の個人的な体験や日記、特定のトピックに関する必ずしもWebに限定されない話題などのような、時系列で比較的頻繁に記録される情報についてのWebサイト全般を含む。このようなWebサイトの作成機能を提供するソフトウェアやサービスなどを指して呼ぶ場合もある。又、SNSやブログや口コミメディアを総称してCGMと呼ぶこともある。</p>

<p>携帯電話などのモバイル端末を使用しメールを送信して更新するブログはモブログ(moblog)、写真画像を主体として更新されるブログはフォトログ(photolog、fotolog)、ビデオコンテンツを配布するビデオブログはヴログ(Vlog)、と呼ばれ通常、投稿にはテキストやイメージが添えられる。</p>


<h2>IP電話(アイピーでんわ)</h2>

<p>インターネットプロトコル(Internet Protocol)電話の略で、電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。</p>

<p>狭い意味では、電気通信事業者のIP加入者線を利用した電話番号の割り当てられるサービスをさす。日本の電気通信事業法の電気通信役務の届出区分では、インターネットを使用した電話番号の割り当てられないものも含む。また、一般的にはIP電話との認知は無いまたは薄いが、中継網にVoIPを活用している中継電話もある。IP電話とVoIPを区別せずに記述する向きもある。また、IPセントレックスなど内線電話のVoIP化として利用も増えている。</p>


<p>Copyright (C) 2006 1-spc.com. All Rights Reserved</p>

*********************この上まで*********************************************


上書き保存をして、先ほどのインターネットエクスプローラーのアイコンをクリックしてみてください。

「すると、どうでしょう」←(激的ビフォーアフター風に)ブラウザが、ココは見出し1だ、ココは見出2だ、そしてココは段落だと解釈して表示されるようになりました。

これが、マークアップの第1段階の終了です。

「CSSはどうなっているんだ!」との声も聞こえますが、とりあえず今回は、ココまでにしておきましょう。
続きは 作業1 マークアップ2です



posted by ひろりん at 18:11 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月07日

作業1 マークアップその2

作業1 マークアップ1は読んでいただけましたか?ハイ、ありがとうございました。

<h1>(見出し1)<h2>(見出し2)<p>(段落)などのタグを本文に記述すると、ブラウザがその意味を解釈して表示するということがわかりましたね。

しかし、このようなタグはそのタグが挟んでいる文章の要素内容が、どのような意味があるのかを示しているだけで、内容の詳細まではわからないんですね。

そこで、<div>タグを使用して1つの意味を持った情報の固まりとして(X)HTML上で表示しようということです。

ココのところは難解と感じるかもしれませんが、ムーバブルタイプのブログや色々な無料サービスのブログなどでもカスタマイズするにはどうしても必要な知識です。

ここで、挫折する人が多いのですが、何回も徹底的にこのブログで説明していきますので安心して下さいね。

それでは、実際に<div>タグを記述していきましょう。

<div>タグには「id属性」を使って定義をしていきます。
(注)「id属性」の名前は任意で付けることができます。もちろん半角英数字ですよ。

このとき</div>タグで閉じなければならないのですが、どの「id属性」の</div>がどの「id属性」に属しているのかわからなくなってきます。たくさん</div>を記述しなければいけないので……。

これが挫折する原因のひとつなのです。でも、ダイジョウブ!!コメントタグを使用して対になっている<div>と</div>の後ろにコメントをを書き込んでおけばいいのです。

では、「TeraPad」でデスクトップにおいてある「csstips」フォルダの中の「part1.html」を開いて下さい。下記のように赤字で書かれている部分を記述して下さい。

<--コメントです-->このコメントタグはブラウザでは表示されませんので<div>のメモ代わりと言ったとこでしょうか。コメントタグも一緒に記述して下さい。後々、楽になります。タグはすべて半角英数字で記述して下さいね。

<body>〜</body>の間です。

*********************この下から*********************************************


<body>
<div id="wrapper"><--全体を包むwapperというid-->

<div id="header"><--サイト名等を表示させるheaderというid-->

<h1>いまさら聞けないインターネット用語集</h1>

</div><--header領域の終わり-->


<div id="honbun"><--ここからは本文というid-->

<h2>SNS(ソーシャル・ネットワークキング・サービス)</h2>

<p>「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>

<p>社会的ネットワークをインターネット上で構築するサービスのこと。登録制、招待制などのいくつかの仕組みがあり、そのサービスのポリシーごとに分類される。</p>


<h2>BLOGブログ(ウェブログ、Blog、Weblog)</h2>

<p>狭義にはWorld Wide Web(Web)上のウェブページのURLとともに覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。"WebをLogする"という意味でWeblogと名付けられた。</p>

<p>現在、より頻繁に用いられている広義には作者の個人的な体験や日記、特定のトピックに関する必ずしもWebに限定されない話題などのような、時系列で比較的頻繁に記録される情報についてのWebサイト全般を含む。このようなWebサイトの作成機能を提供するソフトウェアやサービスなどを指して呼ぶ場合もある。又、SNSやブログや口コミメディアを総称してCGMと呼ぶこともある。</p>

<p>携帯電話などのモバイル端末を使用しメールを送信して更新するブログはモブログ(moblog)、写真画像を主体として更新されるブログはフォトログ(photolog、fotolog)、ビデオコンテンツを配布するビデオブログはヴログ(Vlog)、と呼ばれ通常、投稿にはテキストやイメージが添えられる。</p>


<h2>IP電話(アイピーでんわ)</h2>

<p>インターネットプロトコル(Internet Protocol)電話の略で、電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。</p>

<p>狭い意味では、電気通信事業者のIP加入者線を利用した電話番号の割り当てられるサービスをさす。日本の電気通信事業法の電気通信役務の届出区分では、インターネットを使用した電話番号の割り当てられないものも含む。また、一般的にはIP電話との認知は無いまたは薄いが、中継網にVoIPを活用している中継電話もある。IP電話とVoIPを区別せずに記述する向きもある。また、IPセントレックスなど内線電話のVoIP化として利用も増えている。</p>


</div><--honbun領域の終わり-->

<div id="footer"><--ここからはフッターというid-->

<p>Copyright (C) 2006 1-spc.com. All Rights Reserved</p>

</div><--footer領域の終わり-->

</div><--wrapper領域の終わり-->

</body>


*********************この上まで*********************************************


記述し終わったら「上書き保存」をして「TeraPad」のツールバーの右側のインターネット・エクスプローラーのアイコンをクリックして確認をしましょう。

ん?……。前回となんら変わりのない表示ですって?
OKです。今回の<div>の記述が後でボディーブローとなって効いてくるんですから。

これで、マークアップの第2段階の終了です。

「おいおい、何時になったらCSSの話になるんだ!」との声も聞こえますが、とりあえず今回は、ココまでにしておきましょう。

今度は「CSS」を記述します。やったー (^_-)-☆



posted by ひろりん at 00:59 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月08日

作業2 CSSその1 HTMLファイルにリンクする

それでは「CSS」ファイルの作成をしましょう。

まず、「TeraPad」を起動して何も記述しないで【名前を付けて保存】をします。ファイル名は「style1.css」です。「part1.html」と同じフォルダ「csstips」フォルダに保存して下さい「TeraPad」は閉じてください。

ここで、一度どのようなファイルが作成されたのか見てみましょう。

「style1.css」と名前が付いた「カスケードスタイルシートドキュメント」がありますね。歯車のようなものが付いたアイコンで表示されています。

このファイルを「TeraPad」で開くにはチョット、コツがいるんです。たいしたコツではないのですが。

もう一度「TeraPad」を起動して、メニューバーの「ファイル」から【開く】を選択して、デスクトップの「csstips」フォルダを選択して下さい。

あらあら、先ほど作成した「style1.css」が見当たりませんね。

それでは、「ファイルを開く」ボックスの下にある「ファイルの種類」の右側にある「V」をクリックして「すべてのファイル」を選択して下さい。どうです。表示されましたね。「TeraPad」で「CSS」ファイルを開くにはこのようにしなければいけません。チョット面倒な作業ですが要は慣れです。

しかし、絶対に忘れてはいけません。私の生徒さんもすぐ

「先生、CSSファイルが見つかりません」
「先生CSSファイルが開けません」

と質問がきます。あなたはダイジョウブですね。

さて、このブログでは「(X)HTML」ファイルと「CSS」ファイルは外部リンクで結合させてデザインを行うので「(X)HTML」に「CSS」をリンクさせなければなりません。

では、「TeraPad」で「part1.html」を開いて<head>の部分を見て下さい。下記の部分です。


<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>CSSは簡単!簡単 Part1</title>
</head>


ここに太字で示してあるソースを記述して下さい。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link href="style1.css" rel="stylesheet" type="text/css">
<title>CSSは簡単!簡単 Part1</title>
</head>


スタイルシートのリンクの仕方はわかってもらえましたか?
もし今後違うデザインにしたい場合は、新しいスタイルシートを作り、"style1.css"部分を、その新しいスタイルシート名に変えれば良いのです。
今日はこれでおしまい……って「CSSはどうした?」とまた突っ込まれそうですね。
楽しみは後に取っておく方がいいでしょ(^_-)-☆




posted by ひろりん at 16:28 | Comment(1) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月09日

作業2 CSSその2 bodyと#wrapper

それでは(と、言うよりやっとかヨ!との声も聞こえますが)「CSS」ファイルの作成その2のスタートです。

まず、「TeraPad」を起動してメニューバーの【ファイル】からデスクトップにある「csstips」フォルダを指定します。
「ファイルを開く」ボックスの下にある「ファイルの種類」の右側にある「V」をクリックして「すべてのファイル」を選択して下さい。
「style1.css」ファイルを指定して開いて下さい。「TeraPad」で「CSS」ファイルを開くにはこのような作業が必要なんです。このような作業のやり方は「作業2 CSSその1」にも書いてありますので熟読しておいて下さい。


下記のように記述します。

*********************この下から*********************************************

/*全体の設定*/
body {
text-align: center;
background-color:#999999;
}

#wrapper {
width: 763px;
margin: 0 auto;
text-align: left;
background-color:#ffffff;
}

*********************この上まで*********************************************

「CSS」ファイルの記述の仕方は 「セレクタ」と「宣言」という二つの部分に分けられます。

セレクタ{宣言}

「セレクタ」は「スタイルシートを適用する対象」で、「宣言」は「適用するスタイル指定の内容」です。宣言は「 { 」(中括弧)と「 } 」(中括弧閉じ)の間に記述することになります。

さらに「宣言」は、「プロパティ」と「値」とに分けられます。
「プロパティ」の後には「:」(コロン)、「値」の後には「;」(セミコロン)を記述します。

「 ; 」セミコロンの後に新たな宣言を記述足しすることができます。ここではわかりやすく改行して記述する方法を使用します。記述はすべて半角英数字です。


では、今回記述した「CSS」を見てみましょう。

2つの「セレクタ」があることがわかります。

「body」と「#wrapper」です。両方の「セレクタ」に「background-clolor:」という「プロパティ」があります。

それぞれの「値」は「#999999」と「#ffffff」です。色は「16進数値」であらわしています。

これは「body」の背景色は濃い灰色で「#wrapper」の背景色は白色です。と「宣言」しているのです。

「body」はブラウザ全体のことです。「#wrapper」はその「body」の上に「#header」と「#honbun」と「#footer」を包括しているということです。(ラップで包むというイメージですね)

他の「宣言」を見てみましょう。

両方の「セレクタ」と「値」に「text-align:」があります。
「body」は「center」で「#wrapper」は「left」です。これが対になっていて「#wrapper」で包まれた領域がブラウザの左右の中心に、「#wrapper」を幅739ピクセルで表示することができます。
「#wrapper」の「width: 763px;」が幅739ピクセル、という表示になります。


「style1.css」ファイルを「上書き保存」をして、「part1.html」ファイルをブラウザで確認して下さい。

今回はチョット理解するには大変かもしれませんね。
そこで、挫折してしまわないようにこの講座の「最終形」をおみせします。
ココをクリックして下さい。



posted by ひろりん at 16:48 | Comment(1) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月10日

作業2 CSSその3 div(領域)を把握する

「作業2 CSSその2」のファイルの記述の仕方はわかりましたか。

何回も読み直してくださいね。

セレクタ{宣言}

これだけですからね。

では、今回も

「TeraPad」を起動してメニューバーの【ファイル】からデスクトップにある「csstips」フォルダを指定します。
「ファイルを開く」ボックスの下にある「ファイルの種類」の右側にある「V」をクリックして「すべてのファイル」を選択して下さい。
「style1.css」ファイルを指定して開いて下さい。「TeraPad」で「CSS」ファイルを開くにはこのような作業が必要なんです。このような作業のやり方は「作業2 CSSその1」にも書いてありますので熟読しておいて下さい。



「同じことを何回も書くな!!」と叱られそうですが、あなたはダイジョウブなのですが、あの人のために(あの人って誰?)何回も書いておかないと同じ質問がくるんです。面倒だと言うのではないですが……。

ア〜ァ。「シニア世代」を中心にパソコン先生をやっている性なんですね。

(気を取りなおして……)というわけで、開くと下記のように表示されていますね。


/*全体の設定*/
body {
text-align: center;
background-color:#999999;
}

#wrapper {
width: 763px;
margin: 0 auto;
text-align: left;
background-color:#ffffff;
}


では、次の太字の部分を記述して下さい。


*********************この下から*********************************************

/*全体の設定*/
body {
text-align: center;
background-color:#999999;
}

#wrapper {
width: 763px;
margin: 0 auto;
text-align: left;
background-color:#ffffff;
}

/*ヘッダーの設定*/
#header {
width: 763px;
}

/*本文の設定*/
#honbun {
width: 763px;
}

/*フッターの設定*/
#footer {
width: 763px;
}

*********************この上まで*********************************************

忘れずに「上書き保存」をしておきましょう。

ここで、「part1.html」ファイルを確認してみましょう。 <div id="wrapper">は
<div id="header">
<div id="honbun">
<div id="footer">
の領域を包括していることがわかりますか。

ですから、「style1.css」ファイルで各々の領域をはみ出さないように横幅を763ピクセルに統一してあるのです。

図で示すと下記のようになります。

背景色を指定していない状態のdiv(領域)の画像


ブラウザで確認してもどこまでが各々の領域<div>かわからないので背景色を設定してみましょう。赤字の部分を記述足しして下さい。

/*ヘッダーの設定*/
#header {
width: 763px;
background-color:#abf5da;
}

/*本文の設定*/
#honbun {
width: 763px;
background-color:#f9abee;
}

/*フッターの設定*/
#footer {
width: 763px;
background-color:#ffff66;
}


「上書き保存」をしてブラウザで確かめて下さい。
これでよくわかりましたね。図ではこうなります。

背景色を指定している状態のdiv(領域)の画像

あくまでも1枚の紙の上にそれぞれの<div>(領域)が重ねあっていたり、隣り合っていると言うイメージです。


わかってもらえましたでしょうか?(ーー;)



posted by ひろりん at 02:05 | Comment(1) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月19日

作業2 CSSその4 BOXの概念とborder

作業2 CSSその3 div(領域)を把握するで、HTMLファイルに記述したdiv(領域)の意味がお分かりいただけたと思います。

今回は、

タグで「BOX」の概念を勉強してみましょう。

その前に

「part1.html」ファイルを「TeraPad」で開いて下さい。

コメントで記述されている部分に「!」を記述足します。

赤字の部分です。
<!--全体を包むwapperというid-->

すべてのコメント部分に「!」を記述して下さい。

これで、「HTML」ファイルには記述は残りますが、ブラウザでは表示されません。

コメントアウトされたということになります。

上書き保存を忘れないでくださいね。


次に、「style1.css」ファイルを開きます。

以下を記述して下さい。記述する場所はどこでも構わないのですが、とりあえず最後の行以降に記述しましょう。
太字の部分です

p
{ border-color:#c60000;
 ←「border」(境界線)は「color」(色)を「#c60000」(赤茶色)
border-style:solid; ←「style」(線の種類)を「solid」(直線)
border-width:2px; ←(境界線)は「width」(線の太さ)を「2px」(2ピクセル)
}

「border」とは境界線のことです。それぞれのdiv(領域)には境界線があります。

この「border」は普段は表示されません。それを今回は強制的に表示してみようというわけです。

なお、この「border」は4辺ありますので丁度、箱の中にコンテンツが表示されるので「BOX」の概念などと呼ばれることがあります。

今回のセレクタ「boder」(境界線)は「color」(色)を「#c60000」(赤茶色)、「style」(線の種類)を「solid」(直線)、「width」(線の太さ)を「2px」(2ピクセル)で、表示しなさいという「宣言」になります。

上書き保存をして「part1.html」ファイルをブラウザで確認して下さい。 すべての

タグに「CSS」が適用されています。

コンテンツが箱の中に入っているというイメージが出来たなら、この箱の中のスペースを作ってみましょう。
赤字の部分です。


padding」とは「border」の内側のスペース部分のセレクタです。


p
{ border-color:#c60000; ←(境界線)は「color」(色)を「#c60000」(赤茶色)
border-style:solid; ←(境界線)は「style」(線の種類)を「solid」(直線)
border-width:2px; ←(境界線)は「width」(線の太さ)を「2px」(2ピクセル)
padding:30px; ←(隙間)は「30px」(30ピクセル)
}

上書き保存をして「part1.html」ファイルをブラウザで確認して下さい。

4辺の内側ににスペースが出来たのがわかりますね。

この、boxの概念をよく理解しておいて下さい。
図を示しておきますが、わかるでしょうか?

ryouiki.gif

今回は、ココまでにしておきます。




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 14:31 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月21日

作業2 CSSその5 paddingとmargin

「part1.html」ファイルに記述されている、<h2>タグに「CSS」で命令をしてみましょう。

「style1.css」を開いて下さい。

以下のソースを記述足して下さい。場所は最後の行の後にしておきましょう。

h2{
border-color:#0000ff; ←(境界線)は「color」(色)を「#0000ff」(青色)
border-style:solid; ←(境界線)は「style」(線の種類)を「solid」(直線)
border-width:2px; ←(境界線)は「width」(線の太さ)を「2px」(2ピクセル)
margin-left:20px; ←(余白・スペース)は「20px」(30ピクセル)
}

「border」の線の色が青色にしてありますが「style」と「width」は<p>タグと同じにしてあります。

注目は太字の「margin-left:20px;」というところです。

これは、「border」の外側の左側に20ピクセルのスペースを空けたという命令です。

では、このスペースは「border」とどの領域からの空スペースなのかがわかりますか。

そうです。この<h2>タグが包括されている <div id="honbun">という領域ですね。

つまり、「honbun」の領域にあるすべての<h2>タグに対して左側から20ピクセル空きスペースを取り、「border」の色を「青色」線の種類を「直線」線の幅を「2ピクセル」にして表示しなさい。

と、いうことになります。

前回と今回で「padding」と「margin」がわかっていただけましたでしょうか。

それでは次回まで  (@^^)/~~~




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 10:58 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月22日

作業2 CSSその6 h2の border をデザインする

今回も「part1.html」ファイルに記述されている、<h2>タグに「CSS」で命令をしてみましょう。

「style1.css」を開いて下さい。

以下のソースを探して下さい。

h2{
border-color:#0000ff;
border-style:solid;
border-width:2px;
margin-left:20px;
}


今回は<h2>の「border」の「left」左側と「bottom」下側を「CSS」でデザインしてみます。

前回の「CSS」の記述では「border」のすべての辺に命令が効いてしまいます。そこで以下のように書き換えます。

太字の部分です。

h2{
border-left-color:#0000ff;
border-left-style:solid;
border-left-width:8px;
border-bottom-color:#0000ff;
border-bottom-style:solid;
border-bottom-width:1px;
margin-left:20px; ←変更しません。
}


border」の左側と下側だけに「CSS」の命令が効くように記述したわけです。

ここで、上書き保存をして「part1.html」ファイルで確認して下さい。

「border」の下側は<h2>が持っている領域の右端まで表示されています。また、左側は幅を8ピクセルに指定してあるので、文字と「border」がくっつきすぎています。

これを調整します。赤字の部分を記述して下さい。

h2{
border-left-color:#0000ff;
border-left-style:solid;
border-left-width:8px;
border-bottom-color:#0000ff;
border-bottom-style:solid;
border-bottom-width:1px;
margin-left:20px;
padding-left:12px;
width:600px;
}


<h2>の領域にも当然「padding」があるわけですから、その「padding」の左側だけを12ピクセルスペースを指定したことになります。
また、<h2>の「width」幅は今回600ピクセルに設定しました。
あなたの自由なサイズを指定してみてください。

今回はここまでです。次回は<p>の中の「行間」についてお話しようと考えています。では  (@^^)/~~~





※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 14:09 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月23日

作業2 CSSその7 pタグの行間を設定する

何と今回で #honbun の領域の設定が完了します。がんばりましょう。 「style1.css」を開いて下さい。

以下のソースを探して下さい。

p
{
border-color:#c60000;
border-style:solid;
border-width:2px;
padding:30px;
}


あなたは、「border」について十分理解されたので<p>の「border」は非表示にしましょう。そして、<p>で囲まれている文の行間が狭いので読みやすくするために行間を広げましょう。

line-height」(ライン・ヘイト)というプロパティを使用します。
値には、色々な記述の仕方がありますが今回は「%」を使用します。
記述する「150%」というのは、<p>で囲まれている文字の高さを100%と考えて、その文字の50%を行間に指定するということになります。
例えば「200%」ならまるまる一文字分の高さの行間になるということです。

お試しあれ……。と言うわけで、「CSS」は以下のように記述しなおして下さい。


p
{
padding:30px;
line-height:150%;
}


「part1.html」ファイルの<div id="honbun">部分にデザイン的なタグを記述していませんからファイルはスッキリしています。

以前は私も、<table>や<layer>を駆使してデザインをしていたわけですが、いざデザインの変更をしなければならなくなったときの苦労は大変でした。

「CSS」のお陰でデザインの変更がとても楽になりました。
例えば、<h2>の「border」の色を変更したければ「CSS」ファイルの「border」の「color」の数値を変更すればいっぺんに変更できるのですから。

では、次回は<div id="header">に背景画像を設置します。
背景色では無いですよ。楽しみですね。では  (@^^)/~~~

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 13:21 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月24日

作業2 CSSその8  background-image について

では、「#header」領域に背景画像を表示してみましょう。

画像は、下記の「ダウンロードはココから」を右クリックし【対象をファイルに保存】を選択しデスクトップに保存しておいてください。フォルダ名は「gazou」で「LZH」形式になっています。各自解凍をお願いします。

ダウンロードはココから

解凍すると「head1.jpg」と「head2.jpg」の2枚の画像ファイルがありますので、ご自分の「csstips」フォルダの中の「images」フォルダに入れて下さい。

「style1.css」を開いて下さい。

以下のソースを探して下さい。

#header {
width: 763px;
}


以下のように記述足します。太字の部分です。

#header {
width: 763px;
height:230px;
background-image:url('images/head1.jpg');
}


「part1.html」ファイルをブラウザで確認してみましょう。

うまく画像が表示されていますね。

この画像は2枚とも横幅763ピクセル、高さが230ピクセルにしてありますから、高さを指定する「height」を230ピクセルに指定しておきます。

「#header」の領域にある<h1>はデフォルトの位置に表示されているのでこの位置を好きな場所に指定します。

「padding」で指定してみましょう。

「style1.css」ファイルを開いて新たに「h1」を記述します。

以下のように記述して下さい。太字の部分です。

h1{
padding-top:80px;
padding-left:40px;
}

これで「見出し1」の<h1>の位置を上から80ピクセル、左から40ピクセルのスペースを確保したことになります。


今度は、画像を変えてみましょう。赤字のところの数字を「2」に変えるだけです。これで「head2.jpg」の画像ファイルを入れ替えることが出来ます。

#header {
width: 763px;
height:230px;
background-image:url('images/head2.jpg');
}


ブラウザで確認すると<h1>の文字の一部が背景に溶け込んでいます。この文字を「白色」にしましょう。太字の部分を記述足してください。

h1{
padding-top:80px;
padding-left:40px;
color:#FFFFFF;
}


文字色も背景画像にあわせてお好きな色を指定して下さい。

最後に、「#header」と「#honbun」の領域がくっついているので「margin」で調整します。今回は「#header」領域の「bottom」を調整しましょう。

太字の部分を記述足します。

#header {
width: 763px;
height:230px;
background-image:url('images/head2.jpg');
margin-bottom:20px;
}


このように、「CSS」をうまく利用すればサイトの更新が楽になりますね。

今回はココまで……。だいぶホームページらしくなってきましたね。

次回は「#footer」の領域についてです。

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 11:17 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年11月28日

作業2 CSSその9  #footer 内の pタグ について

「#footer」の領域を調整してみましょう。

「style1.css」ファイルの「#footer」のところを探して下さい。

#footer {
width: 763px;
}


以下のように記述足して下さい。太字の部分です。

#footer {
width: 763px;
background-color:#c07000;
height:35px;
}


この「#footer」という領域は必ず必要な領域ではありませんが「著作権」の表示や、1ページの表示がが長くなってしまった時などナビゲーションを配置したりと何かと便利な領域です。

今回は「#honbun」領域と違う設定をしてみましょう。

まず、背景色を茶系の色、高さを35ピクセルに指定してあります。

「part1.html」ファイルをブラウザで確認して下さい。

「#footer」部分のhtmlソースを見てみましょう。

*************************************************************

<div id="footer"><!--ここからはフッターというid-->

<p>Copyright (C) 2006 1-spc.com. All Rights Reserved</p>

</div><!--footer領域の終わり-->

*************************************************************

上記の太字<p>タグの部分は「style1.css」ファイルの「p」が効いているのです。

そこで、「#footer」部分の段落の<p>タグに対してだけ「CSS」を記述してみましょう。

この場合、新たな<p>の命令文が必要です。以下のように記述します。赤字の部分です。

#footer p{
color:#ffffff;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}



解説すると、「#footer」の領域の<p>については、文字色を「白色」にし、上下の余白スペースを10ピクセル取り、文字列をセンター揃えにしなさい。

と、いう命令になるのです。

何回もこのブログで説明していますが、このように<div>領域を設定しておくと、その領域だけに効く「CSS」が記述できるということで大変便利です。

マークアップ作業が大事ということですね。

次回は「#honbun」領域の<p>の上下の調整です。

それでは  (@^^)/~~~

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 10:44 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年12月01日

作業2 CSSその10 honbun領域のpタグ

「#honbun」の領域の<p>を調整してみましょう。

まず、確認のために「style1.css」ファイルの「p」のところを探して下さい。

以前記述したのですがもう一度「border」を表示させて見ましょう。
太字の部分を記述足してください。


p
{
padding:30px;
line-height:150%;
border-color:#c60000;
border-style:solid;
border-width:2px;
}


「part1.html」をブラウザで確認してみましょう。

<p>の上下左右に「padding」が30ピクセルに設定されています。

そこでこの「padding」を調整します。

padding:0 50;

と、書き直します。

これは、最初の「0」は上下を0ピクセル、最後の「50」は左右を50ピクセルにしなさい。ということです。

「part1.html」ファイルをブラウザで確認してください。

border 内でテキストが移動しているのがわかります。

最後に「CSS」ファイルのborder を消しておきましょう。
こうなります。


p
{
padding:0 50;
line-height:150%;
}


次回は<p>の中に画像を配置します。

それでは  (@^^)/~~~

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 16:23 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年12月12日

作業2 CSSその11 画像をpタグ内に配置する

それでは画像を<p>タグの中に配置してみましょう。

その前に、画像をダウンロードします。

ここを右クリックして「対象をファイルに保存」を選択し「csstips」フォルダの中の「images」フォルダの中にコピーをしておいてください。

ファイルは「lzh形式」になっていますので各自で解凍して下さい。 3枚の画像があります。

1mixi.jpg
2seesaa.jpg
3iptelephone.jpg

の3枚です。確認して下さい。

それでは「psrt1.html」ファイルの以下の部分を探して下さい。

*******************************************************
<h2>SNS(ソーシャル・ネットワークキング・サービス)<h2>
<p>「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>
*******************************************************

最初の<p>のすぐ後ろに以下のように記述します。 赤文字の部分です。

*******************************************************
<p><img src="images/1mixi.jpg">「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>
*******************************************************

同じように次の<p>タグを探して画像ファイル名を記述して下さい。

<p><img src="images/2seesaa.jpg">狭義にはWorld Wide Web(Web)上のウェブページのURLとともに覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。"WebをLogする"という意味でWeblogと名付けられた。</p>

<p><img src="images/3iptelephone.jpg">インターネットプロトコル(Internet Protocol)電話の略で、電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。</p>

ここで、「part1.html」ファイルを上書き保存してブラウザで確認してみましょう。

画像は配置されましたがデザインが崩れています。

「style1.css」ファイルで調整します。

「img」ファイルを<p>タグ内の第一行目の左側に配置し画像の右側と、下側に余白をつけてみます。

以下を「style1.css」ファイルに書き足して下さい。

*******************************************************
img
{
float:left; ← 左側に配置する
margin-right:20px; ← 画像の右側の余白
margin-bottom:20px; ← 画像の下側の余白
}
*******************************************************

「css」でのデザイン講座をこれで一度終了しますが、「css」の利便性がわかってもらえたでしょうか。

これからは、「csstips」をご紹介していく予定です。

わからないことがあれば出来るだけメールでお答えして行こうと考えています。よろしくお願いします。

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 14:14 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2006年12月14日

xhtml と css の配布




今までの講座の中で使用した「html」ファイルと「css」ファイルをダウンロードできるようにしました。

あなたのファイルと見比べてみてね。(*^_^*)

自分で作成したファイルとの違いを見つけてることも勉強ですョ。

無料ブログでも、「html」ファイルと「css」の関係は理解しないと自分らしさを表現することが難しいのです。

****そんなことを言っても私もまだまだなんですが……。

それではここからダウンロードしてください。
右クリックをして「対象をファイルに保存」でお好きなところに保存して下さい。
「lzh」形式になっています。各自で解凍してネ。

posted by ひろりん at 11:43 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2007年07月13日

XHTLが記述しやすいテキストエディタ




ブログ、再開しマース。半年間お休みしていました。
申し訳ありません。m(__)m

前回の記事が「あけましておめでとうございます」ですから
いやはや何ともです。

これからもがんばりますのでよろしくお願いします。

この記事は私が発行しているメルマガと重複していますが
購読されていない方のために必要と思われる記事を抜粋して掲載しています。

XHTML+CSSの理解が出来るようなブログにしていきますので
よろしくお願いします。

┼──────────────────────────
HTML Project2のダウンロード
──────────────────────────┼

下のアドレスをクリック

http://www1.ttcn.ne.jp/~kaneto/hproj2/htmlproject2.html

【ソ フ ト名】 HTML Project2 ver.7.4.3.0
【ファイル名】 hprj2743.exe(インストーラ付)/を、
デスクトップに
ダウンロードしてください。

ダウンロードしたアイコンをダブルクリックして、実行をクリックします。
インスト−ルの画面が始まります。
インストール先フォルダを作成していなくても、自動的にフォルダを
作成してくれるので、
「次へ」と進んでいきましょう。

インストールが完了したら、デスクトップに「HTML Project2」という
アイコンが出来ているのを確認しましょう。
それをダブルクリックして起動できればOKです。
ダウンロードした「hprj2743.exe」は削除しても良いです。


┼──────────────────────────
XHTMLについて
──────────────────────────┼
XHTMLはHTMLの正式な後継規格として策定された規格で、
HTMLではフォントサイズや色といったデザインの指定ができましたが、
XHTMLでは文書構造の指定に特化しており、
スタイルやレイアウトの指定はすべてCSSによって
行われるようになっている。

何だかわかりづらいですよね。簡単に言えば、

文章の構造とデザインを分けて考えましょう

と言うことなのです。

デザインの部分をCSSファイルにすることによって、デザインの管理が
しやすくなるのです。
と言うことは、デザインの変更があっても、CSSファイルを変更するだけで
Webサイトのデザインが変更できると言うことなのです。

今回はここまでです。
タグ:XHTML CSS
posted by ひろりん at 12:56 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2007年07月15日

編集テキストをHTMLに貼り付けてみよう

前回でやったダウンロードは出来ましたか?


まだ「HTML Project2」をダウンロードしていない方は

下記のアドレスからダウンロードし入手してください。



URL


 http://www1.ttcn.ne.jp/~kaneto/hproj2/htmlproject2.html


では早速始めましょう。




まず「html」ファイルを格納するフォルダをデスクトップに作成してください。

フォルダ名は「001」とします。



それではダウンロードしてある「HTML Project2」のアイコンをクリックし

起動してください。



さて起動したら【メニュー】バーの【設定】をクリックしてください。

「XHTMLモード」にチェックを入れてください。

入っている方はそのままで結構です。



次に【メニュー】バーの【ページ設定】をクリックしプルダウンメニューから

「HTMLファイルの初期設定」をクリックしてください。



「基本」タブの「バージョン情報」を下記のように選択してください。



//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"



「設定名称」に「Lesson1」と入力し「保存」ボタンをクリックします。



保存場所を先ほど作成したデスクトップの「001」フォルダを指定し

「index」(半角英数)と名前をつけて保存してください。



以下のように表示されているはずです。



<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title></title>
</head>
<body>


</body>
</html>



2行目は2行で表示されていますが行番号が「2」になっていますので本来は1行なのです。

便宜上2行で表示しています。



9行目が空白になっています。


以下のテキストをコピーして、9行目に貼り付けてください。




*******ここから*******



いまさら聞けないインターネット用語集



SNS(ソーシャル・ネットワークキング・サービス)



「友達の友達は皆友達だ」という考え方に基づき、

人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの

構築をオンラインでサポートするサービスの総称である。



社会的ネットワークをインターネット上で構築するサービスのこと。

登録制、招待制などのいくつかの仕組みがあり、そのサービスの
ポリシーごとに分類される。



BLOGブログ(ウェブログ、Blog、Weblog)



狭義にはWorld Wide Web(Web)上のウェブページのURLとともに

覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。

"WebをLogする"という意味でWeblogと名付けられた。



現在、より頻繁に用いられている広義には作者の個人的な体験や日記、
特定のトピックに関する必ずしもWebに限定されない話題などのような、
時系列で比較的頻繁に記録される情報についてのWebサイト全般を含む。
このようなWebサイトの作成機能を提供するソフトウェアや
サービスなどを指して呼ぶ場合もある。
又、SNSやブログや口コミメディアを総称してCGMと呼ぶこともある。



携帯電話などのモバイル端末を使用しメールを送信して更新する
ブログはモブログ(moblog)、写真画像を主体として
更新されるブログはフォトログ(photolog、fotolog)、
ビデオコンテンツを配布するビデオブログはヴログ(Vlog)、と呼ばれ通常、
投稿にはテキストやイメージが添えられる。



IP電話(アイピーでんわ)



インターネットプロトコル(Internet Protocol)電話の略で、
電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。
音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。



狭い意味では、電気通信事業者のIP加入者線を利用した電話番号の

割り当てられるサービスをさす。

日本の電気通信事業法の電気通信役務の届出区分では、

インターネットを使用した電話番号の割り当てられないものも含む。

また、一般的にはIP電話との認知は無いまたは薄いが、

中継網にVoIPを活用している中継電話もある。

IP電話とVoIPを区別せずに記述する向きもある。

また、IPセントレックスなど内線電話のVoIP化として利用も増えている。



Copyright (C) 2007 ●●●●●. All Rights Reserved



*******ここまで*******




貼り付けが完了したらキーボードの「Ctrl」キーを押しながら「S」キーを

押してください。

これで上書き保存ができました。今後「Ctrl」+「S」と表記します。

覚えておいてくださいね。



それでは、【ツール】バーのI.Eのアイコンをクリックしてみてください。



あれれ〜〜??



テキストベースでは確かに改行されているのにブラウザで確認するとすべて1行の

連続で表示されてしまいました。




とりあえず、簡易ブラウザで表示されている画面のすぐ左上に「I.Eファイルの

アイコンとindex」と書いたタブがあります。それをクリックしてください。



テキストフィールドに戻りました。



さて、その2つのタグとは<h>タグと<p>タグです。



……ここで時間が来てしまいました。続きは次号で m(__)m


posted by ひろりん at 17:08 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

2007年07月26日

BOXの概念図

ryouiki2.gif

BOXの概念図です。
posted by ひろりん at 23:23 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。