このWebサイト管理者用メモ ： GitHub pagesでのCSSスタイル

Home > Software > This Page

Last Update

GitHub pagesで使用している、現行のCSSファイルを参照する /oasis3855/styles.css

見出し

各見出しのスタイルと、前後のマージンは次のように表現される。

<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>
<h4>見出しレベル4</h4>
<h5>見出しレベル5</h5>
            

 

 

レイアウト

タイトルヘッダ

 

<div id="layout_header" style="background-image: url('pics/ico_pc.png');
background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 50%">
<p>...１行目<br /> タイトル文字列２行目<br /> ...３行目</p>
</div>
            

縦100pxのアイコン画像を左端に、文字列を右端に表示する。 文字列は２行目がちょうど画像の上下中心線付近になる。

 

 

リンク スタイル

通常のリンク スタイル

通常のリンクスタイルは、このように 表示される

特殊な（メニューページで使うような）リンク スタイル

divセクションで囲んだ内側のリンクは、次のように表示される
改行幅のサンプル例として、<br/>で改行した場合と、新たな<p>セクションとした場合の２種類を掲載した

<div class="menu_large_brown"> ～～ </div/> 

 <div class="menu_small_brown"> ～～ </div/> 

 <div class="menu_small_blue"> ～～ </div/> 

 

 

リンクいろいろ

ページ内にジャンプ先のセクションを記載する例。

<div id="section_test"> </div>
～～
<a href="#section_test">セクションに飛ぶ</a>
            

各種ファイルへのリンクを記載する例。

<a href="#test" class="link_external">外部サイト</a> <a href="#test"
class="link_lock">httpsサイト</a> <a href="#test" class="link_file">ファイル</a> <a
href="#test" class="link_document">文書ファイル</a> <a href="#test"
class="link_audio">オーディオファイル</a> <a href="#test" class="link_video">ビデオファイル</a>
<a href="#test" class="link_download">ダウンロード</a> <a href="#test"
class="link_orange">矢印アイコン付き</a> <a href="#test" class="link_blue">矢印アイコン付き</a>
<a href="#test" class="link_red">矢印アイコン付き</a> <a href="#test"
class="link_black">矢印アイコン付き</a> <a href="#test" class="link_gray">矢印アイコン付き</a>
<a href="#test" class="link_orange_dot">丸アイコン付き</a> <a href="#test"
class="link_blue_dot">丸アイコン付き</a> <a href="#test" class="link_red_dot">丸アイコン付き</a>
<a href="#test" class="link_black_dot">丸アイコン付き</a> <a href="#test"
class="link_gray_dot">丸アイコン付き</a> <a href="#test" class="link_return">前のページに戻る</a>
<a href="#test" class="link_right">進む</a> <a href="#test"
class="link_left">戻る</a>
            

外部サイトへのリンク
httpsサイトへのリンク
ファイルへのリンク
文書ファイルへのリンク
オーディオファイルへのリンク
ビデオファイルへのリンク
ファイルをダウンロードする(123,456 kBytes)
矢印アイコン付き
矢印アイコン付き
矢印アイコン付き
矢印アイコン付き
矢印アイコン付き
丸アイコン付き
丸アイコン付き
丸アイコン付き
丸アイコン付き
丸アイコン付き
前のページに戻る
進む
戻る

ファイルへのリンクアイコンはMediaWikiパッケージから、矢印アイコンは無料素材倶楽部より借用。ダウンロード、戻る・進むアイコンは自作。

 

 

画像

背景色付きの写真用フレーム

DIVのクラス ： photo_left, photo_right

写真を回り込んで表示されている文章が短い場合、後に続く文章が上にずれて表示される。それを回避するため、回り込み解除タグ（div class="clear"）を文章末尾に挿入する。

<div class="photo_right"> <img src="画像ファイル.jpg" width="000" height="000"
alt="代替txt" title="図の説明文" /><br />
写真のキャプション<br/>「右寄せ写真」
</div>
文章を記述。文章は写真の左側に回りこんで表示される。
<div class="clear"></div>

<div class="photo_left"> <img src="画像ファイル.jpg" width="000" height="000"
alt="代替txt" title="図の説明文" /><br />
写真のキャプション<br/>「左寄せ写真」
</div>
文章を記述。文章は写真の右側に回りこんで表示される。
<div class="clear"></div>
            

この日、曹操は景山の上から、軍の情勢をながめていたが、ふいに指さして、「曹洪、曹洪。あれは誰だ。まるで無人の境を行くように、わが陣地を駆け破って通る不敵者は？」と、早口に訊ねた。曹洪を始め、そのほか群将もみな手を眉にかざして、誰か彼かと、口々に云い囃していたが、曹操は焦れッたがって、「早く見届けてこい」と、ふたたび云った。曹洪は馬をとばして、山を降ると、道の先へ駆けまわって、彼の近づくのを見るや、「やあ。敵方の戦将。ねがわくば、尊名を聞かせ給え」と、呼ばわった。声に応じて、「それがしは、常山の趙子龍。――見事、わが行く道を、立ちふさがんとせられるか」と、青工の剣を持ち直しながら趙雲は答えた。

この日、曹操は景山の上から、軍の情勢をながめていたが、ふいに指さして、「曹洪、曹洪。あれは誰だ。まるで無人の境を行くように、わが陣地を駆け破って通る不敵者は？」と、早口に訊ねた。曹洪を始め、そのほか群将もみな手を眉にかざして、誰か彼かと、口々に云い囃していたが、曹操は焦れッたがって、「早く見届けてこい」と、ふたたび云った。曹洪は馬をとばして、山を降ると、道の先へ駆けまわって、彼の近づくのを見るや、「やあ。敵方の戦将。ねがわくば、尊名を聞かせ給え」と、呼ばわった。声に応じて、「それがしは、常山の趙子龍。――見事、わが行く道を、立ちふさがんとせられるか」と、青工の剣を持ち直しながら趙雲は答えた。

なお、文章途中で回り込みを解除する場合は、 <div class="clear"></div> を解除位置に記述する。

背景色なしの図形画像用フレーム

DIVのクラス ： fig_left, fig_center, fig_right

<div class="fig_right"> <img src="画像ファイル.jpg" width="000" height="000"
alt="代替txt" title="図の説明文" /><br />
図のキャプション<br/>「右寄せ図」
</div>
文章を記述。文章は図の左側に回りこんで表示される。
<div class="clear"></div>

<div class="fig_left"> <img src="画像ファイル.jpg" width="000" height="000"
alt="代替txt" title="図の説明文" /><br />
図のキャプション<br/>「左寄せ図」
</div>
文章を記述。文章は図の右側に回りこんで表示される。
<div class="fig_center"> <img src="画像ファイル.jpg" width="000"
height="000" alt="代替txt" title="図の説明文" /><br /> 図のキャプション<br/>「中央揃えの図」 </div>
            

この日、曹操は景山の上から、軍の情勢をながめていたが、ふいに指さして、「曹洪、曹洪。あれは誰だ。まるで無人の境を行くように、わが陣地を駆け破って通る不敵者は？」と、早口に訊ねた。曹洪を始め、そのほか群将もみな手を眉にかざして、誰か彼かと、口々に云い囃していたが、曹操は焦れッたがって、「早く見届けてこい」と、ふたたび云った。曹洪は馬をとばして、山を降ると、道の先へ駆けまわって、彼の近づくのを見るや、「やあ。敵方の戦将。ねがわくば、尊名を聞かせ給え」と、呼ばわった。声に応じて、「それがしは、常山の趙子龍。――見事、わが行く道を、立ちふさがんとせられるか」と、青工の剣を持ち直しながら趙雲は答えた。

この日、曹操は景山の上から、軍の情勢をながめていたが、ふいに指さして、「曹洪、曹洪。あれは誰だ。まるで無人の境を行くように、わが陣地を駆け破って通る不敵者は？」と、早口に訊ねた。曹洪を始め、そのほか群将もみな手を眉にかざして、誰か彼かと、口々に云い囃していたが、曹操は焦れッたがって、「早く見届けてこい」と、ふたたび云った。曹洪は馬をとばして、山を降ると、道の先へ駆けまわって、彼の近づくのを見るや、「やあ。敵方の戦将。ねがわくば、尊名を聞かせ給え」と、呼ばわった。声に応じて、「それがしは、常山の趙子龍。――見事、わが行く道を、立ちふさがんとせられるか」と、青工の剣を持ち直しながら趙雲は答えた。

この日、曹操は景山の上から、軍の情勢をながめていたが、ふいに指さして、「曹洪、曹洪。あれは誰だ。まるで無人の境を行くように、わが陣地を駆け破って通る不敵者は？」と、早口に訊ねた。曹洪を始め、そのほか群将もみな手を眉にかざして、誰か彼かと、口々に云い囃していたが、曹操は焦れッたがって、「早く見届けてこい」と、ふたたび云った。曹洪は馬をとばして、山を降ると、道の先へ駆けまわって、彼の近づくのを見るや、「やあ。敵方の戦将。ねがわくば、尊名を聞かせ給え」と、呼ばわった。声に応じて、「それがしは、常山の趙子龍。――見事、わが行く道を、立ちふさがんとせられるか」と、青工の剣を持ち直しながら趙雲は答えた。

Lightbox

MovableTypeの"タグ"にfancyboxと入力することで、ページ内の全てのjpgファイルを開くタグ（<a href=...>）に対してFancybox関連のJavaScriptが有効化される。Lightboxでのキャプション（写真の説明）は<a href=...>タグ内にtitle"..."を設定する。Lightbox内で写真をマウスのスクロールボタン等で前後に切り替えるには、<a href=...>タグ内にrel="lightbox_group"を設定する。

htmlのhead内に記述

<!-- image popup -lightbox- jQuery module -->
<script type="text/javascript" src="/webpage/cgi-bin/jquery-3.7.0.min.js">
</script>
<script type="text/javascript" src="/webpage/cgi-bin/fancybox-2.1.5/jquery.mousewheel-3.0.6.pack.js">
</script>
<script type="text/javascript" src="/webpage/cgi-bin/fancybox-2.1.5/jquery.fancybox.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="/webpage/cgi-bin/fancybox-2.1.5/jquery.fancybox.css"
media="screen" />
<script type="text/javascript" src="/webpage/cgi-bin/fancybox-2.1.5/fancyboxOnload.js"></script>
            

html内に記述（赤着色部が通常の a タグに加える部分）

<a rel="lightbox_group" title="写真のキャプション" 
href="/example/photo.jpg"><img src="/thumb/thumb.jpg" width="123"
height="456" alt="sample.jpg" title="写真のキャプション" /></a>
            

囲み

ソースコード

ソースコードは <pre> で囲う。パス名など、タイトルヘッダ部分は <pre class="title"> と記述する

ソースコード内の < や > などの文字は、エスケープすること

<pre class="title">hello.c</pre>
<pre>
    #include&lt;stdio.h&gt;
        
    int main(void)
    {
        printf("Hello World\n");
        return 0;
    }
</pre>
            

これは、次のように表示される。なお、わかりやすいようにページ中央に表示するよう style="width:80%; margin: 0 auto;" を追加している

hello.c

#include<stdio.h>
    
int main(void)
{
    printf("Hello World\n");
    return 0;
}
            

ソースコード着色（シンタックス ハイライト）

サーバサイドではなく、フロントエンド（ブラウザ）のJava Scriptでソースコード着色する highlight.js（https://highlightjs.org/ , GitHub）を用いる方法

HTMLでこのように記述する

<head>
<link rel="stylesheet" href="../../css-language-hilight/styles/default.min.css">
<script src="../../css-language-hilight/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>

<html>

<pre><code class="language-c">
#include&lt;stdio.h&gt;
    
int main(void)
{
    printf("Hello World\n");
    return 0;
}
</code></pre>

</html>

ブラウザでは、このように表示される

#include<stdio.h>
    
int main(void)
{
    printf("Hello World\n");
    return 0;
}

引用

引用は <blockquote> で囲う。パス名など、タイトルヘッダ部分は <pre class="title"> と記述する

<blockquote class="title">大本営発表。 昭和19年10月26日16時50分。</blockquote>
<blockquote>
    １．レイテ島の我が陸上部隊は10月20日以降、タクロバン南方、およびドラッグ付近に上陸せる約3個師団の敵を邀撃、奮戦中なり。<br/>
    ２．我が航空部隊は 10月19日以降、レイテ湾内の敵輸送船団、およびその護衛艦艇を連続攻撃中にして、我が艦隊また25日未明、同湾内に突入、これに強襲を敢行せり。
</blockquote>
            

これは、次のように表示される。なお、わかりやすいようにページ中央に表示するよう style="width:80%; margin: 0 auto;" を追加している

大本営発表。 昭和19年10月26日16時50分。

１．レイテ島の我が陸上部隊は10月20日以降、タクロバン南方、およびドラッグ付近に上陸せる約3個師団の敵を邀撃、奮戦中なり。
２．我が航空部隊は 10月19日以降、レイテ湾内の敵輸送船団、およびその護衛艦艇を連続攻撃中にして、我が艦隊また25日未明、同湾内に突入、これに強襲を敢行せり。

表

<table>
<caption>欧州の主要空港の比較（2007年旅客数）</caption>
<tbody><tr>
<th>空港名</th>
<th>国</th>
<th>年間旅客数</th>
<th>世界順位</th>
</tr>
<tr>
<th>ヒースロー空港</th>
<td>イギリス（ロンドン）</td><td>68,066,028人</td><td>3位</td>
</tr>
<tr>
<th>シャルル・ド・ゴール空港</th>
<td>フランス（パリ）</td><td>59,922,177人</td><td>6位</td>
</tr>
<tr>
...
                

欧州の主要空港の比較（2007年旅客数）

空港名	国	年間旅客数	世界順位
ヒースロー空港	イギリス（ロンドン）	68,066,028人	3位
シャルル・ド・ゴール空港	フランス（パリ）	59,922,177人	6位
フランクフルト空港	ドイツ（フランクフルト）	54,161,856人	8位
バラハス空港	スペイン（マドリード）	52,122,702人	10位
スキポール空港	オランダ（アムステルダム）	47,794,994人	12位
ガトウィック空港	イギリス（ロンドン）	35,218,374人	25位
ミュンヘン空港	ドイツ（ミュンヘン）	33,959,422人	28位

箇条書き

通常の箇条書き

<ul>
  <li>項目１
    <ul>
      <li>項目２－１</li>
      <li>項目２－２</li>
    </ul>
  </li>
  <li>項目３</li>
  <li>項目４</li>
</ul>
            

このように表示される

• 項目１
  • 項目２－１
  • 項目２－２
• 項目３
• 項目４

インデント代わりに利用する箇条書き

箇条書き番号が出ないようにしているため、文章上でインデント１段必要となった場合に使える

<ol>
  <li>インデント１段が付く
    <ol>
      <li>インデント２段が付く</li>
    </ol>
  </li>
  <li>インデント１段が付く</li>
  <li>インデント１段が付く</li>
</ol>
            

このように表示される

1. インデント１段が付く
   1. インデント２段が付く
2. インデント１段が付く

その他のタグ

水平線

普通の水平線は、 </p><div class="hl"></div> と記述する。

水平線（点線）は、 <div class="hl_dash"></div> と記述する。

ひとつ前のページに戻るリンク

 

<div class="link_right"><a href="./index.html"><img alt="戻る" src="/pics/btn_up.gif" height="25" width="25" />一つ前のメニューに戻る</a></div>
            

このように表示される

フォントの色など

W3Cに厳格に準拠させるため、fontタグは用いない。赤く着色する場合は、 <span style="color:red;">赤く着色</span> とする。　なお、太字や斜体は <b>太字</b> や <i>斜体</i> のように記述する。

ピクトグラム

ジュネーブ コルナヴァン駅 （12：55発） → リヨン パール・デュ駅 （15：25着）
TER22350列車 （運賃23ユーロ ＝ 2550円）
徒歩 ： スヴェティ・ネウム （7：30） → 国境 （8：15）

<div class="fig_left" style="margin:0px 3px 0px 0px;"><img src="/webpage/pics/pict-train.png" border="0" width="38" height="38" alt="Train" /></div>
ジュネーブ コルナヴァン駅 （12：55発） → リヨン パール・デュ駅 （15：25着）<br /><span style="color:grey;">TER22350列車 （運賃23ユーロ ＝ 2550円）</span><div class="clear"></div>
    
<div class="fig_left" style="margin:0px 3px 0px 0px;"><img src="/webpage/pics/pict-walk.png" border="0" width="38" height="38" alt="Walk" /></div>
<br style="line-height:0.5em;" />徒歩 ： スヴェティ・ネウム （7：30） → 国境 （8：15）<div class="clear"></div>
            

<img src="/webpage/pics/pict-air.png" border="0" width="38" height="38" alt="Airline" />
<img src="/webpage/pics/pict-ship.png" border="0" width="38" height="38" alt="Ship" />
<img src="/webpage/pics/pict-train.png" border="0" width="38" height="38" alt="Train" />
<img src="/webpage/pics/pict-metro.png" border="0" width="38" height="38" alt="Metro" />
<img src="/webpage/pics/pict-tram.png" border="0" width="38" height="38" alt="Tram" />
<img src="/webpage/pics/pict-bus.png" border="0" width="38" height="38" alt="Bus" />
<img src="/webpage/pics/pict-car.png" border="0" width="38" height="38" alt="Car" />
<img src="/webpage/pics/pict-walk.png" border="0" width="38" height="38" alt="Walk" />
<img src="/webpage/pics/pict-hotel.png" border="0" width="38" height="38" alt="Hotel" />
            

<img src="/webpage/pics/pict-travel.png" border="0" width="38" height="38" alt="Travel" />
<img src="/webpage/pics/pict-camera.png" border="0" width="38" height="38" alt="Photo" />
<img src="/webpage/pics/pict-mouse.png" border="0" width="38" height="38" alt="Software" />
<img src="/webpage/pics/pict-microphone.png" border="0" width="38" height="38" alt="Announce" />