情報デザインB 第12回
classの利用(前回の復習)今回は、前回の課題で作ったファイルを使って、 classとdiv、span要素を用いたWebページのレイアウトを行います。
前回の課題今回の課題を行うには、前回の課題として作成したHTMLとスタイルシートの2つファイルが必要です。 前回の課題がまだ出来ていない人は、 第11回の説明を見て、課題を作成してください。
今回の課題セリフにスタイルを設定する前回の課題では、主な登場人物であるさるとかにのセリフにスタイルを設定しました。 今回は、ほかの登場人物(栗、蜂、昆布、うす)のセリフにもスタイルを設定してください。 たとえば、次のようになります。 ... <div> するとそこへ栗(くり)がぽんとはねて来(き)て、 </div> <div class="kuri"> 「かにさん、かにさん、なぜ泣(な)くの。」 </div> <div> と聞(き)きました。 </div> ... </pre> #ref(css00.JPG,nolink); スタイルシート(ファイル名:sarukani.css)にスタイルを設定してください。 栗のスタイルの名前は「.kuri」、蜂は「.hachi」、昆布は「.konbu」、うすは「.usu」とします。 #pre(novervatim){{ ... .kuri { スタイルの指定 } .hachi { スタイルの指定 } .konbu { スタイルの指定 } .usu { スタイルの指定 } ... </pre> ***目次を作る [#l67934ee] 「猿かに合戦」(青空文庫)の文章は、 「一」「二」「三」「情報」(底本以下の部分)の4つで構成されています。 それぞれの部分の小見出しを作成し、見出しのスタイル(スタイル名:.komidasi)を作って、スタイルを設定してください。 それぞれの部分へジャンプする目次を、 div、a要素だけを使って、作成してください。 -それぞれの部分の小見出しにアンカーを設定する(参考:第4回) -タイトル・著者の下に、「目次」という見出しをつくる -目次の下にそれぞれの部分へジャンプするリンクをつくる #ref(css01.JPG,nolink); ***レイアウトを設定する [#s4f7bfd6] 次の図のような、目次を左や右に配置するレイアウトを、 スタイルシートを使って設定します。 #ref(layout.png,nolink); 説明にしたがって、設定をしてください |