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

概要: css とは

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

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

• CSS クラスの設定

フォントの設定

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

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

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

position プロパティ

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

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 で追加設定などを忘れないようにメモ。

その他 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.

コメント欄

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)

このページにコメント

これまでに投稿されたコメント