私たちは、台東区浅草雷門でホームページ制作・運営代行とインバウンド対応/集客支援をしている会社です。
ホームぺージのリニューアルの提案でCSSと制作会社がよく言うのですが、CSSって何ですか?
CSSは Cascading Style Sheets の略で、HTMLのタグに紐づけることで、レイアウトやカラーなど視覚的な(デザイン)情報を指定することが出来る言語です。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
WEBサイト制作をしないWEB担当者の方でも、WEBサイトリニューアルの際にCSSの話になることがあります。その時のために、かんたんにCSSについて解説いたします。
CSSは Cascading Style Sheets の略で、文章構造(コンテンツ)とデザイン要素を分離させる為に提唱されました。文章構造(コンテンツ)とデザイン要素の分離と聞いても中々イメージ沸かない方のほうが多いかと思いますのでかんたんにご説明いたします。
タイトルタグや見出しタグ、リストタグなどがあり、ページ内に記述される文章にマークアップ(文章を意味付け)して文章を構造化します。どこが見出しで、どこが文章なのか?重要記述は何か?などをコンピューター(ブラウザなど)に伝え、表示に優劣を付けます。また、Google などの検索エンジンのクローラーにもページ内の構造を伝える重要な役割を持っています。SEO対策につきましては『SEO対策におけるHTML5』も合わせてご覧ください。
また、HTMLについてもう少し詳しくご覧になりたい方、またはHTMLをご存じない方は、はじめに『ホームページ制作に必須!15分でわかるHTML基礎』を是非ご覧ください。
WEBサイトは一般的にデザイン要素はスタイルシート(CSS)で定義・設定します。例えば文章構造(コンテンツ)で定義した見出しの表示デザインはブラウザ毎に異なります。デザイナーが意図したデザインに表示されるように見え方を統一化させ、場合によっては装飾を加えていきます。
また、コンテンツの要素が右なのか?左なのか?幅はどのくらいか?などレイアウト要素もスタイルシート(CSS)で設定します。背景に色を敷いたり、画像を表示させたりするのもスタイルシート(CSS)です。
このように、HTMLはコンテンツの意味付けをして、スタイルシート(CSS)はコンテンツの見え方を定義・設定する役割を持っています。
CSSを設定するためにはセレクタとプロパティを記述します。セレクタとはどの要素(HTMLタグ)に設定するかを記述し、プロパティにはどんな特性をタグに付与するかを設定します。プロパティには値があり、特性の詳細を設定することが出来ます。
例えばPタグ内のテキストを赤くしたい場合は、セレクタに「P」を指定して、プロパティにテキストの「色」についてを指定、プロパティーの値を「赤」にするとします。その記述方法は大まかに以下の3パターンです。
特定のHTMLタグに設定する場合
<p style="color:red">テキスト</p>
上記は、一番シンプルなスタイルシートの記述例です。直接要素(HTMLタグ)の中にスタイル属性を記述して、その中にプロパティーを記述します。
都度要素(HTMLタグ)内にスタイルシートを記述しなければならないので汎用性が低いですが、その部分のみに適用させたい場合にこの記述をします。また、直接要素(HTMLタグ)に記述されたスタイルシートは優先度が一番高く、優先してスタイルシートを書き換えたいとき(上書き)などに利用します。
HEADタグ内に記載
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
・・省略・・
<style type="text/css">
p{color:red}
</style>
</head>
<body>
・・省略・・
<p>テキスト</p>
・・省略・・
</body>
</html>
HTMLのHEADタグ内に記述することもあります。ページ内の全てのP要素に適用されるので、要素に都度スタイル属性を記述する必要が無いので汎用性があります。
外部スタイルシートファイルに記載
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
・・省略・・
<link rel="stylesheet" href="xxx.css(外部ファイルへのパス)">
・・省略・・
</head>
<body>
・・省略・・
</body>
</html>
【外部スタイルシートファイル(xxx.css)】
@charset "UTF-8";
p{color:red}
このように外部スタイルシートファイル(xxx.css)としてインクルードする場合もあります。
テキストの種類やカラー、大きさなどを設定することが出来ます。
見出しとテキストの文字サイズの関係や、意味合いごとのカラー設定でデザインにメリハリを付けます。
※フォント・テキスト系という言葉はこの文章の便宜上使っていますが、一般的には使われません。
背景色や背景画像とその位置や使い方を指定することが出来ます。
他にもいくつかのプロパティがありますが、これらを駆使してレイアウトの背景に画像を敷くことで、オリジナリティのあるデザインを実現することが出来ます。
※背景系という言葉はこの文章の便宜上使っていますが、一般的には使われません。
CSSとHTMLの関係をシンプルな例で解説いたします。
下記のHTMLコードをテキストエディターにコピーして、sample1.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。
sample1.html
<html>
<head>
<meta charset="utf-8">
<title>特定のHTMLタグに設定CSSのサンプルです。</title>
</head>
<body>
<p>テキスト</p>
<div style="color:red">テキスト</div>
</body>
</htme>
上記は、一番シンプルなスタイルシートの記述例です。直接要素(HTMLタグ)の中にスタイル属性を記述して、その中にプロパティーを記述します。
都度要素(HTMLタグ)内にスタイルシートを記述しなければならないので汎用性が低いですが、その部分のみに適用させたい場合にこの記述をします。また、直接要素(HTMLタグ)に記述されたスタイルシートは優先度が一番高く、優先してスタイルシートを書き換えたいとき(上書き)などに利用します。
下記のHTMLコードをテキストエディターにコピーして、sample2.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。
sample2.html
<html>
<head>
<meta charset="utf-8">
<title>HEADタグ内に設定CSSのサンプルです。</title>
<style type="text/css">
.sample {
color:red;
}
</style>
</head>
<body>
<p>テキスト</p>
<div class="sample">テキスト</div>
</body>
</htme>
HTMLファイルsample3.htmlとsample.cssを同じ階層(フォルダー)に作って、それぞれ下記のように記述してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。
sample3.html
<html>
<head>
<meta charset="utf-8">
<title>外部ファイルをインクルードCSSのサンプルです。</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p>テキスト</p>
<div class="sample">テキスト</div>
</body>
</htme>
外部CSS sample.css
.sample {
color:red;
}
それぞれのHTMLファイルをブラウザにドラッグ&ドロップすると、赤いテキスト文字が表示されます。これがCSSの視覚効果です。
ホームページのデザインを作るCSSとその効果いかがでしたか?ドキュメント内で文章構造(HTML)とデザイン要素(CSS)が分離されていることを一番シンプルな形でご紹介しました。このように役割を切り離すことで汎用性のあるHTML/CSSのデータ活用が出来ます。また、HTML内には文章構造のみが残るので、検索エンジンに対してもより正しい情報を提供することが出来ます。
ケイツー・インタラクティブでは企業様のホームぺージリニューアルを承っています。ご不明な点やご要望などございましたらお気軽にお問い合わせください。
※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
javascriptはコンピューターやスマートフォンから、最新モデルの自動車に至るまでいたるところで使われています。私たちが快適にウェブ検索をしたりIT機器に囲まれた生活を送る上で非常に役立っています。
jQuery(ジェイクエリー)は、javascriptをより効率的に構築するために開発されたjavascriptのライブラリです。2018年1月現在ではjavascriptのライブラリで最も使われているスタンダードなライブラリです。ライブラリとは汎用性のあるスクリプト(プログラム)を集めた素材集のようなものをイメージしていただければ大凡正解です。
フロントエンジニアが使う主な技術はHTMLとCSS、そしてjavascriptです。会社によってはサーバーサイドのNODE.jsやPHP、そしてSQLなど深いレイヤー部分(よりサーバーに近い場面での仕事)も求められることがあります。フロントエンジニアは広範囲に及ぶ専門スキルが必要なため、人により得意分野が違います。
WEBサイトTOPの背景に大きな動画を埋め込むことで、ユーザーの目を引きサービスのアピールや雰囲気を伝えて不ランディングをするケースがあります。動画はより多くの情報を伝えるのに適していますが、全てがいいことばかりでもありません。このページではメリットデメリットを踏まえてどのように動画を扱えばいいか紹介します。
ホームページでは扱う写真のクオリティの差がそのままホームページのデザインの差になるケースが増えてきました。これは通信速度の向上が大きな要因としてあげられます。ホームページの目的は何か?ポイントを押さえて容量の大きい『キメの写真』と、容量の小さな『添える写真』、情報として『伝える写真』を使い分けて、相対的にクオリティーの高いホームページを作っていくことを目指しましょう。
WEB担当者が知っておきたい!制作技術の豆知識 [質問箱 (FAQ)]では、WEB担当者のみなさまの悩みに、一問一答形式でお答えしています!!