ホームページの基本・スタイルシートを覚えよう♪

cssを見る方法と、CSSによる破線の表示方法

No.1
投稿者： 　投稿日時：2009-10-05 22:20:42

>?他の方のホームページのcssは見られないのでしょうか？

簡単に見れます！＾＾
方法はいろいろありますが、簡単なものとしては、
?ホームページ上で右クリックでソースを表示させます。
そこに
<link href="css/style.css" rel="stylesheet" type="text/css" />

などとhead部分にスタイルシートを読み込んでいる記述があります。これは要するにこのhtmlファイルからの単純な場所（パス）なので、ブラウザのアドレス部分に記述部分のパスを書き足せば表示できる！はず・・・。
私の場合はDreamweaverが立ち上がるので、入ってない方の場合はわかりませんが（汗　おそらくなんらかの形で（メモ帳？）で見れたはず。（←ちょっと忘れました＾＾；

参考までに「3日で作るホームページ」のスタイルシートを表示させてみましょう！

トップページでソースを表示させると、
<link href="css/kenstyle.css" rel="stylesheet" type="text/css" />
と書かれてる部分があります。

ですので、単純に「3日で〜」のアドレス部分に足してみます。
こんな感じ。
http://www.homepage-4u.com/css/kenstyle.css

とブラウザのアドレス部分に入れれば表示できます。

?もしくは、下記の場所はW3Cと言ってWebの世界標準を定めている団体があり、そのサイトでCSSの検証を行うことができます。
W3C

http://jigsaw.w3.org/css-validator/

ここにCSSを表示させたいサイトのアドレス（URL）を入れて
「検証する」ボタンを押せばスタイルシートの記述が見えます。

?これは著作権的に微妙ですが、見るだけなら問題ないでしょう。
そもそもそういう機能がブラウザについているので＾＾；

サイト上でブラウザの左上のほうにあるメニューの「ファイル」をクリックし、「名前を付けて保存」をクリックし、「Webページ、完全」を選択肢、自分のパソコンに保存すればそのサイトの画像やらCSSやらをパソコンに保存できます。

ただこの方法だと、なぜかCSS内の記述が大文字なってしまいます。（俺だけ？）


ただ実際ほかの人のスタイルシートを見ても良くわからないことが多々あります。
なぜなら結構いい加減な記述をしている人が多いし、無駄な記述が多い場合がほとんどです。（←私も人のこと言えませんが・・・）

またクラス名やID名なんかも人によって付け方が違います。
というか名前は自由ですので・・＾＾；


?http://www.idee-online.com/shopbrand/258/X/
　↑このホームページのような感じで破線で区切る方法を教えていただけないでしょうか。

破線で区切る方法ですが、これも2種類あります。
上記の参考のサイトでは区切り線に画像を使っています。

スタイルシートでも可能ですが、画像のほうが楽な場合があるため、画像を使う人も多いです。
これは画像作成ソフト等（FireworksやPhotoshopなど）がないと厳しいです・・・。

tableタグを使ってレイアウトしている、いわゆるテーブルレイアウトで行っています。
ただ最近では、というよりそもそもレイアウト目的でテーブルタグを使うことは推奨されていません。
（まぁこのサイトも微妙にテーブルレイアウトですが＾＾；）

テーブルはエクセルなどのセルを思い浮かべればわかりやすいです。
要は四角（セル）でレイアウトをしていく方法です。
ホームページが出始めのころはみんなテーブルで組んでいました。

前田さんがどのようなところに破線を用いたいのかにもよりますが、スタイルシートで行う方法は、姉妹サイト「スタイルシートの森」にて説明してますので、参考までに一度ご覧ください。

スタイルシートの森
http://css.homepage-4u.com/box/border.html

破線の画像がほしい場合は、サイト内の画像がある部分で右クリックから「名前を付けて画像を保存」で保存することもできます。
著作権的にはアウトですが、破線や、その他線程度の画像で怒る人はいないでしょう・・・・。
まぁサイズが合うかは微妙ですが・・・。

html側の記述
<div class="border">
破線で囲みたいもの○○○○○○○○
</div>

スタイルシートの記述(一括指定の記述）

.border{
border:1px dotted #cccccc;
padding:5px;
}

これでとりあえずは破線で囲まれます。
右だけなどの場合は、

.border{
border-right:1px dotted #cccccc;
padding:5px;
}
とすれば右側だけに破線が表示されます。
border-rightの部分で表示させたい方向を指定できます。
例）border-bottom（下だけ）

下以外全部
.border{
border:1px dotted #cccccc;
border-bottom:0;
padding:5px;
}

こんな感じです。
解決できそうですか？

なにかあればまた聞いてください！＾＾

それでは〜〜〜ﾉｼ