Style Sheet URL

MASHの「ホームページのススメ (Windows版)」


MASHが初めて訪れた素材集サイトです。＝＝＝＞	G-TOOL 評価ポイント：業界？？随一のコンテンツの多さと懇切丁寧なプレゼンは涙モノです。

ホームページを今すぐ作ってみよう！「テキスト・エディター編（その9）」
どうしても、お金を掛けずに自分でホームページ(以降 HPと呼ぶ）を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。（フリーウエアも一杯ある）例としては、Windowsにオマケで付いている「メモ帳」などである。
前回（第8回）、使ったスタイルシートは、<head>～</head>間で、STYLEを定義したものでしたが、今回は、予め、そのSTYLEを独立したファイルとして用意しておき、自分が使いたいHTMLファイルへ呼び出せるようにしてみましょう。これにより、複数の人たちで同時制作するようなHPなどでレイアウトを崩さずに仕事が進められます。むろん、個人の趣味範囲でも、STYLEを頭の中に記憶したり、いちいち、タグ内へSTYLEを書き込む必要もありません。
スタイルシートを読み込もう！ MASHは、無精者なので、スタイルシートを使わない。最初に、STYLEを取り決めておいて、すっきりとHPを整形するなんて・・・・オイオイ、今さっき、いろんなメリットを書き連ねたばかりじゃん！！！・・・そうですね・・・・二重人格、偽善者なのかもしれません。とにかく、潜在的には、スタイルシートのことを気にはしてました・・・・　まあ、冗談はさておき、いつもの通り、以下のスクリプトを「メモ帳」へコピー＆ペーストして・・・ちょっとだけご注意！（１）は、メモ帳で保存時、拡張子＝cssで、（２）は、拡張子＝htmlで保存して下さい。
注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。
（１）スタイルシートの定義よく見ると、単に、背景、文字h1,h2,h3、枠に関するスタイルを定義しているだけである。難しく考えずに、色、サイズなどの数字を変えても構わない。さて、コピー＆ペーストしてから、style_mash.cssという名前で保存。
body {background-color:orange} h1 {font-size:18pt; color:green} h2 {font-size:20pt; color:red} h3 {font-size:24pt; color:white} div {background-color:blue; width:450px; height:70px}
（2）スタイルシートを読み込みたいHP(HTML書類)の作成よく見ると、単に、背景、文字h1,h2,h3、枠に関するスタイルを定義しているだけである。難しく考えずに、色、サイズなどの数字を変えても構わない。さて、コピー＆ペーストしてから、css_dl.htmlという名前で、さっきのstyle_mash.cssと同じフォルダーへ保存。（別のフォルダーを希望であれば、以下のhref=・・・を書き換えてね。
<html> <head> <title>スタイルシートを読み込もう</title> <link rel="stylesheet" href="style_mash.css" type="text/css"> </head> <body> <!-- さっきのスタイル定義と見比べれば、div, ,h1, body などのスタイルが、そのまま、活かされてくるので、楽ちんである。 --> <center> <div><h3>STYLE SHEETを使うと・・・</h3></div> <h2>こんな感じになります</h2> <h1>工夫すれば、より使いやすく、オシャレになります。</h1> </center> </body> </html>

さて、早速、今作ったcss_dl.htmlを開くと、このようになります。
次回こそ？？？？、もっと凝ったスタイルシート＝＞COOLなサイトの実例を検証！かと思ったけど、気まぐれなので、判りません・・・ゴメン
有名・強力壁紙関連サイトへのリンク MASH厳選素材リンク集次回「テキスト・エディター編（その10）」をお楽しみに！
MASHのHPへ

MASHの「ホームページのススメ (Windows版)」

MASHが初めて訪れた素材集サイトです。＝＝＝＞

G-TOOL
評価ポイント：業界？？随一のコンテンツの多さと懇切丁寧なプレゼンは涙モノです。

ホームページを今すぐ作ってみよう！「テキスト・エディター編（その9）」

どうしても、お金を掛けずに自分でホームページ(以降 HPと呼ぶ）を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。（フリーウエアも一杯ある）例としては、Windowsにオマケで付いている「メモ帳」などである。

前回（第8回）、使ったスタイルシートは、<head>～</head>間で、STYLEを定義したものでしたが、今回は、予め、そのSTYLEを独立したファイルとして用意しておき、自分が使いたいHTMLファイルへ呼び出せるようにしてみましょう。これにより、複数の人たちで同時制作するようなHPなどでレイアウトを崩さずに仕事が進められます。むろん、個人の趣味範囲でも、STYLEを頭の中に記憶したり、いちいち、タグ内へSTYLEを書き込む必要もありません。

スタイルシートを読み込もう！
MASHは、無精者なので、スタイルシートを使わない。最初に、STYLEを取り決めておいて、すっきりとHPを整形するなんて・・・・オイオイ、今さっき、いろんなメリットを書き連ねたばかりじゃん！！！・・・そうですね・・・・二重人格、偽善者なのかもしれません。とにかく、潜在的には、スタイルシートのことを気にはしてました・・・・　まあ、冗談はさておき、いつもの通り、以下のスクリプトを「メモ帳」へコピー＆ペーストして・・・ちょっとだけご注意！（１）は、メモ帳で保存時、拡張子＝cssで、（２）は、拡張子＝htmlで保存して下さい。

注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。

（１）スタイルシートの定義
よく見ると、単に、背景、文字h1,h2,h3、枠に関するスタイルを定義しているだけである。難しく考えずに、色、サイズなどの数字を変えても構わない。さて、コピー＆ペーストしてから、style_mash.cssという名前で保存。

body {background-color:orange}

h1 {font-size:18pt; color:green}

h2 {font-size:20pt; color:red}

h3 {font-size:24pt; color:white}

div {background-color:blue; width:450px; height:70px}

（2）スタイルシートを読み込みたいHP(HTML書類)の作成
よく見ると、単に、背景、文字h1,h2,h3、枠に関するスタイルを定義しているだけである。難しく考えずに、色、サイズなどの数字を変えても構わない。さて、コピー＆ペーストしてから、css_dl.htmlという名前で、さっきのstyle_mash.cssと同じフォルダーへ保存。（別のフォルダーを希望であれば、以下のhref=・・・を書き換えてね。

<html>

<head>

<title>スタイルシートを読み込もう</title>

</head>

<body>

<div><h3>STYLE SHEETを使うと・・・</h3></div>

<h2>こんな感じになります</h2>

<h1>工夫すれば、より使いやすく、オシャレになります。</h1>

</center>

</body>

</html>

さて、早速、今作ったcss_dl.htmlを開くと、このようになります。

次回こそ？？？？、もっと凝ったスタイルシート＝＞COOLなサイトの実例を検証！かと思ったけど、気まぐれなので、判りません・・・ゴメン

有名・強力壁紙関連サイトへのリンク MASH厳選素材リンク集

次回「テキスト・エディター編（その10）」をお楽しみに！

MASHのHPへ