ウェブページの外観を整える css: 基本文法など
UB3/informatics/html/transfer
このページの最終更新日: 2021/04/05- 概要: css とは
- クラスの設定
- フォントの設定
- サイドバーの左右を入れ替える
- リンクの設定
広告
概要: css とは
ウェブサイトの内容は html で記述されているが、ページの見た目 (背景色、フォントなど) に関わる情報は通常 1 つのファイルにまとめられており、必要に応じて各 html ページからそれを参照するという形がとられる。この情報を記述する方式
このページは、css に関するとりあえずのメモである。
ダウンロードした html テンプレートを使っている場合など、CSS に使われていない部分があることがある。そのような不要な CSS component を削除してくれる ツールの紹介。
クラスの設定
たとえば箇条書きは ul タグや ol タグ を使って設定するが、シンボルの種類、アイテム間の間隔など、いくつかのパターンが欲しい場合がある。
このような場合には、ul や ol などのタグに対して
箇条書きの基本的な書き方は以下の通り。
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>
たとえば bottom-margin を広くした bigmargin というパターンを作りたい場合には、まず css を以下のように設定する。
padding-bottom: 20px;
さらに html ファイルでの記述を次のようにする。
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>
これで、bigmargin という ul タグのクラスを指定できたことになる。
- 親になるタグを作らずに、ドットから始めて .aaa のように記述すると、複数のタグで参照できるクラスを作れる。つまり <p class="aaa"> でも <ul class="aaa"> でも使えるようになる。
- これに対して、たとえば p だけでクラスを設定したいときは、css で p に続ける形で p.aaa と指定する。やはり <p class="aaa"> で参照できる。
フォントの設定
CSS Web safe font から選ぶのが良いだろう。font-family" 'Georgia', self のように ' ' でフォントを指定し、その次にファミリーを指定する。
- 下線は text-decoration: underline; で設定。
サイドバーの左右を入れ替える
サイドバーまたはメインコンテンツの float right または left で切り替える。
まず、ページの html タグを注意深くチェックし、サイドバーやメインコンテンツが含まれる div を見つける。たとえば、Ultrabem のこのページでは、<div id="main"> の中に中央のカラムが含まれる。左サイドバーは <div id="sub">、右サイドバーは <div id="side"> である。
さらに、main と sub が contents-inner という div に囲まれている。
次に CSS を見ると、contents-inner の場所が float: left と指定されている。試しにこれを right に変えてみると、ちゃんと左右が入れ替わる。
リンクの設定
リンクの色を変えたくないときは、何も指定しないか、全てを指定する。何も指定しない場合は、
a {
color: blue;
}
:link, :visited, :hover, :active でそれぞれ色を指定できる。
a:link, a:visites, a:hover, a:active {
color: blue;
}
広告
References
コメント欄
各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。
禁止ワード: http, the, м (ロシア語のフォントです)
|
|
このページにコメント
これまでに投稿されたコメント
Date | Name | Comment |
---|