概要
CSSの基本
CSS用Lighthouse HTML「フック」
概要
カスタムCSS（Cascading Style Sheets）は、アンケートの外観を変更するのにLighthouse Studio全体で使用することができます。 たとえば、新しい質問を作成し、ヘッダー1のペイントブラシアイコンをクリックすると、フォントサイズが指定されていません。 質問レベルでフォントサイズが指定されていない場合、より高いレベルで指定されたフォントサイズが使用されます。 CSS は優先順位のカスケードレベルを備えています。 フォントサイズは、アンケート内のすべてのテキストまたは特定の質問に対して指定することができます。 特定の質問に対して定義されたフォントサイズは、調査レベルで定義されたフォントサイズより優先されます。
Lighthouse Studioには、アンケートスタイルを制御するCSSが組み込まれています。 以下の図は、Lighthouse StudioでCSSがどのように使用され、スタイルの優先順位の異なるレベルを示すのに役立ちます。 質問レベルで定義されたスタイルは、アンケートスタイルで定義されたスタイルより優先されます。 アンケートスタイルで定義されたスタイルは、ベーススタイルシート ssi_style.css.
CSS Basics
CSS は Cascading Style Sheets の略称です。 CSSを使うと、WebページのHTMLのスタイル（背景色、フォントスタイル、スペーシングなど）を変更することができます。 CSSは、Webページの構造からスタイルを分離することができます。
CSSは、HTML要素内で定義することができます。 例えば:
<p style=”color: green;”>
以下の質問に答えてください。
</p>
CSS “color: green;” は <p> タグ内のテキスト色を緑に変更するものである。 このスタイルは、<p>タグから分離することができます。 以下の指示：
<style type=”text/css”>
p
{
color: green;
}
</style>
<p>
以下の質問に答えてください。
</p>
ページ内の<p>タグ内のテキストをすべて緑に変更する
複数のWebページがあり、すべてのページの<p>タグ内のテキストを緑にしたい場合を想定してください。 この場合、「mystyle.Mystyle」という名前のテキストファイルを別に作成します。
p
{
color: green;
}
各 Web ページの先頭の <head> タグ内に、次の CSS を記述します：
<link rel=”stylesheet” type=”text/css” href=”mystyle.csscss”>
これは、1 つのファイルからすべての Web ページのスタイルを制御します。 色を緑から青に変更するには、単に mystyle.css を編集するだけです。 この方法で CSS を使用すると、各個別ページでスタイルを定義するよりも、Web ページ全体のスタイルを簡単に変更することができます。 外部ファイルで定義されたスタイルは、Webページ上の<style>タグ内で定義されたスタイルよりも優先度が低くなります。 HTML 内の “style” 属性で定義されたスタイルは、<style> タグ内で定義されたスタイルよりも優先度が高くなります。
CSS は、HTML の外観を変更する方法を定義するさまざまなスタイルの「ルール」から構成されています。
p
{
color: green;
}
セレクタは、宣言によって影響を受ける HTML の部分を識別します。 宣言はコロンで区切られたプロパティと値で構成されています。 複数の宣言はセミコロンで区切られます。 例：
p
{
color: green;
font-size: 18px;
padding.P
font-size: 18px;
font-size: 18px 10px;
}
セレクタには、任意の HTML 要素の名前を指定できます。 例：p、div、span、table、tr、td、など。 複数の要素をカンマで区切ってルールに追加することができます。 例：
div, p, td
{
color: green;
}
上記の CSS は <div>, <p>, <td> タグ内のテキストが緑に変更されています。 また、<div>タグ内の<p>タグのみを選択するように指定することもできます。
div p
{
color: green; /*Turn the text green*/
}
divとpを区切るスペースに注意してください。 これは、<div>タグの中の<p>タグのみが影響を受けることを示しています。 また、”Turn the text green “というコメントにも注目してほしい。 CSSのコメントは、/*と*/の間に含まれます。 5708>
クラス セレクタは、特定の HTML 要素を識別するための方法です。 次のような HTML があるとします。
<div class=”header1″>
あなたは何歳ですか
</div>
上の <div> には “class” という属性があって、値は “header1″ になっています。 CSSでクラスを識別するには、名前の前に”. “を付けます。 例えば
.header1
{
color: green;
}
上のCSSはheader1というクラスのタグ内のテキストを緑にするものである。 Lighthouse Studioではクラスセレクタを多用しています。 クラスはWebページ上の1つまたは複数の要素を識別するために設計されています。 id」で識別されるユニークな要素がある場合、「.」の代わりに「#」記号が使用されます。 例：
<div>
あなたは何歳ですか？
</div>
この<div>を選択するには、次のCSSを使用できます：
#Q1_div
{
color.Color.Color.Color.Color.Color.D.Color.Color.Color.Color.Color.Color.D.Color.Color.Color.D.Color.C.Color: green;
}
Lighthouse Studioは作成するHTMLに多くのクラスとIDを含み、ページの特定の領域を識別しやすくしています。
CSSの詳細については、http://www.w3schools.com/cssを参照してください。
Lighthouse HTML “Hooks” for CSS
Lighthouse Studioは、さまざまな質問タイプやソフトウェアで構成した設定に基づいて、アンケートのHTMLを生成します。 HTMLには、多くのタグに「class」属性と「id」属性が含まれています。 たとえば、ヘッダー1のHTMLは次のようになります。
<div class=”header1″> Header 1 Text </div>
上記の<div>タグの “class” 属性がヘッダー1を識別しています。 次の CSS を使用して、アンケート全体を通してヘッダー 1 のテキストの色を変更することができます。header1
{
color: green;
}
下の図は Lighthouse の HTML に存在する主要クラスのいくつかを示しています。 これは、Webブラウザの「ソースの表示」を使用して行うことができます。
Lighthouse Studioの一部のHTML要素には、複数のクラスとidが含まれています。 CSSでアンケートの表示やスタイルを操作できるようにするために、さまざまな方法が提供されています。 Q1」という名前の選択式質問のHTMLは次のようになります。
<div class=”question select”>
…
</div>
この<div>タグに「質問」と「選択」クラスが割り当てられたことに注意してください。
以下のCSSは、Q1のHeader 1のスタイルを変更します。
#Q1_div .header1
{
color: blue;
}
上の#記号は「Q1_div」というIDのHTMLタグを特定します。 Q1_div」の後にスペースが入り、「.header1」という記号が続きます。 このCSSルールは、質問Q1内のヘッダー1のテキストを青に変更します。 以下は、すべての質問の周りに黒いボーダーを描画します: