勉強部屋‎ > ‎HTML5‎ > ‎

CSS

演習2-1

演習1で作成したHTMLの次のようなスタイルシートを作成せよ.
  • 文字のフォントを指定せよ.例: font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "MS Pゴシック", Verdana, Geneva, Arial, Helvetica, sans-serif;
  • 文字の色を指定せよ.例:#556b2f
  • ヘッダーの背景色を指定せよ(例:#334d55).文字色を指定せよ(例:#fff).マージンとパディングを上下左右10pxとせよ.文字列を右寄せにせよ.
  • フッターの背景色を指定せよ(例:#c0ddc0).文字色を指定せよ(例: #334d55).マージンを上下左右10pxとせよ.文字列をセンタリングせよ.
  • 本文(ヘッダとフッタの間)のマージンを10pxとせよ.
  • 見出しの色を指定せよ(例: #334d55).

演習2-1 解答例


演習2-1 ソース

HTMLファイル
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>セミナー演習2(1)</title>
  6.     <link rel="stylesheet" href="02-css1.css" type="text/css" />
  7. </head>
  8. <body>
  9. <header>田中(哲)セミナー 定員8名 情報工学セミナーⅠ&amp;Ⅱ</header>
  10. <div id="wrap">
  11. 省略(演習1と同じ内容)
  12. </div>
  13. <footer>このコンテンツの<a href="../images/seminar.pdf">PDFファイル</a></footer>
  14. <body>
  15. </html>
CSSファイル
  1. @charset "utf-8";

  2. body {
  3. font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "MS Pゴシック", Verdana, Geneva, Arial, Helvetica, sans-serif;
  4. color: #556b2f; /* #556b2f #696969 */
  5. }

  6. header {
  7. margin: 10px;
  8. padding: 10px;
  9. background-color: #334d55;
  10. color: #fff;
  11. text-align:right;
  12. }

  13. #wrap {
  14. margin: 10px;
  15. }

  16. h1,h2 {
  17. color:#334d55;
  18. }

  19. footer {
  20. margin: 10px;
  21. background-color: #c0ddc0;
  22. color:#334d55;
  23. text-align:center;
  24. }

演習2-1 解説

HTML
  • 6行目
    • CSSをHTMLに適用する方法は次の2通り.解答例は2番目の方法.
      1. HTMLファイル内にstyle要素として記述
      2. 別ファイルにスタイルシートを記述して,link要素でHTMLファイルからリンク
  • 11行目
    • 本文(ヘッダとフッタの間)のマージンを指定するために,その部分をdiv要素としてidを付ける.
CSS
  • 1行目
    • 文字コードは@charsetで指定する.
  • 3行目,8行目,16行目,20行目,24行目
    • スタイルは
            セレクタ {プロパティ名:値; プロパティ名:値;…}
      の形式で指定する.
    • 例えばbody要素の文字色は
          body {color:red;}
    • セレクタは「要素名」,「.クラス(ドットとクラス)」,「#ID(ハッシュとID)」等で指定する.
      • 3行目,8行目,20行目,24行目は要素名で指定している.
      • 16行目はIDで指定している.
      • 複数のセレクタを「,」(カンマ)で区切って並べると,その両方に同じスタイルが適用される.
      • 複数のセレクタを「 」(スペース)で区切って並べる,ネストする要素を指定できる.
        • ul ul と書いたらul要素の中にあるul要素を指す.
  • 4行目
    • フォントはfont-familyプロパティで指定する.
    • フォントファミリ名にスペースが含まれる場合は,その名前を引用符で囲む.
    • 複数のフォントを指定すると,先に指定したフォントが利用できなければ,次のフォントを利用する.
    • 総称ファミリ名を使用すると,ブラウザで設定された対応するフォントが使用される.
    • 総称ファミリ名
      • sans-serif ゴシック体のようにヒゲのないフォント
      • serif 明朝体のように文字の上下にヒゲのあるフォント
      • monospace 固定幅フォント
      • fantasy 装飾系のフォント
      • cursive 筆記体系のフォント
  • 5行目,12行目,21行目,27行目
    • 文字の色はcolor属性で指定する.
    • RGB値で色を指定するには,#のあとに16進数2ケタでR(赤),G(緑),B(青)の値を指定する.例えば,#556b2fはR(赤)が55,G(緑)がb2,B(青)が2fの色を表す.
    • RGB1ケタずつで指定することのできる.その場合は,1桁目と2桁目が同じ数と解釈される.
    • rgb()を用いて,RGBの各値を0~255の10進数で指定することもできる.
      • 例:rgb(255,0,0)など.
    • 割合で指定することもできる.
      • 例:rgb(100%, 0%, 0%)など.
  • 11行目.26行目
    • 背景色はbackground-colorプロパティで指定する.
  • 9,11,12行目,17行目,25,28行目
    • マージンとパディング,右寄せは,それぞれmargin,padding,text-alignの各プロパティで指定する.

演習2-2

演習2-1のスタイルシートに,更に次の変更を加えよ.
  • 「HTMLとは,CSSとは,Javascriptとは」を非表示にせよ.
  • フッターの位置をabsoluteで指定し,常にウインドウの最下部に表示されるようにせよ. 
  • QRコードを浮動体(float)とし,右寄せで表示せよ.その左マージンを10pxとせよ. 

演習2-2 解答例

演習2-2 ソース

HTMLファイル
  • 追加のスタイルを別ファイル02-css2.cssで定義し,link要素でリンクする.
<link rel="stylesheet" href="02-css1.css" type="text/css" />
<link rel="stylesheet" href="02-css2.css" type="text/css" />
  • QRコードを浮動体表示したときの見た目を良くするために,17行目と19行目を入れ替える.

CSSファイル
  1. img {
  2. float: right;
  3. margin: 0 0 0 10px;
  4. }

  5. ul ul {
  6. display: none;
  7. }

  8. footer {
  9. position: absolute;
  10. width: 95%;
  11. bottom: 10px;
  12. }

演習 2-2 解説

  • 1行目から4行目
    • 浮動体として右寄せするには,float属性の値をrightとする.
    • 左マージンを10pxとするために,margin属性の値を0 0 0 10px としている(数値は上,右,下,左の順).
  • 6行目から8行目
    • 要素を非表示にするにはdisplay属性の値にnoneを指定する.
    • 「ul ul」でul要素の子孫のul要素を対象とすることを表す.
  • 10行目から14行目
    • フッターの位置を常に下から10pxの位置に配置するために,position属性の値をabsolute(絶対位置)とし,bottom属性の値でボトムからの距離を指定する.

演習2-3

演習2-2のスタイルシートに,更に次の変更を加えよ.
  • 大見出しに影をつけよ.
  • 小見出しの背景に色をつけ,ウィンドウ幅の50%の幅とせよ.また,角を丸くせよ. 
  • outlineを使って,箇条書きを四角で囲め.

演習2-3 解答例


演習2-3 ソース

HTML
  • 演習2-2と同様に,追加のスタイルを別ファイル02-css3.cssで定義し,link要素でリンクする.
CSS
  1. h1 {
  2. text-shadow: 1px 1px 5px #c0ddc0;
  3. }

  4. h2 {
  5. background-color: #c0ddc0;
  6. padding: 5px 10px 0px 10px;
  7. width: 50%;
  8. border-radius: 5px;
  9. }

  10. ul {
  11. outline: 1px solid green;
  12. }

演習2-3 解説

  • 2行目
    • 影を付けるには,text-shadow属性を指定する.
    • text-shadow: 2px 5px 3px #c0ddc0; は,右方向に2px,下方向に5pxずらし,5px分ぼかした,色#c0ddc0の影を付けます.
  • 6行目:背景の色を指定するには,background-color属性を指定します.
  • 8行目:幅を指定するには,width属性を指定する.
  • 9行目:角を丸くするにはborder-radius属性を指定する.
  • 12行目から14行目:境界線を表示するには,outline属性を指定する.