6回目授業内容 Webの基礎知識〜CSSの基本テンプレート〜作ってみたWebページ〜イラストレーター練習
Webの基礎知識（先週の復習）
htmlテンプレート
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p>本文</p> <h2>見出し</h2> <p>本文</p> <h3>見出し</h3> <p>本文</p> </body> </html>
- Webコピーライターも誕生する
- 情報アーキテクチャー→建設する仕事
- コメント（メモ）：
- alt属性：目が見えない方のため、リンク切れ、キーワードは入れない方向
- CSS：Cascading Style Sheet
CSSの基本テンプレート
body { color: #000; background: #fff ; }
ページを作ってみる
- FirefoxにColorZillaをアドオン
- フォルダ階層はせいぜい2階層まで
- rowspanとcolspan
作ってみたWebページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>私の好きな高級ギター</title> </head> <body> <h1>一世風靡したギター達</h1> <p><a href="sample.html">sampleページに移動</a></p> <p>オールドから新進気鋭の形をしたギターを紹介！</p> <ol> <h2><li>Fender Stratocaster</li></h2> <table border="1"> <tr> <td rowspan="2"><img src = "sozai/Fender Stratocaster.jpg" width = "368" alt = ""></td> <td><h3><a href="http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A7%E3%83%B3%E3%83%80%E3%83%BC%E3%83%BB%E3%82%B9%E3%83%88%E3%83%A9%E3%83%88%E3%82%AD%E3%83%A3%E3%82%B9%E3%82%BF%E3%83%BC" target="_blank">世界の標準ギター</a></h3></td> </tr> <tr><td><p>フェンダー社が1954年から発表・発売を行っているエレクトリックギターの機種。</p> <p>同社社長のレオ・フェンダーらによって開発された。</p> <p>ギブソン社のレスポールモデルと並ぶエレクトリックギターの代表的な存在で、現在はフェンダー社の2つのブランド（フェンダー、スクワイア）から販売されている。</p> </td> </tr> </table> <h2><li>Gibson Les Paul Model</li></h2> <table border="1"> <tr> <td rowspan="2"><img src = "sozai/lespaul.jpg" width = "368" alt = ""></td> <td><h3><a href="http://ja.wikipedia.org/wiki/%E3%82%AE%E3%83%96%E3%82%BD%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%AB" target="_blank">ギブソンのスタンダードギター</a></h3></td> </tr> <tr><td><p>ギブソンが1952年から製造・販売を行っているエレキギター。フェンダーのストラトキャスターと並び有名なモデルとされる。</p> <p>レスポールはギブソン社初のソリッドギターであり、前述の通りレス・ポールとの共同開発とされる、彼のシグネチャーモデルである。</p> <p>レスポールとして最も知られているのはスタンダード、カスタムの2種類であるが、その他にもスペシャル、ジュニア、デラックス、スタジオ、クラシックなど多くのモデルが存在する。</p> </td> </tr> </table> <h2><li>Gibson SG</li></h2> <table border="1"> <tr> <td rowspan="2"><img src = "sozai/usa_static_sg.jpg" width = "368" alt = ""></td> <td><h3><a href="http://ja.wikipedia.org/wiki/Gibson_SG" target="_blank">ギブソンレスポールの廉価版</a></h3></td> </tr> <tr><td><p>SG（エスジー）は、アメリカ合衆国のギブソンが1961年のニューモデルとして発表したエレクトリックギター。</p> <p>名称の「SG」はSolid Guitar、ソリッド・ギターの意。</p> <p>1961年のニューモデルとしての発表当初よりLes Paul Custom、Les Paul Standard、Les Paul Junior、SG-TV、SG-Special というレスポールと同様のラインナップが用意され、売れ行きも好調、このデザインの完成度に自信を持っていたようで、スペシャル、ジュニアもスタンダードと同じボディが使われると同時にコスト削減が図られた。 <p>さらにはメロディーメイカー、EB（ベース）までも、それまでのオリジナルデザインのボディーのストックが終了すると、SGスタイルに移行する。</p> </td> </tr> </table> <h2><li>Steinberger GL-2T</li></h2> <table border="1"> <tr> <td rowspan="2"><img src = "sozai/Steinberger GL-2T.jpg" width = "368" height = "290" alt = ""></td> <td><h3><a href="http://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC" target="_blank">家具屋が作ったギター</a></h3></td> </tr> <tr><td><p>80年代ニューエイジのグループがこぞって使ったギター。素材は木ではなくグラファイト/カーボンを使用している。</p> <p>1980年に家具職人のネッド・スタインバーガーがベースギター職人、スチュアート・スペクターと出会ったことから歴史が始まった革新的ギターメーカー、Steinberger。</p> <p>従来のギターデザインを覆し、構造から使用パーツまで高いオリジナリティと完成度でギター界に革命を起こした現在でも世界中のファンを魅了し続けるヘッドレス・ギター/ベースメーカーです。</p> <p>史上初の和音の各音程間の関係性を保ったままアーミングができるトレモロ・ユニット、トランストレムが開発され、本機に搭載されています。</p> <p>弁当箱の愛称で知られるボディはトップがふたのように開き、内部は空洞になったホロウボディとなっています。</p> <p>ボディ形状から想像がつかない豊かなサスティーン、クリアなサウンドで、ジャズギタリストからフュージョン、ブルース、ロックギタリストまで、様々な有名ミュージシャンの使用も頷ける色褪せることの無い機種です。</p> </td> </tr> </table> <h2><li>Ibanez UV77-MC</li></h2> <table border="1"> <tr> <td rowspan="2"><img src = "sozai/uv77mc2.jpg" width = "368" alt = ""></td> <td><h3><a href="http://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%B4%E3%83%BB%E3%83%B4%E3%82%A1%E3%82%A4" target="_blank">奇才Steve Vaiが開発に関わった、７弦のギター。</a></h3></td> </tr> <td><p>一本弦が増えただけで、そのサウンドの可能性は何倍にも増えます。低音弦が増えることによる、より低くて太いリフへのアプローチや 高音弦から低音弦へのかけ降りのフレーズのレンジの拡大クリーントーンによるコードにも、厚みと複雑さを与えてくれます。</p> <p>ブリッジは、フロイドローズ・ライセンスのLO-PRO EDGE7（初期型は、最後端にロックスクリューがあるタイプのEDGE7）低めのセッティングと、ボディのキャビティーのザクりによりスムースなアームダウン、過激なアームアップが可能です</p> </td> </tr> </table> <p></p> <table border="1" width="500"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> <table border="1" width="500"> <tr> <td rowspan="2">1</td><td>2</td><td>3</td> </tr> <tr> <td colspan="2">5</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
- リンク先の「Sampleページ」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>私の好きな高級ギターsampleページ</title> <style> body { background-color: #90fc3c; } </style> </head> <body> test <p><a href="index.html">戻る</a></p> </body>
- 色の見本
