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) | メルマガバックナンバー

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月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月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月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>

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

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

<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ファイルを書けるようになっています。
今は分からなくても必ず分かるようになります。

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


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

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

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


※ 問合わせ先のアドレスが変わりました。
    
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
発行: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) | メルマガバックナンバー

2009年05月04日

「もういちど基礎から始める(X)HTML+CSS  臨時号」

■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
これならわかる!csstips
   (無料テンプレート付 簡単ホームページ講座)
                      通算第53号 5月4日発行

☆もういちど基礎から始める(X)HTML+CSS  臨時号
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■

(X)HTML+CSS はサイトを構築する基本中の基本です。
が・・・。

**********************************************************************
☆もういちど基礎から始める(X)HTML+CSS 臨時号
**********************************************************************

とんでもなく長い間休刊しておりました。
メルマガですが、まだ覚えていただけておりますか?

言い訳になってしまいますが
昨今のCSSについて、当メルマガの見解を述べてみたいと思います。

行き着くところは、結局ブラウザの解釈の問題なのか!

と言うことです。

(X)HTMLにはW3Cが推奨する文章構造を記述しても
そのデザインを司るCSSがブラウザの解釈によって
見え方が違うんですね。

そのたびにCSSハックなる作業をするのですが
ブラウザが、バージョンアップするたびに
またまた、解釈が違ってきます。

そこで、以前作成したサイトのCSSを見直すことになります。

それでは、ブラウザの世界標準といえばどのブラウザなのでしょう。

サイト制作者によって答えはまちまちです。

それでもCSSは(X)HTMLのよきパートナーです。

これからも、TIPSをお届けしようと考えています。
今後ともお付き合いの程よろしくお願いします。


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

札幌市西区でパソコン教室を開催しています。

初心者の方から、資格を取りたい方やシニア世代まで
楽しい授業を心がけて開催しています。

お問い合わせは
info@2spc.net
まで、お気軽にどうぞ


※ 問合わせ先のアドレスが変わりました。
    
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
発行:1-spc.com
 オフィシャルサイト http://1-spc.com
 ブログ:http://csstips.seesaa.net
 お問合せ先:info@1-spc.com (アドレスが変更になりました。)
 SPCパソコン教室:http://2spc.net
 
 購読・登録解除は下記のアドレスからお願いします。
 http://blog.mag2.com/m/log/0000208582/
■━━━━━━━━━━ Copyright 1-spc.com ━━━━━━━━━━━━■

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

広告


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

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

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


×

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