Webデザイン基礎のページ
学籍番号：16nc018 氏名：小野寺 建吾
課題１
- テンプレート作成で工夫した点や苦労した点
- htmlファイル内では<font>のような見た目に関するタグは極力使わないようにし、
外観に関する記述はスタイルシートで行うようにした。
- 自分なりにアレンジを加えた箇所があればその解説
- highlight.jsを利用して、テンプレート中のソースコードにシンタックスハイライトを適用した。
脚注部分から本文に戻れるリンクを追加した。
- この課題を通して得られた知識、経験、感想など
- htmlで文章の構造を定義するにあたって、適切なタグを見つけるのが大変だった。
また、htmlで構造を定義し、cssで外見の設定をする。という理念について、知ってこそいたものの今まで実践したことはなかったのだが、
今回自分なりにそれに沿ったコードを書いたことにより、1年のときに実習で作成したような、
htmlファイル内で外見も定義するようなコードに比べると、可読性が向上するなどのメリットを感じることができた。
課題２
- XMLで何を記述しようとしたのか、なぜそのような言語仕様にしたのか、XSLでの工夫など解説
- 自分がプレイしていたカードゲーム「Magic: The Gathering」のカードデータをXMLで表現した。
カードには"名前"や、"コスト"、"ルールに関係する文章"などの要素があり、今回の言語を定義するにあたって、
それらの要素を表現する<name>,<cost>,<rule>などのタグを定義し、それらのタグを使って<card>タグ内に
記述することでカード一枚を表現するようにした。それらのカードをリストとして<cardlist>内に記述した。
xslファイルでは複数テンプレート処理によって、<cardlist>内の<card>から順番にカードが持つ要素を取り出し、tabeleを用いて表として表示するようにした。
xslの記述をシンプルにするため外観に関する設定はcssで行うようにした。
- 工夫した点や苦労した点、この課題を通して得られた知識、経験、感想など
- カードはそれぞれ種類によって、持っている要素に違いがあるため、そのカードが持っていない要素については記述をしないようにした。
XSLTによる変換の際には、条件分岐によって値の有無を参照し、そのカードが持っている要素だけを表示した。
(ただし、全てのカードが必ず持っている要素については条件分岐を行わずに表示した。)
また、カードはそれぞれ色という概念を持っており、これを<xsl:attribute>によってdivのclass属性に付与することで、
スタイルシートで背景色に反映できるようにした。
HTML/CSSの成果物
XMLの成果物