クールサイトを作る為にスタイルシートをマスターしよう！
無料HTMLテンプレート・CGI・PHPスクリプト・ホームページ素材の配布
| HOME > Web技術講座 > スタイルシート活用講座 | 【ネットマニアも使用中のお勧めレンタルサーバー。そのお勧めの理由とは？】 |
WEB技術講座スタイルシート活用講座 |
スタイルシートを活用することにより文章の見栄えが格段によくなります。
クールサイトを作る為にスタイルシートをマスターしよう！
スタイルシートをHTMLに組み込む。組み込み方は３つあります。 １．外部スタイルシートファイルにリンクする。 ２．<head>内に記述する。 ３．個別に指定する。 １．外部スタイルシートをHTMLに組み込む 外部スタイルシートにリンクして組み込む場合、1つのファイルでサイト全体を指定できます。 逆に言えば1つのファイルを変更するだけで、全てのページに反映できる利点があります。 私は主にこの方法を用いています。 まずスタイルシートファイルを用意します。（netmania.css) これはメモ帳などで簡単に編集できます。 それをHTML内に組み込むために以下の記述をします。 <html> <head> <title>タイトル</title> <link rel="stylesheet" href="netmania.css"> </head> <body> 本文 </body> </html> 上記記述をすることにより、HTMLが外部スタイルシートファイルを読み込みます。 ２．<head>内に記述する。 次にHTML内に直接記述します。 <html> <head> <title>タイトル</title> <style type="text/css"> <!-- ここに直接記述する --> </style> </head> <body> 本文 </body> </html> 上記のように、直接HTML内に記述します。 但しこの場合は、1つのファイルのみの記述となります。 しかし、外部からのリンクよりはややこしくありませんので、初めての方はオススメです。 ３．個別に指定する。 次に個別に直接指定しまう方法です。 １．２は全体的に指定したい場合の方法ですが、1箇所のみの場合は個別指定の方が良いです。 サンプルとしてテーブルに直接指定する方法です。 <html> <head> <title>タイトル</title> </head> <body> <table style="BORDER-TOP: #999999 1px solid"> <TR><TD></TD></TR></TABLE> </body> </html> これは簡単にスグにできます。 では、具体的なスタイル要素について次の章で解説します。
スタイルシートにて文字を自由に装飾できます。
上記要素を組み合わせることにより文字にスタイルを指定できます。
"リンク４スタイル
"人気！リンクアンダーラインを消す リンクのアンダーラインを消すには、以下のスタイルを指定します。 a { text-decoration:none; } このスタイルを指定することにより、アンダーラインは消えます。 しかし、[a]だけの指定の場合、マウスが乗ったとき、クリックされたとき、既にクリックされたリンクのときに アンダーラインが出現します。それら全てにおいて消すには、全てに指定する必要があります。
|