[ 最終更新日:2026-05-30(Sat) 22:34 ]
目次
CMS 関連ファイル一覧
CMS にあるファイルは次のとおり
| ファイル名 | 概要 |
|---|---|
| sample | Python-Markdownでどのように mdが変換されるかの例 + css |
| current_code | Python-Markdownにhtmlを出力するように機能拡張したコード + css |
StyleSheet 関係
サイト運営に必要なものだけを覚書として記載しております。
HTML の構造
昔覚えたものは以下のような簡単なもの
<html>
<head>
<title>////</title>
</head>
</body>
///////
</body>
</html>
現在では、以下のようになっているそうだ。
<!DOCTYPE html>
<html lang = "ja">
</head>
<meta charset = "utf-8">
<link href = "style.css" rel = "stylesheet" type = "text/css"> <!-- これで外部のスタイルシートを読み込む -->
<title>////</title>
</head>
<body>
<header>
////
<header>
<!-- これ以前とfooter以降を一つのpythonファイルで作成 -->
<main>
記事内容（各投稿でMDファイルで作る）
</main>
<footer>
著作権情報
</footer>
</body>
</html>
単位と特殊記号
単位
| 単位 | 説明 |
|---|---|
| pt | 1/72インチ（0.035センチ = 0.0032ミリ） |
| px | 画面表示の１点分 |
| em | 現在のフォントを基準とした１文字分 |
| ex | 小文字のxを基準としt１文字分 |
| rem | ルート要素（タグ）に設定されたフォントサイズを基準にする相対単位です。たとえばルートの文字サイズが 16px の場合、1rem は 16px となり、2rem は 32px になります |
記号のエスケープ
| 文字 | 説明 |
|---|---|
| ＆nbsp;1 | 行頭と行末のスペース |
| ＆lt; | < をタグと認識させないで、文字として扱う |
| ＆gt; | > をタグと認識させないで、文字として扱う |
| ＆quot; | " を文字として扱う |
| ＆apos; | ' を文字として扱う |
| ＆amp; | & を文字として扱う |
| ＆copy; | Copyright 表示 |
stylesheet の書き方〜３種類2のセレクタ
要素セレクタ
/* コメント */
セレクタ{プロパティ:プロパティ値;}
/* 例えば<p>にあるfontのサイズを変更するには */
<p>{
font-size:18pt;
}
ID セレクタ
以上は、要素セレクタの指定方法で、同じセレクタを持っているもの（上の例では
タグを持つすべてに機能する）。
でも、中には例外もほしい場合がある。
それが id セレクタを使ったピンポイント方法だ。
/* 書式 */
#id属性値{
プロパティ:プロパティ値;
}
/* 例として <p>タグを持つものの中で、<p id ="exception">となっている部分だけにフォントサイズを変更する*/
#id=exception{
font-size:20pt;
}
クラスセレクタ
この中間にあるのがクラスセレクタ方式だ。
/* 書式 */
.class-name{
プロパティ:プロパティ値;
}
/*例として red-text と書いたクラスにはテキストカラーとして redを指定する方法を*/
.red-text{ /*クラス名は_、半角英数字とハイフンだけで成り立っていれば自由に決定できる*/
color:red;
}
クラスの組み合わせ
本来はすべてのセレクタに適用されるが、その直後、すべての兄弟など組み合わせができる
例えば
main の中にあるすべてのセクションにある、h2 の文字カラーを赤にするには
main h2{ /*セレクタとして main と h2 を並べて記載する*/
color:red;
}
main の直後にあるセレクタにある h2 のみの文字カラーを表示するには
main > h2{ /*セレクタとして main > h2 と > でつなぐ*/
color:red;
}
idセレクタ以降の全てと直後のセレクタの書き方
id + p { /* id 直後の<p>タグの行に*/
color:red;
}
id ~p { /* id 以降のすべての<p>タグ行に*/
color:red;
}
これによって多彩な表現が可能になる
疑似セレクタ
実際の要素を表すわけではないが、特定の状態、部分を表すセレクタ2
p::first-line{ /* <p>タグのファーストライン（１行目）という特定の場所は :: */
color:blue;
}
a:hoover{ /* <a>タグにマウスポインタが乗った状態を表す : */
color:red;
}
