サイズなど)を指定するための言語です。ここでは、色の指定、フォントの指定、テキスト表示の指定、ボーダー(線)の指定、マージンの指定、パディングの指定、幅と高さの指定などを学びます。参考でスタイル一覧を掲載しておりますので、ご覧ください。基本形HTMLドキュメントの基本形です。html>このドキュメントの始まりです。HTMLの定義(<html>~</html>)をします。その中にヘッダー部(<head>~</head>)とボディ部(<body>~</body>を書きます。表示する内容はボディ部の中に記述します。上記のソースコードはそのままの記述します。)下記に、そのソースを示します。実行ボタンを押すと、その内容が表示されます。スタイルの指定HTML要素ごとに表示するスタイル(見栄え)を指定します。style="スタイル1;~スタイルn;">~</要素>で書きます。複数スタイルを指定する場合は;(セミコロン)で区切ります。それぞれの要素に指定します。色の指定color:文字色(前景色)を指定します。background-color:背景色を指定します。値は、「色名」で、「#」16進数指定、「rgb(R値,G値,B値」で値は10進数で指定します。詳細の指定は、こちらを参照してください。練習問題1前景色を青色に変更しましょう。背景色を水色に変更しましょう。背景色を青色に、前景色を黄色に変更しましょう。フォントの指定font-styleの設定は、normal:通常のフォント、italic:イタリック体フォントです。font-weightの設定は、normal:通常の太さ、bold:太字。単位付き数値で指定します。パーセントで指定します。font-familyは、フォント名を指定します。フォントの種類を表すキーワードで指定します。fantasy:装飾系、monospace:等幅系)詳細はFontの設定で確認してください。練習問題2フォントのスタイルを、通常フォントに変更しましょう。フォントサイズを30pxに変更しましょう。フォントファミリを、ゴシック系(sans-serif)や明朝系(serif)に変更しましょう。テキスト表示の指定text-alignの指定は、left:表示領域の左端に寄せます。right:表示領域の右端に寄せます。center:表示領域の中央に寄せます。line-heightの指定は、auto:高さを自動計算します。フォントサイズの倍数で指定します。長さの単位で指定します。パーセントで指定します。練習問題3左表示に変更しましょう。フォントサイズと同じ高さに変更しましょう。ボーダー(線)の設定border-colorは線の色を指定します。指定はstep3のcolor設定と同じです。border-styleは、none:線を表示せずに線幅は0になります。dotted:点線で表示します。dashed:破線で表示します。solid:実線で表示します。double:二重線で表示します。border-width:線の太さを指定します。左のcolor/style/width値を指定します。4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。練習問題4線の幅を5pxに変更しましょうましょう。線の色を青に変更しましょう。線のスタイルを点線にしましょう。線を右側に引きましょう。周りのコンテンツとの間の隙間を指定します。長さの単位で指定します。要素の大きさに対するパーセントで指定します。margin-top/bottom/left/rightは、マージンの上/下/左/右を指定します。4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。練習問題5上下左右のマージンを30pxに変更しましょう。左右のマージンを50pxに変更しましょう。内部のコンテンツとの間の隙間を指定します。長さの単位で指定します。要素の大きさに対するパーセントで指定します。padding-top/bottom/left/rightは、パディングの上/下/左/右を指定します。4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。練習問題6上下左右のパディングを30pxに変更しましょう。上下のパディングを50pxに変更しましょう。内部のコンテンツとの間の隙間を指定します。width:要素の幅を、height:要素の高さを指定します。要素の大きさに対するパーセントで指定します。ようなパーセントで指定します。練習問題7幅100px、高さ100pxに変更してみよう。高さ100pxに変更してみよう。スタイルをまとめて指定する。こてまでは、各要素毎にスタイルを指定しましたが、まとめてスタイルシートとして定義します。}の組み合わせで書きます。セレクタの使い方は下記の通りです。}は、要素1に対して指定指定します。}は、要素1と要素2に対して指定します。}は、<要素1>~</要素1>の中にある要素2に対して指定します。}は、class="名前"を持つ要素に対して指定します。}は、id="名前"を持つ要素に対して指定します。}は、class="名前"を持つ要素1に対して指定します。演習問題8#name2のスタイルをすべての要素に適用しましょう。すべて要素の文字サイズを14pt、前景色を赤、背景色を黄色に統一しましょう。まとめ(総合練習)今までの学習内容を参考にして、下記の内容を作成しましょう。作成したソースは、下記のテキストボックスに張り付けて実行しましょう。HEADERCENTERあなたは、HTML、CSSの基礎知識を習得しました。JavaScriptのプログラミング技術を習得してください。総合演習問題の解答はここのテキストにあります。上のテキストボックスに貼り付けて実行してください。JavaScript(レベルアップ編)の学習|サイトマップ|ホーム。