情報デザインB 第8回情報デザインB 第12回
この情報にアクセスするには...このWebページにアクセスするには、次のように操作してください。
classを使ったレイアウト
classの利用(前回の復習)今回は、前回の課題で作ったファイルを使って、 classとdiv、span要素を用いたWebページのレイアウトを行います。
今回の課題
前回の課題今回の課題を行うには、前回の課題として作成したHTMLとスタイルシートの2つファイルが必要です。 前回の課題がまだ出来ていない人は、 第11回の説明を見て、課題を作成してください。
</div> <div> 今回の課題セリフにスタイルを設定する前回の課題では、主な登場人物であるさるとかにのセリフにスタイルを設定しました。 今回は、ほかの登場人物(栗、蜂、昆布、うす)のセリフにもスタイルを設定してください。 たとえば、次のようになります。#spanend #spanadd ... #spanend #spanadd <div> #spanend #spanadd するとそこへ栗(くり)がぽんとはねて来(き)て、 #spanend #spanadd </div> #spanend #spanadd <div class="kuri"> #spanend #spanadd 「かにさん、かにさん、なぜ泣(な)くの。」 #spanend #spanadd </div> #spanend #spanadd <div> #spanend #spanadd と聞(き)きました。 #spanend #spanadd </div> #spanend #spanadd ... #spanend #spanaddスタイルシート(ファイル名:sarukani.css)にスタイルを設定してください。 栗のスタイルの名前は「.kuri」、蜂は「.hachi」、昆布は「.konbu」、うすは「.usu」とします。 #spanend #spanadd ... #spanend #spanadd .kuri { スタイルの指定 } #spanend #spanadd .hachi { スタイルの指定 } #spanend #spanadd .konbu { スタイルの指定 } #spanend #spanadd .usu { スタイルの指定 } #spanend #spanadd ... #spanend #spanadd 目次を作る「猿かに合戦」(青空文庫)の文章は、 「一」「二」「三」「情報」(底本以下の部分)の4つで構成されています。 それぞれの部分の小見出しを作成し、見出しのスタイル(スタイル名:.komidasi)を作って、スタイルを設定してください。 それぞれの部分へジャンプする目次を、 div、a要素だけを使って、作成してください。
レイアウトを設定する次の図のような、目次を左や右に配置するレイアウトを、 スタイルシートを使って設定します。 説明にしたがって、設定をしてくださいまず、HTMLファイルのbody要素内に、div要素を次のように追加します。 これは、中身を「コンテンツ全体」「タイトル」「目次」「文章」の4つのブロックにわけるための設定です。 #spanend #spanadd <div class="all"> #spanend #spanadd #spanend #spanadd <div class="title"> #spanend #spanadd (タイトル・著者名の部分) #spanend #spanadd </div> #spanend #spanadd #spanend #spanadd <div class="menu"> #spanend #spanadd (目次の部分) #spanend #spanadd </div> #spanend #spanadd #spanend #spanadd <div class="contents"> #spanend #spanadd (文章の部分) #spanend #spanadd </div> #spanend #spanadd #spanend #spanadd </div> #spanend #spanadd次に、スタイルシート(ファイル名:sarukani.css)に、 次の設定を追加します。次のような設定です。
#spanend #spanadd .all, .title, .menu, .contents #spanend #spanadd { #spanend margin: 0; padding: 0; #spanadd } #spanend #spanadd .all {position: relative;} #spanend #spanadd .title {width: 100%;} #spanend #spanadd次に、目次を左右のどちらかに設定します。 第8回で説明した 幅の設定や左右への配置・回り込みの設定を使います。 目次を左に配置する場合は、次のようにスタイルシートに設定を追加します。 「180px」の部分は、自由に大きさを変えてください。 #spanend #spanadd .menu #spanend #spanadd { #spanend float: left; width: 180px; #spanadd } #spanend #spanadd .contents #spanend #spanadd { #spanend margin-left: 180px; #spanadd } #spanend #spanaddこれは、次のような意味になります。
#spanend #spanadd .menu #spanend #spanadd { #spanend float: right; width: 180px; #spanadd } #spanend #spanadd .contents #spanend #spanadd { #spanend margin-right: 180px; #spanadd } #spanend #spanaddこれは、次のような意味になります。
#spanend #spanadd .all #spanend #spanadd { #spanend position: relative; margin: 0 auto; width: 80%; #spanadd } #spanend #spanadd 感想を書く最後に、前回と今回の課題の感想を書いてください。
課題の提出HTMLファイルの文法をチェックするAnother HTML-lint gatewayをつかってチェックします。 「よくできました」と表示されるまで修正すること。提出方法学籍番号を名前とするフォルダに必要ファイルをすべて入れたものを提出します。提出先いつもと同じ場所にあります。締め切り1月13日(金)13:00 }} |