情報処理実習F:第7回　スタイルシートの利用

前回の復習

• 画像ファイルを貼りつける<img>タグの使い方について学んだ。
• 画像ファイルサイズの指定について、実際のサイズよりも小さいサイズを指定している人が多かった。表示するサイズと同じサイズの画像を用意しよう。
• 画像ファイルが表示されていない人がいた。おそらくは画像ファイルのアップロードを忘れているのであろう。先週確認したように「手元のファイルをテキストエディタで更新する」「手元のファイルをブラウザで確認する」「ftpでサーバーにアップロードする」「アップロードされたファイルをブラウザで確認する」という一連の作業をすれば、最後の「アップロードされたファイルをブラウザで確認する」という段階で画像が表示されないことに気がつくはず。
• ２回目の授業資料に、Webページ公開の手順をまとめた。

スタイルシートの利用

• とほほのスタイルシート入門（基礎知識）で、スタイルシートの基本について学ぶ。
• css Zen Garden (和訳) で、CSSを変えることでWebサイトの見栄えがいかに変わるかを見る。
• このように、HTMLに文書の論理構造を記述し、CSSに文書の見栄えを記述することが、HTMLの本来の意義に沿った方法である。そのためには、<font> <b> <i> 等の見栄えを記述するためのHTMLタグを用いずに、論理構造を示すHTMLタグを用い、見栄えはCSSで記述するのが良い。
• このページのスタイルシートをダウンロードする。
• ダウンロードしたスタイルシートを、自分のページに設定する。
• 見栄えが変わりましたか？
• スタイルシートを読んで、意味を理解する。とほほのスタイルシート入門を参考にする。
• スタイルシートを編集する。色見本の館を参考に色を選び、フォントのサイズ等も変えてみよう。
• HTMLの本文では<font>タグをなるべく使わずに、強調する箇所は<strong> (強めの強調)または<em> (弱めの強調)を使う。<strong>と<em>の見栄えについては、スタイルシートで制御する。
• このように文書の見栄えをスタイルシートファイルに記述しておくことで、スタイルシートファイルを修正する事でWebページの見栄えを統一的に変えることができるため、便利である。
• スタイルシートテクニックには、色々なテクニックが紹介されている。

課題

スタイルシートを編集して、オリジナルなデザインを作ってください。作成したページを授業用ウェブサーバーにFTPでアップロードして、名簿のリンクから更新されたことを確認してください。

情報処理実習F