Perl入門ゼミPerl入門ゼミテキスト処理、Linuxサーバー管理、Web開発ならPerl質問フォームPerl›MojoliciousWebアプリケーション作成のためのCSSの基礎PerlでWebアプリケーションを作成するための前提知識としてCSSの基本を解説します。これだけ知っていれば、CSSを自由に記述することができる程度のものを目指しました。CSS(カスケーディングスタイルシート)とはCSSはHTMLのデザインを行うためのものです。CSSを利用すると文字の色や背景の色を変えたりすることができます。各要素の配置を指定することができます。HTMLでもある程度のデザインを行うことができますが、HTMLで文書の意味を、CSSでデザインを行うというのが主流です。style属性を使ったCSSの記述CSSをタグに適用する一番簡単な方法は、style属性を使用することです。solid;">段落</p>上記のように記述すると以下のように表示されます。フォントの色が赤くなったり、背景が青になったり、緑の枠線がついているのが確認できます。[f:id:perlcodesample:20110526135651p:image]CSSは「color:red」のように「プロパティ:値」という組み合わせで記述します。プロパティ:値セミコロン「;」で区切って複数の「プロパティ:値」を記述することができます。styleタグを利用したCSSの記述styleタグを利用するとHTMLのタグとスタイルを分離させることができます。上記のスタイルシートを、styleタグを利用して書き換えてみます。solid;}/*]]>*/</style><h1>見出し1</h1><div>ブロック要素</div><p>段落</p>タグの中のstyle属性はなくなって、styleタグの中にスタイルシートを記述しています。}のh1やdivはセレクタと呼ばれます。プロパティ1:値2;}セレクタはどの要素にCSSを適用するかを指定するものです。h1を指定した場合は、すべてのh1にCSSが適用されます。外部に定義されたCSSを読み込むCSSは外部ファイルにしておいて読み込むこともできます。記述方法はstyleタグを使用した方法と同じです。外部ファイルとしてCSSを準備します。comonn.cssという名前にして、ドキュメントルートに配置してください。solid;}HTMLは以下のようになります。linkタグを利用して外部で定義したCSSを読み込んでいます。たくさんのページでCSSを共有したい場合は外部ファイルで定義するのがよいでしょう。ページの個別のCSSについてはstyleタグを用いるのがよいでしょう。コメントCSSでコメントを記述するには、コメントにしたい部分を「/*」と「*/」で囲みます。*/文字の装飾に関するプロパティここからは、よく使用されるプロパティについて分野別に紹介していきます。style="color:#FF0000;">赤</div>文字色を指定するにはcolorを使用します。色の指定には、カラーネームか、カラーコードを利用します。カラーコードは16進数で指定します。最初の2桁が「赤」の度合い、次の2桁が「緑」の度合い、最後の2桁が「青」の度合いです。各色の光の合成が行われ「#FFFFFF」が白に、「#000000」は黒になります。style="font-size:50%;">50%</div>文字の大きさを指定するにはfont-sizeを使用します。サイズの指定方法にはさまざまなものがありますが、親要素からの相対サイズで指定する「%」で指定する方法が多く利用されているようです。bold;">太字</div>文字を太くするにはfont-weightに「bold」を指定します。line-through;">打消し線</div>アンダーラインをつけるにはtext-decorationに「underline」を指定します。アンダーラインを取り除きたい場合には「none」を指定します。「line-through」を指定すると打ち消し線をつけることができます。right;">右寄せ</div>文字の位置を指定するにはtext-alignを使用します。「left」で左寄せ、「center」で中央寄せ、「right」で右寄せになります。このプロパティはブロック要素に対してしか効果を持たないということをに注意しましょう。インライン要素に対しては効果がありません。spanはインライン要素ですので、下記のような記述は効果がありません。150%;">行の高さはline-heightで指定します。行の高さをある程度あけると、文章が読みやすくなる効果があります。見やすい行の高さを設定しましょう。これくらい長い文章を書くと2行にわたるはず。</div>行の高さを指定するにはline-heightを使用します。値の指定方法にはいくつかの方法がありますが、「%」を使う記述が多く利用されているようです。「%」は文字の高さに対して、行の高さをどれくらいにするかということを指定します。「150%」を指定すると、文字の高さを100とするとその半分の「50」文の行間になるということです。行間を適切に指定すると文章が読みやすくなる効果があります。0.1em;">読みやすい文字間隔</div>文字間隔を指定するにはletter-spacingを使用します。値の指定方法はいくつかの方法がありますが、1文字を基準とした「em」が多く利用されているようです。文字間隔をわずかに広くすると文章が読みやすくなる効果があるようです。#DDDDFF;">背景色(とても薄い青色)</div>背景色を指定するにはbackground-colorを使用します。薄い色の背景色はデザインするときによく利用されるようです。url('/image/sky.png');">背景画像</div>背景画像を指定するにはbackground-imageを使用します。画像のURLを指定します。URLはドキュメントルートからの絶対パスで指定するのがよいと思われます。背景画像はデフォルトで縦と横に繰り返して表示されます。style="background-repeat:no-repeat;">繰り返しなし</div>背景画像はデフォルトで繰り返されますが、background-repeatに「no-repeat」を指定すると繰り返しが解除できます。blue;">1pxの青の点線の枠線</div>枠線を指定するにはborderを使用します。「線の太さ」「線の種類」「線の色」の組み合わせを空白で区切って指定します。線の種類には以下のような種類があります。dottedまた「border-top」「border-left」「border-right」「border-bottom」というプロパティを利用すると特定の位置の枠線だけを指定することもできます。高さ(100px)</div>ブロック要素の幅と高さを指定するにはwidthとheightを使用します。インライン要素にwidth,heightを指定しても効果がないので注意してください。親要素の幅を基準にして、割合で指定することもできます。style="background-color:#FF6666;">下側の要素</div></div>マージンを指定するにはmarginを使用します。マージンとは要素間の間隔のことです。マージンは空白で区切って指定します。右」の指定になります。左右」の指定になります。値をひとつだけ指定した場合は「上下左右」で同じ値になります。例ではマージンの意味がわかりやすいように、背景色をつけています。ひとつの注意として、要素が垂直方向に接し合う場合にはマージンの値は加算されるのではないということに注意してください。その場合は大きいほうの値が選択されます。Aという要素の下側のマージンが20pxでBという要素の上側のマージンが50pxであった場合は、AとBの間の上下のマージンは加算し70pxになるのではなく、大きいほうの値の50pxになります。マージンは上下左右をそれぞれ個別に指定することもできます。style="background-color:#FF6666;">下側の要素</div></div>またもうひとつの注意としてインライン要素に上下のマージンを指定しても無視されるということを覚えておきましょう。以下のような指定については、左右は20pxのマージンがありますが、上下にはマージンが設定されません。style="padding:20px;background-color:#FFCCCC;">「上左下右」のパディングをまとめて指定</div>パディングを指定するにはpaddingを使用します。パディングとは内側の要素との間隔のことです。パディングは空白で区切って指定します。右」の指定になります。左右」の指定になります。値をひとつだけ指定した場合は「上下左右」で同じ値になります。パディングは上下左右をそれぞれ個別に指定することもできます。style="height:100px;width:100px;overflow:auto;">はみ出る部分をスクロールさせる。はみ出る部分をスクロールさせる。はみ出る部分をスクロールさせる。はみ出る部分をスクロールさせる。</div>はみ出る部分を縦にスクロールさせたい場合は、overflowに「auto」を指定します。style="display:inline">h1をインライン要素に変更</h1>あああ要素の表示方法を変更するにはdisplayを使用します。「block」を指定するとブロック要素に、「inline」を指定するとインライン要素になります。<li>白丸</li></ul>ulで作成したリストやolで作成したリストには数字や黒丸が先頭につきますが、これを変更することができます。noneを指定した場合は、左側に余白ができるのが気になる場合は、左側のマージンとパディングを0pxに指定すれば、余白をなくすことができます。<li>何もつけない</li></ul>CSSセレクタここまでで、デザインに関するプロパティを説明してきましたが、今度はどの要素に対してCSSを設定するかということを細かく指定するためのCSSセレクタについて学びましょう。CSSをstyleタグの中や、外部に記述する場合は以下のように記述しました。h1やdivやpの部分がセレクタです。solid;}このように定義を行うとすべてのh1、div、pに対してCSSが適用されます。識別子を使うとある特定の要素にだけCSSを適用することができます。id="discription">識別子による指定</div>識別子を利用するには、HTMLの側の要素にidを指定しておく必要があります。CSSの側では「#識別子」という指定を行います。}クラスによる指定クラスを使うと特定のグループに対してのみCSSを適用することができます。class="pretty">クラスによる指定</div>クラスを利用するには、HTMLの側の要素にclassを指定しておく必要があります。CSSの側では「.識別子」という指定を行います。}タグ名とクラスの組み合わせタグ名とクラスを組み合わせて利用することもできます。class="pretty">こちらには適用されない</div>タグ名とクラス名を組み合わせて利用するには「タグ名.クラス」という指定を行います。入れ子になった要素に対してCSSを適用することもできます。class="pretty">こちらには適用されない</p></div>上記の指定は、idが「description」であるタグの内側に存在し、クラスが「pretty」であるpタグに適用という意味になります。入れ子になった構造に対してCSSを適用するにはセレクタを空白で区切って適用します。業務に役立つPerlログ解析など日本語を含むテキスト処理の実践!案内YouTubeでもっと簡単にプログラミングを学ぶならPerlゼミちゃんねるLinuxコマンドを学ぶならLinuxサーバー管理入門Webデザインを学ぶならWebデザイン入門Web開発を始めるななMojoliciousスタートアップブログを作るならGiblogプログラミングの勉強会ならPerl入学式お問合せはこちらPerlは、テキスト処理の記述性とパフォーマンスに優れ、正規表現が言語に組み込まれているプログラミング言語です。Linuxサーバー管理でのフィルタリングプログラム、複数行の文字列を処理、ファイル内容の検索・置換などが得意。Mojoliciousを使ったWebスタートアップも。Perlは、gitやopensslなどUnix/Linuxミドルウェアの支援ツールとして採用されています。このサイトはGiblogで製作されています。