CSS基礎講座の最近のブログ記事

ソースコードを記事の中で表示するためには、<pre>, <code>タグを組み合わせが一般的に使われています。

ここではSoh Tanakaで示されているデザインを参考に<pre> <code>を使ったソースコードの表示方法をご紹介します。

<pre> <code>のCSS定義例

pre {
    font-size: 12px;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    border: 1px solid #ccc;
    line-height: 20px; /*--Height of each line of code--*/
    background: url(pre_code_bk.png) repeat-y left top; /*--Background --*/
    width: 600px;
    overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
    overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

pre code {
    margin: 0;  /*--Left Margin--*/
    padding-left: 5px;
    display: block;
}

<pre> <code>を使ったソースコードの表示例

<mt:If name="datebased_archive">
     <mt:Ignore><!-- Title for category-monthly entry listings --></mt:Ignore>
     <h1 id="page-title" class="archive-title"><$mt:CategoryDescription$>アーカイブ</h1>
<mt:Else>
     <mt:Ignore><!-- Title for category entry listings --></mt:Ignore>
     <h1 id="page-title" class="archive-title"><em><$mt:CategoryDescription$></em>の最近のブログ記事</h1>
</mt:If>

フォントの種類は自分が見てほしいと思っているフォントで、サイトを見てほしい場合に指定します。

指定しない場合は、ブラウザののデフォルトのフォントで表示されますが、それだとブラウザによって閲覧イメージがかなり変わってしまう場合があります。、時には、サイトの表示がくずれてしまったり、サイト作成者が意図していようなトラブルが起こることがあります。

そのため、font-familyは指定しておくのが、オススメです。

font-familyは以下の５つのグループがあります。

[フォントの一般分類名]

Webサイトを印刷する際には、画面表示とは変えたい場合があります。

[(例)印刷時に改善したいこと]

1. 中央のメインカラムだけを印刷させたい
2. 印刷のときに、白黒でもわかるような配色に変えたい
3. カラ―インクを大量消費しないように配色を工夫したい

等々、印刷の際には印刷媒体にあったレイアウトを工夫する場合があります。

このような場合、media属性を指定することにより、印刷用のスタイルシート(CSS)を指定することはできます。

[印刷用のスタイルシートの指定]

<link rel="stylesheet" href="styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

media=”all” : すべての出力媒体(画面、印刷、等）に適用される
media=”print” : 印刷時だけに適用される

今回は、３カラムのMTサイトで中央カラムのみを印刷させたい場合の設定例を示します。

CSSでは、各要素を「ボックス」と呼ばれる四角形領域の概念に適用されます。

ボックスは内側から順に、内容領域、Padding、border、marginと呼ばれる部分によって構成されます。

[ボックスの概念]
内側から順に、内容領域、padding、border、marginと呼ばれる部分によって構成されます。

実際のソースコードで、その動作を検証してみます。