スタイルシートを学ぼう

スタイルシート(css)というのは、ホームページのレイアウトやデザインなど視覚的な要素を定義する規格。

ホームページ作成ソフトなどでページを作成する際に、直接文字の大きさを変えたり、表の一部の背景の色を変えたりとかhtmlを直接編集している人はcssを理解しておきましょう。

文字の色や大きさ、行間など視覚的な装飾を外部ファイルに内容を記述し、ページを構成するという方法です。

html文書内に、スタイルシートを読み込みますよという記述があります。
ワードプレスで言うと(最初からあるもの)、ヘッダー部分の

<style type=”text/css” media=”screen”>
  @import url( <?php bloginfo(‘stylesheet_url’); ?> );
 </style>

という記載がそれです。

実際のにアップされているページのソースを見ると、

<div id=”menu”>であるとか<div id=”side”>とかたくさんあります。この<div>  ~ </div>のなかの、文字の大きさは12pxですよとか、色は濃いグレーですよなどとcssに記述し触るわけですね。

一方スタイルシートには、

.menu {
 color: #666666;
 width: 800px;
 padding: 40px 10px 15px ;
 clear: both;
}
などと記載し、必要なものを追加したり数値を変更しながらレイアウトを考えていくわけです。

最初はわけが分かりませんが、やっていくうちになんとなく分かってきますのでチャレンジしましょう。

ひとつひとつの用語については、サイトなどで用語集サイトも多く解説されていますので参考にしながら進んでいけます。ワードプレスを上手につかうならcssは必須です。

master の紹介

サイト作成で、ワードプレスというものを知り、phpやcssの初心者なりに自己流にカスタマイズしていこうと思っています。 ワードプレスの機能やプラグインを使えば結構楽しくサイトが作れます。
カテゴリー: 初心者のワードプレス   タグ: ,   この投稿のパーマリンク

コメントは受け付けていません。