第2回 ベースの作成
さて、いよいよ作っていきます。 今回はまず、ベース部分(外枠とかタイトルとか)を作ります。 なのですが、実際はこれを行う前にやっておくことがあります。 (前回書いとけば良かった・・・) XMLとは全然関係ないけど、とっても大事な事。 それは「テーマ」です。 自分がどんなページを作りたいか、何についてのページなのかをはっきりさせとかないと 作り始めてから、迷走すること間違いないです。 ここがそうでしたから^^; 作り始めたのはいいが、画面構成や、コンテンツ等、何にも考えてなかったので デザインが二転三転し、やっと今の状態に落ち着いた・・・ なので、まず「テーマ」これをしっかり決めておくと、後が楽ですよ。 では、本題に入ります。 まずベースですが、ここでは外枠、タイトル(画像)を作ります。 HP全体に統一感を持たせるために、どのコンテンツのページでも、同じベースを使うと まとまって見えます。 と、ここで使うファイルですが XMLとXSL、CSS。 旧XMLと一緒です。 さて、まずはXSLから。01:<?xml version="1.0" encoding="Shift_JIS"?> 02:<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 03:<xsl:output method="html" encoding="Shift_JIS" /> 04:<xsl:template match="/"> 05: <html> 06: <head> 07: <LINK REL="STYLESHEET" TYPE="text/css" HREF="default01.css" /> 08: <style type="text/css" media="screen"> 09: @import url(layout01.css); 10: </style> 11: <title><xsl:value-of select="hp/title" /></title> 12: </head> 13: <body> 14: <div class="layout"> 15: <table border="0" width="100%"> 16: <tr> 17: <td algin="left"> 18: </td> 19: <td align="right"> 20: <h3 class="since">since 2004/09</h3> 21: </td> 22: </tr> 23: </table> 24: <div class="body"> 25: <div class="titleimg"> 26: <div class="titleshadow"><xsl:value-of select="hp/title" /></div> 27: <div class="titlemain"><xsl:value-of select="hp/title" /></div> 28: </div> 29: </div> 30: </div> 31: </body> 32: </html> 33:</xsl:template> 34:</xsl:stylesheet>
旧XMLで出てきたものばかりです^^; しかも同じものを使ってたような・・・ なので旧XMLで説明したものは説明しません。旧XMLを参照して下さい。 ここでは、旧XMLで説明してない部分のみ説明します。(とか言ってるけど、正直旧XMLでどの辺り 書いたたか微妙にしか覚えてなかったり^^;) まずは、07〜10行。 スタイルシートを２つも読み込んでます。 これはスタイルシートのバージョンによっては、ブラウザに読めたり読めなかったりってのが あるらしく、それの対策として行っているものです。 07行めは、旧バージョンのブラウザでも読めるスタイルシート。 08,10行は、現バージョンのブラウザ(IE6以降)でも読めるスタイルシート。 (旧バージョンのブラウザでは、ここの中にあるimportが使えない為) そんな感じで分けてます。 で次に、15〜23行。 ここではページ上部に「since 2004/09」を表示させてます。 管理人のページだと、これ左側にカウンタを入れてます。 他にも、ここのスペースは色々使えると思います。 次は、24行。 ここはdivのクラスしか指定してませんが、スタイルシート側でTOP用の画像を表示させてます。 最後に26,27行。 ここは、XMLのtitleタグで指定された文字を、影付きで表示させてます。 実際の文字の位置等は、スタイルシート側で指定しています。 以上が、XSLの説明です。たいしたことは何もしてません^^; さて、次はスタイルシートその１(layout01側)。div.layout { background-color:rgb(180,100,0); float:left; width:800px; height:200px; } div.body { background-color:rgb(255,255,255); float:left; margin:5px,1px,10px,1px; width:798px; height:200px; } div.titleimg { background-color:rgb(250,150,50); background-image:url(./img/title.jpg); position:relative; top:0px; width:100%; height:150px; }
まずはlayout,bodyから。 これは、外枠を作る為の物です。 layoutが外枠の色で大きい四角と作っといて、内側にbodyで白い四角を書いて 外枠としてます。 枠自体の幅の設定は、body側のmarginで変えれます。(左から、上、右、下、左の順です) 次は、titleimg。 これは先ほど言ったTOPに画像を表示さる為のものです。 もし画像が存在しなかった場合は、background-colorが表示されます。 (まぁ念のため・・・ね) さて次はもう一つのスタイルシート(default01側)div.titlemain {color:rgb(255,255,255);font-size:48px;font-weight:bold; font-family: Impact,Charcoal;position:relative;top:-60px;right:0px;} div.titleshadow {color:rgb(0,0,0);font-size:48px;font-weight:bold; font-family: Impact,Charcoal;position:relative;top:5px;right:-5px;} h3.since {color:rgb(255,210,160);padding:0px,0px,0px,0px; margin:5px,5px,0px,0px;font-size:.8em;text-align:right;}
ここも少ししかありません。 まずtitlemainとtitleshadow。 これは影付きで表示させる為の設定です。titlemain側が白文字で titleshadowが黒文字で影となる部分。それを重ねて表示させてます。 次は、since。 これは単にsince表示用の色の指定と、表示位置の微調整です。 ふぅ・・・ そして最後にXMLです。<?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="sample01.xsl"?> <hp> <title>Sample</title> </hp>
たったこれだけです。 なんせ、今回使ってるのtitleだけなんで^^; 以上のファイルを同じフォルダ内に入れて、XMLを開けば サンプルHPベースのみ が表示されます。 各それぞれのファイルは XSL layout01.css default01.css を右クリックのファイル保存で保存できます。 しっかし、長いな・・・毎回４ファイル分を書くのはちょっとなぁ・・・ これからどんどん長くなるし。 ちょっと考えないとなぁ・・・ まぁ今回はこれくらいで。 次回は・・・えーとメニューだっけ。の説明をします。