開発担当者コラム
2015.12.15
CSSの記述方法

こんにちは。

新人といいながらもうだいぶ日数も経ってきました。

 

前回HTMLについて投げ出し勉強したのですが、今回はシーエスエス、と言われました。

 

CSS????

 

ググってみましょう。

CSS(シー・エス・エス)は、ブラジルのディスコ・パンク・バンド。サンパウロ出身。2000年代後半に発祥したニューレイヴのバンドに分類される。歌は英語とポルトガル語で歌われている。

バンド名は、Cansei de Ser Sexy(カンセイ・ジ・セール・セクシー)の略であり、ビヨンセの発言「Got Tired of Being Sexy(セクシーで居ることに飽きた)」をブラジルポルトガル語に訳したもの[1]。※wikipedia

 

HTMLを勉強したあとは、サービスのグルーブ感を養うために、ディスコパンクの勉強をするようです。

ポルトガル語というのがまたいいですね。

 

 

 

 

 

 

 

 

CSSとは

 

HTMLと一緒に覚えた方がよい、ホームページ作成に必要になる記述方法。

HTML同様、現在は簡易にサイト作成ができるツールもあることから、サイト運営上は必ずしも必要な知識とは言えなくなってきているかもしれないが、

基礎知識として理解した方が良い。

 

HTMLはサイトの情報を構造的に記述するものなのに対してCSSは見た目の領域をカバーします。

記述はHTMLと同じように、テキストエディタでおこなうことができます。

 

書く場所主に下記3通りの方法があります。

  1.  headタグ内にstyleタグを記述
  2. 要素に対してstyle属性を記述する
  3. 外部ファイルに記述する

 

headタグ内にstyleタグを記述する

これはtitleタグやmetaタグなどが記載されているheadタグ部分、

<head>

ここ!

</head>

にスタイルシートを書いていく方法です。

 

下記のようなscriptタグを使用して、この間に書いていきます。

<head>

<script>

        ここ!

</script>

</head>

 

 

例えば、、、、

 

<head>

<script>

p{ color: red; }

</script>

</head>

 

こんな感じにすると・・

<p>pタグで囲われているテキストが赤文字になります</p>

 

タグはこのようなサイトでまとめられていたり、タグ参照をするための書籍が多く出版されています。

 

headに書くのは、

楽天サイトなどサイト制作に制限がある状況で見受けられたり、

シンプルなWEBアプリケーションに良く見受けられますでしょうか。

 

 

要素にstyle属性を記述する

 

先ほどのheadタグ内に記述するのとは違い、

タグの要素内にstyle属性を記述することができます。

<p>

通常の文章はこのようにpタグで囲われています。

</p>

 

これに ごにょごにょしますと

 

<p style=”color: red;”>

ここで囲われているテキストは赤文字になるんです。

</p>

 

 

外部ファイルに記述する

スタイルシートに関わる部分をページ内には記述せずに、

CSS用のファイルを作成する方法です。

 

人によって好みも別れるかと思いますが、

ページ毎のソースコードがシンプルになりますので、

おすすめの方法です。

 

外部ファイルを作成 と言われると 理解できているかもしれないけど、どうしたらいいんだろう?と思う人もいるでしょう。

外部ファイルというからには一個、ファイルを作ります。

 

1 CSS用のテキストファイルを作成してサーバーにアップ

ここでは「stylesheet.css」としましょう。このファイル名でファイルを作成してください。

ここに先ほど出てきた

 

p{ color: red; }

 

を記述して保存。サーバーにアップしましょう。

 

2  HTMLのページに「このスタイルシートを適応します」というタグを記述する。

 

ただ外部ファイルを作っただけでは、スタイルシートの内容は反映されません。

HTMLで作成したファイルのhead部分に、スタイルシートはここの記述内容を使います、というタグを書きこむ必要があります。

<link rel=“stylesheet” href=“stylesheet.css”>

 

なんとなく、stylesheet.css というファイルに書かれている内容をstylesheetとして紐付けますよ

という文字として読めますでしょうか。。。

 

僕は最初無理でした。

 

 

少し長くなりそうでしたので、

stylesheetのおおまかな記述方法についてで今回は以上にしましょう!

 

 

オルグロー 公式 オルグロー 企業理念 オルグロー 社長挨拶 オルグロー 会社情報