-質問掲示板♪ -
申し訳ございませんが、一時ご質問の受付を中止いたします。ご迷惑をおかけし申し訳ございません。
質問
破線表示について
質問者:前田 投稿日時:2009-10-05 10:14:58
はじめまして。親切でわかりやすいこのホームページを見つけて以来、何も知らずに始めて頑張っています!
質問です。
?他の方のホームページのcssは見られないのでしょうか?
?http://www.idee-online.com/shopbrand/258/X/
↑このホームページのような感じで破線で区切る方法を教えていただけないでしょうか。
どうぞよろしくお願い致します!
返信は全 1 件投稿されています。
返信
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;
}
こんな感じです。
解決できそうですか?
なにかあればまた聞いてください!^^
それでは〜〜〜ノシ
※この質問掲示板は管理人が勉強もかねてPHP+MySQLで制作したものです。
動作チェックは行っておりますが、
不具合等がございましたらご報告いただけるとありがたいです^^;
不具合報告⇒