Deprecated: Constant E_STRICT is deprecated in /NF/home/kyoin0/shimizu/public_html/dokuwiki/inc/init.php on line 42
第11回 CSS練習１ [コンピュータ基礎実習]

コンピュータ基礎実習

ユーザ用ツール

サイト用ツール

現在位置: コンピュータ基礎実習 » コンピュータ基礎実習 (上級) » 第11回 CSS練習１
jyokyu:j11

目次

第11回 CSS練習１

戻る

前回はCSSの基本的なルールを学びました。

今回の第11回、および次回第12回は、練習問題を通じてCSSの具体的な使い方を学んでいきたいと思います。

３分で振り返るCSS

先週の復習も兼ねて、CSSの基本をおさらいしておきましょう。

もしCSSを実際に触りながら復習したい場合は、前回使った簡単なサンプルを以下からダウンロードし、いろいろ自由に書き込んで試すと良いでしょう。

サンプルファイルセット css_sample.zip（前回と同じもの）

CSSって何？

CSS（スタイルシート）はHTMLにデザインを施すための特別な書き方です。

HTML上にあるすべての「要素」1)に対してデザインできます。

CSSでできるデザイン
（上記はほんの一部です）

文章はHTMLファイルに記入し、デザインに関する設定はCSSファイルに記入することで、編集作業をしやすくします。HTMLにごちゃごちゃ書き込まなくても、色々と豪華なデザインができるわけですね。

HTMLファイルとCSSファイルで
役割を分担させます

シンプルなHTMLでも、CSSを加えれば
さまざまなデザインにできます

他にも色々なメリットがあります。

  • CSSファイルを編集すれば、ページのデザインだけを簡単に変更できます。
  • 同じCSSファイルを参照すれば、複数ページを全く同じデザインに揃えられます。

CSSに対応させる方法

既存のHTMLをCSSに対応させるには、HTML内にある <head>～</head> の範囲内に以下のように書き足しましょう。

HTML

<head>
 ：
<link rel="stylesheet" href="mystyle.css" >
 ：
</head>

読み込ませたいCSSファイルを href="～" の部分に書いてください。

上のようにすると、指定のファイル mystyle.css を同じフォルダ内から探し、CSSの設定が読み込まれ、ページの各部のデザインが変化します。

関連するHTMとCSSファイルは
同じフォルダ内に配置しましょう

CSSは、別途用意した mystyle.css の中にすべて書き込みましょう。

作業上の注意

HTMLファイル、CSSファイル、そして実行結果を確かめるためのブラウザ、といった複数のウインドウを開いて編集することになるので、デスクトップを整理して作業が混乱しないようにしましょう。

さまざまなウインドウを同時に開いて
編集作業をします

テキストエディタやブラウザがどのファイルを開いているかは、ウインドウの上部に書かれています。編集中・表示中のファイルが間違っていないか良く確認しましょう。

CSSの書き方

CSSは原則 xxxx.css のようなCSSファイルにすべて書き込みます。

全て半角英数字で入力しましょう。

CSS

 h1セレクタ { colorプロパティ:red値; }
CSSの基本形

  • セレクタ：ページ上のどの部分をデザインするか。上の例なら h1 がセレクタで、ページ内に存在する全ての h1 タグをデザイン対象にするという意味になります。
  • プロパティ：どんなデザインをするか。上の例なら color がプロパティで、文字の色を変える効果があります。設定したいデザインに応じて、たくさんの種類のプロパティが存在します。
    さまざまなプロパティ
  • 値： 具体的な設定値。上の例なら、red が値で、赤色を意味します。

組み合わせると、上の場合ページ内の全ての <h1>～</h1> 範囲で、文字の色 color が赤 red になります。

具体例

例えば下の場合なら、<body>～<body> 範囲（＝ページ全体）で、背景色 background-color が、空色 skyblue になります。 

bodyセレクタ { background-colorプロパティ:skyblue値; }
ページ全体 body の背景色 background-color を変える例

サンプル
実行例。背景色が空色 skyblue になります。

複数の設定

{ ～ } の範囲には、設定を複数書けます。 下の例では、{ ～ } の中に２つの設定が連続して書かれています。デザインはそれぞれの効果が重なったものになります。 

h2セレクタ { colorプロパティ:yellowgreen値; background-colorプロパティ:green値; }
設定を複数記入する例

サンプル
実行例

上のようにすると、ページ内の全ての <h2>～</h2> 範囲で、文字の色 color が黄緑 yellowgreen になり、さらに背景色 background-color が、緑 green になります。

このように { ～ } の範囲にさまざまな設定を追加して、より複雑なデザインを実現できます。設定はいくつでも書けます。 

セレクタ { プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; }
   :           :

CSS設定をいっぱい書く場合の書き方

body { background-color:skyblue; }
h1 { color:white; background-color:blue; }
h2 { color:blue; background-color:skyblue; }
p { margin: 0 0 1em; }
   :           :
具体例
CSSはこんな感じで書き続けます。

特定の要素のみデザインを変えたい

h2 のように指定すると、ページ上の全ての h2 タグのデザインが変わってしまいますが、全てを対象にするのではなく、特定の場所だけをデザインしたい場合があるかもしれません。

そんな時は「クラス」を使えば、クラスを付けた部分だけに限ってデザインすることもできます。

クラスの使用方法

クラスを使うには、HTML と CSS の両方を編集する必要があります。

HTML

<b>これは普通です。</b><br>
<b class="nantoka">これは特別です。</b><br>
<b>これも普通です。</b><br>
クラス nantoka を追加した例

HTMLでは、いずれかの開始タグに class="クラス名" のように付け足して、クラス名を決めます。
クラス名は半角英数字を使って、好きな名前にできます（上の例では nantoka がクラスの名前です）。

CSS

.nantoka { color:blue; background-color:skyblue; }
CSSでクラス nantoka に対して設定をする例

CSSでは、セレクタを書くときに、クラス名の先頭にドット . を付けて .クラス名 と書きます。
たとえば nantoka クラスの設定をしたいなら、セレクタを .nantoka と書きます。
これで、HTML側で nantoka クラスを付け足した部分だけに特別なデザインを適用できます。

実行例

これは普通です。
これは特別です。
これも普通です。

クラスを付けた２行目の <b class="nantoka">～</b> の範囲にだけ、文字の色と背景色が設定されている様子がわかります。

他のタグにも class="nantoka" をつけてＯＫ。同じデザインをいろんなタグで使い回せます。

好きな範囲をデザインしたい

CSSでは、セレクタで何らかのHTMLタグを指定するか、あるいは既存のタグに class="クラス名" のようにクラスを付け足してデザインする範囲を指定する関係上、目的の場所が必ず <xxxx>～</xxxx> のように何らかのタグで囲われている必要があります。

ではそもそもタグで囲われていない範囲をデザインしたい時は、どうするのでしょうか？🤔

その場合は、仮のタグ <span> や <div> で囲いましょう。
<span> や <div> は、そのままでは特に効果はありませんが、上記の「クラス」と組み合わせれば自由にデザイン範囲を定められます。

<span>タグ

<span>～ </span> で囲った範囲は、１文字単位でデザインできます。

HTML

あれやら<span class="special">これやら</span>なんとやら！<br>
span で囲って、クラス special を付けました。

CSS
.special {
  color:red;
  background-color:gold;
}

CSSでは special クラスに対する設定をします。

実行例

あれやらこれやらなんとやら！

<span>～ </span> で囲った範囲に限り、１文字単位でデザインできている様子が分かります。

<div>タグ

<div>～ </div> で囲った範囲は、ボックス（箱状のエリア）を形成し、デザインできます。
ボックスの色や大きさや位置も調整できます。

HTML

あれやら<div class="info-box">これやら</div>なんとやら！<br>
div で囲って、クラス info-box を付けました。

CSS
.info-box {
  border:solid 2px royalblue;  /* 周囲に罫線を引く */
  background-color:lavender;   /* 背景色を塗る */
  padding:10px;  margin:10px;  /* 周囲の余白を調整する */
  width:10em;   height:3em;    /* 幅と高さを設定する */
}

CSSで info-box クラスに対する設定をします。

実行例

あれやら
これやら
なんとやら！

<div>～ </div> で囲った範囲が箱状になってデザインされている様子が分かります。
ここでは width: と height: で箱の幅や高さを設定しています。

これらCSSの基本を踏まえた上で、今日は具体的なデザイン例を紹介していきます。

CSS練習問題

CSSを使ったさまざまな練習問題を用意しました。
以下の資料を確認しながら問題に取り組んでください。

これが今回のメインです！

← ここをクリックしてアクセス

以上。次週に続きます。

おまけ

CSSでいろんなデザインが実現できる様子がわかったと思います。

もし余裕があれば、自分でいろいろデザインを試してみましょう。

サンプルとして、練習用HTMLファイル reidai.html と、対応するCSSファイル reidai.css を下に掲載しておきますので、自由にデザインしてみてください。

reidai.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電子書籍について</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="reidai.css" >
</head>
 
<body>
<!-- 本文ここから -->
 
<h1>電子書籍について</h1>
 
<p>このページでは私が気になるトレンドワードである <b>電子書籍</b> の紹介をします。</p>
 
<h2>電子書籍 とは</h2>
 
<p><b>電子書籍</b>とは紙とインクを利用した印刷物ではなく、文字や図に加えて音声や動画などをデジタル媒体に記録し、ネットワークで流通させた情報を指します。ここではとくに<b>書籍</b>を<b>電子化したものについて紹介</b>します。</p>
<p>本来、電子書籍はソフトウェアであるコンテンツのことだけを指しますが、再生用の端末機器 [ <b>電子ブックリーダー</b> ] も重要な要素といえます。</p>
 
<h2>電子書籍の種類</h2>
 
<p>現在流行している 主な電子ブックリーダーには、以下のようなものがあります。</p>
<ul>
<li><a href="http://www.amazon.co.jp/exec/obidos/tg/browse/-/2250738051" target="_blank">Amazon Kindle</a></li>
<li><a href="https://books.rakuten.co.jp/e-book/" target="_blank">楽天Kobo</a></li>
<li><a href="http://www.sharpgalapagos.jp/" target="_blank">シャープ GALAPAGOS(ガラパゴス)</a></li>
</ul>
<p>また、スマートフォンのアプリケーションとしても電子ブックリーダーが存在するので、例えば Amazon Kindle 用のコンテンツをアンドロイドOSを搭載したスマートフォンで閲覧することも出来ます。</p>
<p>電子ブックリーダーで閲覧をするコンテンツは、通常、各電子リーダーごとに専用形式のデータを使用します。<br>
しかし多くの電子ブックリーダーはPDF形式などにも対応しているため、自身で作成したデジタルコンテンツをPDF形式で保存し、電子ブックリーダーで閲覧するという使い方もできます。</p>
 
<h2>なぜ電子書籍を使うのか</h2>
 
<p>私の場合、最初は紙の本で読書をしていましたが、次第に<b>読み終わった紙の本がかさばる</b>ことが問題になってきました。小説以外にも漫画本などを所有していますが、部屋のを徐々に読み終わった本が占領していき、次第に部屋のスペースを圧迫している事に気づいたのです。</p> 
<p>しかも、<b>一度読み終わった本をもう一度読む、ということはほぼ無い</b>ことにも気づきました。本というものは新刊が毎月どんどん発売されます。読みたい本をリストアップしていくと、どんどん増える一方で、減る気配がありません。このままでは死ぬまでに読み切ることは無理であると悟りました。確かに面白い本はもう一度読みたくなりますが、まだ読んでいない本の中に面白い本があるかもしれないと思うと、<b>一度読んだ本をもう一度読むために時間を割くのがもったいない</b>と感じるようになったのです。</p>
<p>ということは、本を物理的に所有していることにはあまり意味が無いと感じました。その点、電子書籍であれば、あくまでデジタルデータで端末から消せば全く かさばらない ため、負担になりません。<br>
またAmazon等の場合、欲しい本があったり、もう一度読みたくなった場合には、簡単にネットワークからダウンロードすることが出来ます。例えば図書館で借りる場合、本が貸出中であれば返却されるまで待つ必要がありますが、それも必要ないというわけです。</p>
<p>手元に本は残りませんが、本を買うよりは安い値段で購入でき、読めさえすればいいと思っている私の場合、電子書籍が最適だという結論に達したのです。</p>
 
<h2>電子書籍の使い勝手</h2>
 
<p>私は Amazon Kindle を使っていますが、 実際に使って見ていくつかのメリットとデメリットに気づきました。</p>
 
<h3>デメリット</h3>
 
<p>まずデメリットですが、電子書籍を読むための端末 <b>電子ブックリーダー が必要</b>であるという点があります。<br>
また、充電式の機器なので、<b>充電できていないと読めない</b> という問題が有ります。</p>
<p>電子ブックリーダーが必要になるせいで 荷物がひとつ増えるのは邪魔ですが、本よりは重量がかさばらず厚みもないため、バッグなどがあればあまり問題ではないかもしれません。<br>
また、Amazon Kindle の場合、スマートフォンのアプリと連動するため、電子ブックリーダーを携行するのを忘れた場合も、スマートフォンで続きを読んで解決する方法があります。</p>
<p>充電に関しては、<b>Amazon Kindle の場合は、かなり連続稼働時間が長い</b>ため、あまり問題にはなりませんでした。例えば毎日普通に本を呼んでいて、2週間以上充電する必要が無かったぐらいです。</p>
 
<h3>メリット</h3>
 
<p>メリットは、<b>かさばらない</b>ことの他に<b>読みやすい</b>事があります。<br>
Amazon Kindle の場合は、液晶が特殊な設計になっているようで、<b>直射日光下</b>でもはっきり文字を見ることが出来ます。また、私は寝る前に本を読むことが多いのですが、電子ブックリーダーが自ら光っているため<b>暗闇の中でも問題なく読むことが出来ました</b>。<br>
また、紙の本の場合、寝る前に読むとき、本を支えるのが疲れるのですが、硬い板状の電子ブックリーダーを支えるのは紙の本よりは楽だと感じました。</p>
<p>このようにおおむね問題が解消され、メリットが有るため今では電子書籍を大変愛用しています。</p>
 
<table border="1">
<tr><th>デメリット</th><th>メリット</th></tr>
<tr><td>端末が必要<br>充電が必要</td><td>かさばらない・重くない<br>読みやすい</td></tr>
</table>
 
<h2>注意すべき問題点</h2>
 
<p>大変便利な電子書籍なのですが、データが手元に残らないため、例えば<b>Amazonがサービス提供を中止した場合、コンテンツが手に入らなくなる</b>という問題が有ります。また、読み終わった本が手元に残らないため、例えば<b>友人に貸すと言ったことが出来ない</b>のが、難点です。</p>
<p>また、ネットワークに接続されていないと本をダウンロード出来ないため、旅行などでネットワークの環境が充分でない時にはあらたなコンテンツを手に入れることが苦しいと言えます。（ただしあらかじめ端末にコンテンツをダウンロードし準備しておくことが出来るなら、この問題は回避できます。）</p>
<p>そして何よりも恐ろしいのは<b>電子ブックリーダーを紛失・盗難された場合</b>です。<br>
電子ブックリーダーでは、簡単な操作で新たな本が買えるのですが、<b>電子ブックリーダーを盗難されると、第三者に勝手に本を買われてしまう</b>という問題点があります。</p>
<p>また、Amazon Kindle の場合、Amazonに私のアカウントでログインした状態で使用するのですが、Amazon内で販売されている他の商品も第三者に勝手に買われてしまったり、Amazonに登録している個人情報が流出したりする可能性があります。</p>
 
<h3>対処法</h3>
 
<p>この問題に対する対策として、Amazon Kindle の場合、購入後に購入を取り消す仕組みが備わっています。<br>
また、根本的な対策としては、<b>Amazonアカウントのパスワードを変えてしまう</b> 方法もあります。<br>
こうすれば、電子ブックリーダー側からは、パスワードが無効になるため、すべての購入や個人情報の参照ができなくなるはずです。</p>
<p>このように対策方法はあるものの、取り扱いに注意を要するということには違いありません。</p>
<p>紙の本を扱う場合とはまた違った注意が必要になるということを意識する必要があると思います。</p>
 
<p>以上が私が電子書籍を使ってみて気づいた点です。<br>
おすすめですので、ぜひ電子書籍を利用してみてください。</p>
 
<!-- 本文ここまで -->
</body>
</html>
reidai.css
@charset "UTF-8";
/* CSS スタイルシート */
body { background-color:white; }

これらはCSSを色々実験してみたい方向けの練習用ファイルです。提出する必要はありません。
さまざまなCSS効果を自由に試してみましょう。

いい感じのデザインを探している場合は、CSS おしゃれ デザイン」等のキーワードでGoogle検索してみると、良いデザインが見つかるかも。

次回：オンデマンド授業

オンラインで課題に取り組みます次回の第12回はオンデマンド授業となります。

といっても次回は今回の続きで、やることは今回とあまり変わりません。

第12回の資料ページが作られるので、内容を見ながら課題ファイルを作成し、moodle に提出するいつもの流れです。教室に集まって先生といっしょに課題をやるか、オンラインで各自で課題に取り組むかの違いだけです。

第12回の資料が公開されるのは 6月29日（日） を予定していますので、それ以降に基礎実習ページの資料コーナーを確認して第12回の課題に取り組んでみてください。締め切りもいつも通り１週間の猶予があるので何とかなるでしょう。

もし質問などがある場合は Teams のチャット、または電子メールでお問い合わせください。

来週水曜日のこの時間は第13回目となりますので、よろしくお願いします。

戻る

1)
HTMLにおける「要素」とは、タグで囲われた範囲のことです。<xyz>～</xyz> のような範囲を指します。
jyokyu/j11.txt · 最終更新: 2025/06/22 10:18 by 127.0.0.1

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki