初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

スタイルシートとは?

(更新日 08/11/20)

 スタイルシートとはページのデザインやレイアウトを専門に行う言語で、正確にはカスケーディング・スタイルシート、略してCSSと呼ばれています。alphaEDITはCSSでボックスを並べていくレイアウトには向きませんが(WYSIWYG編集で崩れるため)、ページ全体の文字サイズやリンクの装飾、背景画像の並べ方の指定などは簡単に設定する事ができます。CSSには直接HTML内に記述するもの、<head>〜</head>内に挿入するもの、外部ファイルに記述して呼び出すものの3つがあります。

alphaEDIでスタイルシートを使うには?

property-1.png(1059 byte)

 ページ全体のデザインの制御を行うには「ページのプロパティー」ボタンから行います。この機能に関してはページのプロパティ設定で説明しましたが、CSSを挿入する前にメタ設定で「基準スタイルシート言語」を追加しておきましょう。以下の記述が<head>〜</head>内に挿入されますが、これはウェブブラウザに「このページはスタイルシートを使っていますよ」と伝える記述になります。

 <meta http-equiv="Content-Style-Type" content="text/css">

 ただ実際の所はこのメタタグがなくても、全く影響ありません(^^; 形式上、記述してあった方がいいという程度のものです。

css-1.png(9458 byte)

 さて、ここからは実際にスタイルシートを設定していきます。「プロパティ」から「スタイル設定」を開きます。おおまかに分けるとリンクとボディのスタイルを指定する事ができ、ページ全体のリンクの下線を消したい場合などは、リンク(a:link)、アクティブリンク(a:active)、訪問済みリンク(a:visited)のフォントで、「装飾なし」にチェックを入れておきます。逆に下線を点線に変えたり背景色を指定する事も可能です。

 ボディではフォントのサイズを数値で指定する事でページ全体のフォントサイズを固定する事ができます。通常ブラウザでは閲覧者がフォントサイズを自由に変更できるようになっていますが、ここで固定すると現在のIEでは変更する事ができなくなります。他に背景では背景画像の固定や繰り返し方法の指定、余白では0px指定する事でブラウザが自動で取る上と左側の余白を消す事もできます。これらの指定は<head>〜</head>内に挿入されるのでHTMLソースを開いて確認してみて下さい。

直接スタイルを指定する

css-3.png(9669 byte)

 さて一番上でも書きましたが、CSSはHTMLソース内に直接記入する事もできます。alphaEDITでページ内にある特定の段落やテーブルにスタイルシートを指定する方法は、WYSIWYGでタグマークを表示する設定にしていれば、タグマークをクリックしておき、右クリックから「スタイルシート」を選択します。設定したスタイルシートは指定した要素でのみ反映されます。

 更に細かくスタイルを指定するには、<span></span>を使う方法があり、<span></span>で囲まれた範囲にスタイルシートを適用させる事ができます。alphaEDITではメニューバーの「挿入」→「その他」→「SPAN」か、ツールバーの「SPAN」ボタンでページに挿入する事ができ、上と同じやり方でスタイルを設定します。これにより特定の文章のみを大きくしたり色を付ける事が可能です。

(例) <12px> <20px> <30px

広告
t-2.png(196 byte)