ウェブページの外観を整える css: 基本文法など

UB3/informatics/html/css

このページの最終更新日: 2024/09/30

  1. 概要: CSS とは
  2. フォントの設定
  3. サイドバーなど、要素の配置方法を指定する
    • position プロパティ
    • float プロパティ
  4. リンクの設定
  5. このサイトで追加した CSS 設定
  6. その他 CSS に関するメモ

広告

概要: css とは

ウェブサイトの内容は html で記述されているが、ページの見た目 (背景色、フォントなど) に関わる情報は通常 1 つのファイルにまとめられており、必要に応じて各 html ページからそれを参照するという形がとられる。この情報を記述する方式を CSS という。Cascading Style Sheet の略である。

このページは、CSS に関するとりあえずのメモである。内容が増えてきた項目から、独立したページに移している。現在、以下のような css に関するページがある。

CSS には、以下のような基本ルールがある (2)。

  • css ファイルで重複する指示 (文字サイズなど) があるときには、下の記述が優先される。
  • html ファイルで複数の css ファイルを読み込んでおり、その内容が重複しているときは、下で読み込んだファイルの内容が優先される。
  • html に書かれた記述の方が優先される。
  • ! important がついていれば、上の記述でも適用される。

フォントの設定

CSS Web safe font から選ぶのが良いだろう。font-family" 'Georgia', self のように ' ' でフォントを指定し、その次にファミリーを指定する。

  • 下線は text-decoration: underline; で設定。

サイドバーなど、要素の配置方法を指定する

position プロパティ

Window 上部に指定されるメニューやフッターなどの要素の配置は、position プロパティで指定する。position には、以下のいずれかの値を指定することができる (1)。

static

デフォルトの値、何も指定しないとこれになる。

relative

相対位置で指定。通常配置される位置から、場所を移動することができる。たとえば以下の例では、通常の位置から 50 px 左に移動させることになる。だが、この「通常の位置」というのがどこになるのか、いまいちよくわからない。

position; relative
top: 50 px;

absolute

親要素に position: static; 以外を設定した場合、その親要素を基準にして絶対位置を指定する。

fixed

他の要素ではなく、ウィンドウ全体を基準に絶対位置を指定する。スクロールしても同じ位置 に表示される。

sticky


2024 年夏、このページ を参考に javascript で固定サイドバーを設置開始。html と css でやる方法もあるようだが、javascript の方が簡単だった。

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

npd

段落タグ p の下には約 1 行分の padding があるが、これがないクラス。pitem というタグを自作していたが、これは p class = "npd" へ切り替えていく。

ul, ol

箇条書きの下にスペースを開ける pd と、項目間にスペースを開ける long を設定。

img

cent, centm150 centm200, centm350, centm350 を設定。中央揃えと max width を指定。

bm25 は bottom margin 25 px で、画像の下にスペースを開けたい場合に使用する。

border で 1 px の枠線を追加。border: 1px solid black; のような形になる。 }

table

index でレスポンシブ対応。

h2, h3

index でレスポンシブ対応。


2022/12/29 に CSS を変更。とりあえず MMR のページでテスト。

  • html から不要と思われる link rel="stylesheet" href="../../meta/css/slide.css" の行を削除。
  • UBC, UB3, UBH で style.css を共通にする。
  • sm-core-css, sm-blue css は、メニューの設定で必要。
  • イメージの最大サイズ、タブレットとスマホの設定を変更。CSS は後ろの記述が優先されるという性質を利用して、800 px 以下のところで設定しなおした。

同様に、2022 年末に「top へ戻る」ボタンを position:fixed にした。iPhone のサファリで UBH のみうまく動かない。css は同じなので、キャッシュの問題なのではないかと考えている。いずれキャッシュクリアしてみる。参考にしたのは ここここ。transform になっていた css の部分は全部消した。

その他 CSS に関するメモ

  • ダウンロードした html テンプレートを使っている場合など、CSS に使われていない部分があることがある。そのような不要な CSS component を削除してくれる ツールの紹介。
  • 2022 年 7 月に html scroll-behavior: smooth を設定してページ内スクロールをスムースにしようとした。Safari には対応しておらず、Google Chrome ではうまく動いたが、Visual Studio Code のプレビューの挙動も変になる (編集中、常にスクロールしている感じになる)。他の方法を検討。

広告

References

  1. positionプロパティを身に着けよう!基本的な知識と使い方を解説! 基礎編. Link: Last access 2021/12/15.
  2. CSSが適応される優先順について. Link: Last access 2023/01/18.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。