スタイルシート　CSS-TIPS

CSS-TIPSへようこそ！

CSS（スタイルシート）を使うことによって、XHTMLファイルがあなたのサイトもCOOL BEAUTYになりますよ。

と言う私もCSSの勉強を始めたばかりなので、あまり偉そうなことは言えません。

でもCSSの魅力に、はまっています。

色々なチップスをご紹介していきますので、よろしくお願いします。

このブログを見ながら作業するフォルダが必要なので、デスクトップに「csstips」と名前の付けたフォルダと、その中に「images」と名前の付けたフォルダを作成しておいてね。

XHTMLやCSSを記述するのに、メモ帳でも構わないですが、私は便利な「Terapad」を使っています。

皆さんもダウンロードして使ってみて下さい、もちろん無料です！！

ダウンロードはコチラから

※ブログの性格上、新しい記事から表示されます。
申し訳ありませんが、左側にある「カテゴリー」の上から順に読み進んでください。

※　スタイルシートの記述方法は「外部スタイルシート」での説明になります。

相互リンク

2008年03月17日

☆もういちど基礎から始める(X)HTML+CSS 　vol.5

■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
これならわかる！csstips
　　　（無料テンプレート付　簡単ホームページ講座）
　　　　　　　　　　　　　　　　　　　　　　通算第52号　3月17日発行

☆もういちど基礎から始める(X)HTML+CSS 　vol.5
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

最近、GYAOの「ハリウッド・シアター」にはまっています。
睡眠時間が足りません。

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS vol.5
**********************************************************************

「Stayle Note」を起動してください。
「CSS講座」フォルダの中の「宣言.txt」を開いて全てコピーします。

「Stayle Note」のテキストエリアに貼り付けてください。

「宣言」のテキストを一応記述しておきますね。
これです。　↓

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="●●●" type="text/css">
<meta name="Keywords" content="●●●">
<meta name="Description" content="●●●">
<title>●●●</title>
</head>
<body>



</body>
</html>

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

８行目に注目してください。以下の部分です。

<link rel="stylesheet" href="●●●" type="text/css">

この行の●●●の部分を「top.css」に書き換えてください。
こうなります。

<link rel="stylesheet" href="top.css" type="text/css">

これでこのHTMLファイルにCSSファイルがリンクされました。

それでは、このファイルを保存しましょう。

メニューバーの【ファイル】→【名前を付けて保存】を選択し
「CSS講座」の中に「sample.html」と名前を付けて保存してください。

この講座は(X)HTMLとCSSで構築するサイトの作成講座ですが
(x)htmlファイルも拡張子は「html」です。「(x)html」ではありません。
気をつけてくださいね。

「CSS講座」フォルダの中を確認すると、あなたのお使いのブラウザが
インターネット・エクスプローラーをお使いならば「e」のアイコンが付いている
ファイルが出来上がっているはずです。

「html」ファイルと「css」ファイルのアイコンを
シッカリと覚えてくださいね。

この講座では皆さんが必ずCSSファイルを書けるようになっています。
今は分からなくても必ず分かるようになります。

今後ともお付き合いの程よろしくお願いします。

┼──────────────────────────
編集後記
──────────────────────────┼

４月から、企業などの健康診断が大きく変わります。
４０歳以上の国民を対象にしたメタボを重視した「特定健康診査」が始まり
さらに健診結果に応じて食生活や運動不足の見直しをさせる「保健指導」が開始されます。
　
今はまだ若いから大丈夫だと考えていても、やがて来るメタボ診断からは逃れられません。

実はこの「メタボ検診」を楽しみにしています。
私の事務所には、間違いなく「保健指導」される人間がいます。

※　問合わせ先のアドレスが変わりました。
　　　　
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
発行：1-spc.com
　オフィシャルサイト　http://1-spc.com
ブログ：http://csstips.seesaa.net
　お問合せ先：info@1-spc.com　(アドレスが変更になりました。)

　購読・登録解除は下記のアドレスからお願いします。
　http://blog.mag2.com/m/log/0000208582/
■━━━━━━━━━━ Copyright 1-spc.com ━━━━━━━━━━━━■

タグ：CSS

posted by ひろりん at 23:38 | Comment(1) | TrackBack(0) | メルマガバックナンバー

2008年03月12日

☆もういちど基礎から始める(X)HTML+CSS 　vol.4

■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
これならわかる！csstips
　　　（無料テンプレート付　簡単ホームページ講座）
　　　　　　　　　　　　　　　　　　　　　　通算第51号　3月12日発行

☆もういちど基礎から始める(X)HTML+CSS 　vol.4
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

スペースシャトルが打ち上げに成功しました。
発射の様子のビデオを見ましたが、やはり興奮しますね。

いけーーーー。って叫びたくなります。

さあ、こちらも行ってみようーーー。

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS vol.4
**********************************************************************

「Stayle Note」を起動してください。
以下の記述をコピーし貼り付けます。

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

/* CSS Document */
body {
text-align: center;
}

#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}

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

メニューバーの【ファイル】→【名前を付けて保存】をクリックします。
以前作成した「CSS講座」というフォルダの中に「top.css」と
名前を付けて保存してください。

そして、フォルダを開いてください。
歯車のようなアイコンが付いたファイルができていると思います
これが、CSSファイルです。

このファイルをダブルクリックしても、そのままでは開きません。
プログラムを選択して開くことになります。
ノートパッドを指定すると記述してある中身が確認できます。

では、今回のCSSの中身はどのような記述になっているか読んで見ましょう。

まず、bodyという領域に中央揃えにしなさい。と指定してあります。

その次は#wrapperという領域の幅を800pxにし、上下のマージンは無し
左右のマージンはブラウザが持っている横幅のうち800pxを引いたものを
自動的に領域としなさい。と指定してあります。

何のことか分かりませんよね。

この講座では皆さんが必ずCSSファイルを書けるようになっています。
今は分からなくても必ず分かるようになります。

今後ともお付き合いの程よろしくお願いします。

┼──────────────────────────
編集後記
──────────────────────────┼

最近、クッキングという行為にセンスがまったく無い。
ということが分かりました。

アサリが旬ですよね。
旨い、クラムチャウダーが食いたい。

※　問合わせ先のアドレスが変わりました。
　　　　
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
発行：1-spc.com
　オフィシャルサイト　http://1-spc.com
ブログ：http://csstips.seesaa.net
　お問合せ先：info@1-spc.com　(アドレスが変更になりました。)

　購読・登録解除は下記のアドレスからお願いします。
　http://blog.mag2.com/m/log/0000208582/
■━━━━━━━━━━ Copyright 1-spc.com ━━━━━━━━━━━━■

posted by ひろりん at 16:31 | Comment(0) | TrackBack(0) | メルマガバックナンバー

2008年03月10日

☆もういちど基礎から始める(X)HTML+CSS 　vol.3

■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
これならわかる！csstips
　　　（無料テンプレート付　簡単ホームページ講座）
　　　　　　　　　　　　　　　　　　　　　　通算第50号　3月10日発行

☆もういちど基礎から始める(X)HTML+CSS 　vol.3
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

もったいない、もったいない。とお念仏のように唱えて
会社、つぶしちゃいました。もったいない。 by ●の●たいせつ

何が大切だったんだ？

無視をして、本日も「パーッと行ってみよう」by 植木等　(^_^;)

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS vol.3 (STYLE MOTE カスタマイズ)
**********************************************************************

「STYLE NOTE(スタイルノート)」はダウンロードできましたか。

ダウンロード先をもう一度記述しておきます。
以下のURLにアクセスしてください。
vectorのサイトです。
　　↓
http://www.vector.co.jp/soft/win95/net/se264071.html

ダウンロードが終わって解凍が完了すると「sn414」というフォルダが
作成されているはずです。

フォルダの中に「StyleNote.exe」というアイコンがあります。
薄い水色の円形のアイコンです。
ダブルクリックして起動します。

起動したらメニューバーの→【設定】→【エディタの設定】を選択します。
ワードラップのタブをクリックしワードラップの「
指定文字数で折り返し」にチェックをします。
文字数を半角英数で「72」と入力してください。

これで、72文字でテキストが折り返されますので編集が楽になります。
また、この講座では行番号を指定することがありますので
この設定は必須です。
「適用」ボタンをクリックし「OK」をクリックします。

次に、メニューバーの→【設定】→【全般的な設定】を選択します。
左側に表示されるボックスの中から「HTML」の「挿入」を選択します。

「挿入書式」の中から「小文字」を選んで
「適用」ボタンをクリックし「OK」をクリックします。
XHTMLのソースの記述は全て小文字で行いますのでこれも必須の作業です。

前回のソースはコピーして保存していただけましたか。
前回書き忘れましたが、任意の場所（デスクトップが良いでしょう）に
「CSS講座」という名前のフォルダに格納してください。

今回はここまでです。

┼──────────────────────────
編集後記
──────────────────────────┼

加山雄三のレコードを探しています。
東芝から発売された「君といつまでも」「夜空の星」が
カップリングされた、シングル盤で、レコード盤の色が
赤いものです。
通称、赤盤と呼ばれているものです。

誰か、ご存知ありませんか。

※　問合わせ先のアドレスが変わりました。
　　　　
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
発行：1-spc.com
　オフィシャルサイト　http://1-spc.com
ブログ：http://csstips.seesaa.net
　お問合せ先：info@1-spc.com　(アドレスが変更になりました。)

　購読・登録解除は下記のアドレスからお願いします。
　http://blog.mag2.com/m/log/0000208582/
■━━━━━━━━━━ Copyright 1-spc.com ━━━━━━━━━━━━■

タグ：CSS XHTML

posted by ひろりん at 10:43 | Comment(0) | TrackBack(0) | メルマガバックナンバー

2008年03月07日

☆もういちど基礎から始める(X)HTML+CSS 　vol.2

■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
これならわかる！csstips
　　　（無料テンプレート付　簡単ホームページ講座）
　　　　　　　　　　　　　　　　　　　　　　通算第49号　3月07日発行

☆もういちど基礎から始める(X)HTML+CSS 　vol.2
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

何回も同じ内容だという批判がありましたが
無視をして、本日も「パーッと行ってみよう」by 植木等　(^_^;)

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS vol.2 (STYLE MOTE)
**********************************************************************

前回のソースはコピーして保存していただけましたか。
前回書き忘れましたが、任意の場所（デスクトップが良いでしょう）に
「CSS講座」という名前のフォルダに格納してください。

今回は、HTMLを記述するために特化したテキストエディターを
ダウンロードしてもらいます。

無料の上に、レジストリも汚しませんので安心してご利用いただけます。

「STYLE NOTE(スタイルノート)」と呼びます。

名前の通り「CSS」を記述するにも大変役に立ちます。

以下のURLにアクセスしてください。
vectorのサイトです。

http://www.vector.co.jp/soft/win95/net/se264071.html

┼──────────────────────────
編集後記
──────────────────────────┼

昭和歌謡の音楽を聴きながらこのメルマガを書いています。
すべて、口ずさめるので筆が進みません。

今回はここら辺で失礼します。

追伸
ロス・インディオス＆シルビアの
「別れても好きな人」は彼らの曲ではありません。

パープル。シャドウズといグループサウンズの曲です。
「小さなスナック」のB面です。

B面といってもわからないでしょうか。

※　問合わせ先のアドレスが変わりました。
　　　　
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

posted by ひろりん at 20:09 | Comment(0) | TrackBack(0) | メルマガバックナンバー

2008年03月06日

☆もういちど基礎から始める(X)HTML+CSS vol.1

再開し始めたメルマガのバックナンバーです

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS vol.1
**********************************************************************
このメルマガはあくまでも初心者の方を対象にしていますので
あまり、難しい理論は語りませんのであしからず。
それでも充分理解できるように書きますので最後まで読んでくださいね

今回は、(X)HTMLの「DOCTYPE宣言/XML宣言」についてです。

HTML4.01 の宣言は

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN"
"http://wwww.w3.org/TR/html4/loose.did">

と宣言しておけば
IE6,Firefox,Netscape,Opera,safari の各ブラウザの「標準モード」で問題なく
表示されました。

しかし、(X)HTML1.0 には「Strict」「Transitional」「分類なし」という
3種類の分類があります。またこの3種類の分類にはそれぞれ2種類の宣言が
あり、その宣言の種類によって上記のブラウザの
「標準モード」か「互換モード」による表示が違うという面があります。

まったく面倒ですね。

2種類の宣言というのは「XML」を宣言するかどうかの違いです。

そこで、このような種類の多い(X)HTMLですが、このメルマガでは

以下の***********で囲まれている宣言で講座を進めていきます。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

あえて「XML」は宣言しません。
以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="●●●" type="text/css">
<meta name="Keywords" content="●●●">
<meta name="Description" content="●●●">
<title>●●●</title>
</head>
<body>



</body>
</html>

上記のソースをコピーし「宣言」と名前をつけて拡張子「.txt」で保存してくだ
さい。

タグ：CSS XHTML

posted by ひろりん at 15:39 | Comment(0) | TrackBack(0) | メルマガバックナンバー

2007年10月18日

ナビゲーション徹底研究４

li 要素のborder-bottom に線を表示したのが前回までです。

今回はすべてのli要素に線を表示してみましょう。
ついでに、liの背景色も指定し、リンクが張られている文字列のリンク線を消し訪問済みでも文字色が変わらないようにします。

cssのソースは以下です。赤文字が追記した分です。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
border-left-style:solid;
border-left-width:1px;
border-left-color:#333333;
border-right-style:solid;
border-right-width:1px;
border-right-color:#333333;
border-top-style:solid;
border-top-width:1px;
border-top-color:#333333;
background-color:#CC0000;}

ずいぶんと表記が長くなりました。
以下のように記述しなおしても同じです。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom:solid 1px #333333;
border-left:solid 1px #333333;
border-right:solid 1px #333333;
border-top:solid 1px #333333;
background-color:#CC0000;
}

次に文字列です。
リンクの線（デコレーション）を表示しないようにしてあります。
ソースは以下です。

#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:transparent;
}

以下の図のように表示されましたか。

ローカル環境で表示されていれば問題ないとは思いますが私の場合はサーバーの環境でも確認するようにしています。

「Ｂフレッツ」がだいぶ浸透してきましたがまだまだ「ＩＳＤＮ」の環境の方もいらっしゃいます。

画像を使用していないのでナローバンドの方でもストレスなく表示されると思いますがやはり安くてもいいのでサーバーにＵＰして確認された方が良いと思います。

タグ：CSS ナビゲーションレンタルサーバー

posted by ひろりん at 16:51 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月16日

ナビゲーション徹底研究3

前回の#menu liに以下の赤文字の部分を追加します。
リストのli部分のborder-bottomを表示させたということです。
なお左右のpaddingは10pxから15pxに変更してあります。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
}

こうなっていれば正解です。
　　↓　　↓　　↓

posted by ひろりん at 17:58 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月15日

ナビゲーション徹底研究２

申しわけありません。前回のhtmlに記述ミスがありました。
訂正させていただきます。m(__)m

<ahref="#">

の部分ですが　a と　href の間に半角のスペースがありませんでした。

正しくは
<a href="#">

↑　

a と　href の間に半角のスペースが入ります。

正しいソースは以下です。

<div id="menu">

<ul>

　<li><a href="#">トップページ</a></li>
　<li><a href="#">新着情報</a></li>
　<li><a href="#">ダイエット関連</a></li>
　<li><a href="#">スタッフ紹介</a></li>
　<li><a href="#">お問い合わせ</a></li>

</ul>

</div>

申しわけありませんでした。

タグ：ナビゲーション CSS

posted by ひろりん at 18:10 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年10月09日

ナビゲーション徹底研究1

縦型のナビゲーションバー１
リスト要素でマークアップした項目を用意します。

今回はこれです。
htmlファイル

<div id="menu">

<ul>

　<li><ahref="#">トップページ</a></li>
　<li><ahref="#">新着情報</a></li>
　<li><ahref="#">ダイエット関連</a></li>
　<li><ahref="#">スタッフ紹介</a></li>
　<li><ahref="#">お問い合わせ</a></li>

</ul>

</div>

次にCSSの指定です。
メニューの横幅は200pxで高さはautoに設定します。
ulとliのリスト要素のマージンとパディングを0pxに指定し、リストマーカーを非表示にします。

cssファイル

#menu{
width:200px;
height:suto;
}

#menu ul,#menu li{
margin:0px;
padding:0px;
list-style:none;
}

li要素の横幅と高さはピクセルで指定も出来ますが今回はautoの設定にし、パディングの上下を5px 左右を10pxと指定します。

#menu li{
width:auto;
height:auto;
padding:5px 10px;
}

今回はここまでです。

タグ：ナビゲーションバー CSS

posted by ひろりん at 14:29 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア

2007年07月26日

BOXの概念図

ＢＯＸの概念図です。

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

2007年07月15日

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

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

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

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

ＵＲＬ

↓
　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化として利用も増えている。

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

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

押してください。

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

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

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

あれれ～～？？

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

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

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

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

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

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

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

posted by ひろりん at 17:08 | Comment(0) | TrackBack(1) | やってみよう！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(1) | やってみよう！XHTML+CSS

2007年01月04日

明けましておめでとうございます

新年あけましておめでとうございます。
昨年は大変お世話になりました。
今年も「CSS-TIPS」をよろしくお願いします。

と言うことで、今回は貴方に「お年玉」を差し上げましょう。（と言っても大した物ではありませんが(^^ゞ）

内容はリスト化されたリンクをスタイルシートを使って、２種類のナビゲーションボタンを表示できる…というものです。
スタイルシートの便利さを理解していただければ幸いです。

ダウンロード先はここを右クリック、「対象をファイルに保存」をクリックして任意の場所に保存します。

ファイルはlzh形式の圧縮ファイルになっています。
解凍してお使い下さい。

posted by ひろりん at 12:10 | Comment(0) | TrackBack(0) | 謹賀新年

2006年12月18日

文字列にリンクタグを設定する

ホームページの作成でリンクを貼る技術は必須です。
ここでしっかりリンクを貼ることを理解して下さい。

リスト化した文字列にリンクを貼るタグの設定をします。

赤文字で表示されている部分です。
#の部分は、作成されてリンクページのファイル名が入るのですが、作成されていないので仮に＃を入力しておきます。
そうしないと、設定が出来ないのです。
簡単ですね！

ビートルズ
<ul>
<li><a href="#">ジョン・レノン</a></li>
<li><a href="#">ポール・マッカートニー</a></li>
<li><a href="#">ジョージ・ハリスン</a></li>
<li><a href="#">リンゴ・スター</a></li>
</ul>

posted by ひろりん at 15:40 | Comment(1) | TrackBack(0) | ナビゲーションのアイディア

2006年12月14日

xhtml と css の配布

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

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

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

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

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

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

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

2006年12月12日

作業２　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」をご紹介していく予定です。

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

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

※お知らせ

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

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

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

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

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

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

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

2006年12月01日

作業２　CSSその１０　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>の中に画像を配置します。

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

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

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

2006年11月28日

作業２　CSSその９　 #footer 内の　pタグについて

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

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

#footer {
width: 763px;
}

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

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

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

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

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

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

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

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

<div id="footer">

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

</div>

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

上記の太字の<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>の上下の調整です。

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

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

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

2006年11月24日

作業２　CSSその８　 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」の領域についてです。

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

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

2006年11月23日

作業２　CSSその７　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">に背景画像を設置します。
背景色では無いですよ。楽しみですね。では　　(@^^)/~~~

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

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