ウェブページの外観を整える css: 基本文法など
UB3/informatics/html/css
このページの最終更新日: 2022/05/16- 概要: CSS とは
- フォントの設定
- サイドバーなど、要素の配置方法を指定する
- position プロパティ
- float プロパティ
- リンクの設定
- このサイトで追加した CSS 設定
- その他 CSS に関するメモ
広告
概要: css とは
ウェブサイトの内容は html で記述されているが、ページの見た目 (背景色、フォントなど) に関わる情報は通常 1 つのファイルにまとめられており、必要に応じて各 html ページからそれを参照するという形がとられる。この情報を記述する方式を
このページは、CSS に関するとりあえずのメモである。内容が増えてきた項目から、独立したページに移している。現在、以下のような css に関するページがある。
フォントの設定
CSS Web safe font から選ぶのが良いだろう。font-family" 'Georgia', self のように ' ' でフォントを指定し、その次にファミリーを指定する。
- 下線は text-decoration: underline; で設定。
サイドバーなど、要素の配置方法を指定する
position プロパティ
Window 上部に指定されるメニューやフッターなどの要素の配置は、position プロパティで指定する。position には、以下のいずれかの値を指定することができる (1)。
static |
デフォルトの値、何も指定しないとこれになる。 |
relative |
相対位置で指定。通常配置される位置から、場所を移動することができる。たとえば以下の例では、通常の位置から 50 px 左に移動させることになる。だが、この「通常の位置」というのがどこになるのか、いまいちよくわからない。
|
absolute |
親要素に position: static; 以外を設定した場合、その親要素を基準にして絶対位置を指定する。 |
fixed |
他の要素ではなく、ウィンドウ全体を基準に絶対位置を指定する。 |
sticky |
float プロパティ
サイドバーまたはメインコンテンツの 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;
}
このサイトで追加した css 設定
css で追加設定などを忘れないようにメモ。
Tag |
Class |
---|---|
p |
段落タグ p の下には約 1 行分の padding があるが、これがないクラス。pitem というタグを自作していたが、これは p class = "npd" へ切り替えていく。 |
ul, ol |
箇条書きの下にスペースを開ける |
img |
cent, centm150 centm200, centm350, centm350 を設定。中央揃えと max width を指定。 bm25 は bottom margin 25 px で、画像の下にスペースを開けたい場合に使用する。 |
table |
|
h2, h3 |
その他 CSS に関するメモ
- ダウンロードした html テンプレートを使っている場合など、CSS に使われていない部分があることがある。そのような不要な CSS component を削除してくれる ツールの紹介。
広告
References
- positionプロパティを身に着けよう!基本的な知識と使い方を解説! 基礎編. Link: Last access 2021/12/15.
コメント欄
各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。
禁止ワード: http, the, м (ロシア語のフォントです)
|
|
このページにコメント
これまでに投稿されたコメント
Date | Name | Comment |
---|---|---|
2022-03-10 20:56:21.675954 |
ZAP |
|
2021-11-02 16:07:08.008456 |
ZAP |