#author("2022-11-25T10:50:14+09:00;2020-02-02T18:20:21+09:00","default:inoue.ko","inoue.ko") #author("2022-11-25T10:50:34+09:00;2022-11-25T10:50:14+09:00","default:inoue.ko","inoue.ko") *Webデザイン入門 全体像を把握する速習講座 HTML+CSS の速習講座 ~ #image(CSS/html_css.png,right,50%) Webの技術は、対外向けの情報発信のみならず、組織内部の情報共有、個人的なノートとして、さらにプレゼンテーションツールとしても活用できます。 ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの制作体験を行います。制作からアップロードまで、すべてオープンソースのフリーソフトウエア( Win / Mac 対応 )を利用しますので、経費の負担なく、各自の研究室のPCで学習を継続することができます。 ~ #clear ~ ***CONTENTS #contents2_1 ~ **はじめに ~ ***開発環境の準備 -作るソフト [[TextEditor]] ＞ [[Atom]] ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です((補足：Dreamweaverやホームページビルダーの利用について&br;一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか？という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。&br;これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。))。 -見るソフト [[Browser]] ＞ Firefox , Chrome -転送するソフト [[FTP]] ＞ FileZilla ~ ***サイトフォルダの準備 #image(WebDesign/Basics/folder.jpg,right,30%) -一般にWebサイトは複数のファイルから構成されます。はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。 -1ページ = 1ファイル（〜.html）が基本です。 -写真やイラストなどの画像は imagesフォルダで管理します。 ''注）フォルダ名、ファイル名は必ず半角英数で'' images page01.html page-01.html page_01.html logoMark.jpg など、 Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。 #clear ~ ~ **HTML ~ ***HTMLの記述例 HTMLとは、ページの内容を記述するためのマークアップ言語です。 まずは、以下のソースコードをテキストエディタにコピー＆ペーストして、 ''index.html'' という名前で、作業用フォルダに保存して下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Sample Site</title> </head> <body> <div id="container"> <header> <h1>Sample Page</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> </ul> </nav> <main> <section> <article> article 01 </article> <article> article 02 </article> </section> <aside> aside </aside> </main> <footer> © http://www.example.com </footer> </div> </body> </html> ~ ***HTMLをブラウザで表示確認 -index.html をブラウザへドラッグ＆ドロップするだけで表示されます。 -アドレスバーに表示されるURLの違い --通常のネット接続の場合： http：// www.example.com/index.html --ファイルを表示した場合： file：//・・・・ /index.html -見出しや文章を適当に書き変えて「保存」してみて下さい。ブラウザの「更新」を行うと、変更が反映されることがわかります。 ~ ~ ***HTMLタグの基本 HTMLは、情報要素を以下のような''タグ''でくくる形で記述します。 <◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。 以下、基本的なものを列挙します。 ＞ [[詳しくはこちら>HTML]] -HTML文書：<html> 〜 </html> -ヘッドとボディー ※HTMLは２つの部分から構成されます。 --ページに関する前置き情報：<head> 〜 </head> --ブラウザの主画面に表示される情報：<body> 〜 </body> -セクション ※紙面を構成する大きな枠組みを定義するのに用います。 --汎用区画：div, article, aside, section --ヘッダー：header --フッター：footer --ナビ：nav -見出し：h1 ※ h1 から h6 まで６段階あります -文章段落：p -リンク：a ※以下の２種類の使い方があります。 --内部リンク（サイト内にある別のhtmlファイルへのリンク） <a href="gallery.html">（リンク文字、画像）</a> --外部リンク（外部サイトへのリンク） <a href="http://www.abc.com">（リンク文字、画像）</a> -箇条書き： <ul>と<li> ※以下、サイトナビの書き方の例。 <ul> <li><a href="index.html">home</a></li> <li><a href="gallery.html">gallery</a></li> <li><a href="links.html">links</a></li> <li><a href="about.html">about</a></li> </ul> -メディア：img, audio, videoなど --画像の配置：img //sample.jpgという画像データがimagesフォルダの中にあるとして・・・ <img src="images/sample.jpg" width="320"> //※属性 src ソース width 表示幅 画像はWebに最適なサイズにリサイズ ＞ 参考：[[WebDesign/Images]] --動画の配置：video //同様に動画の掲載も可能です。ただし動画ファイルは「重い」ので、YouTubeにアップして、それを埋め込むのが一般的です。 <video src="movies/sample.mp4" width="320"></video> -その他 --強制改行：br --水平線：hr ~ ~ ***参考 -HTML5 Semantic の基本形：[[GoogleImage:HTML5 Semantic]] -きれいなソースコードを書くために・・・ --TAB,半角スペースでインデントをとってHTMLを見やすくしましょう。 --TAB,半角スペースは表示上は無視されます。 --要素間の「余白」は後に学習するCSSでコントロールします。 全角スペースの利用は様々なトラブルのもとになるので、避けましょう。 -様々なコンテンツの埋め込み --YouTube動画の埋め込み <IFRAME> YouTubeのサイトには「共有」>「埋め込みコード」があります。 それ(以下例)を<body>内にコピー＆ペーストすれば表示されます。 <iframe width="420" height="315" src="http://www.youtube.com/embed/[動画個別の記号]" frameborder="0" allowfullscreen></iframe> --GoogleMapの埋め込み → Googleマップ＞リンク＞埋め込みコード --その他、Twitterのタイムラインの埋め込みなども試してみて下さい。 ~ ~ **CSS ***CSSでページのスタイルを定義 CSSとは、表示された要素のビジュアルを定義するためのものです。 まずは、以下のソースコードをテキストエディタにコピー＆ペーストして、 ''style.css''としてWebSiteフォルダに保存して下さい。 *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } #container{ width: 84%; max-width: 1280px; min-width: 512px; margin: 0 auto; } header { position:relative; height: 8rem; background: #333; box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3); } header h1{ position: absolute; top: 3rem; left: 3rem; font-size: 2rem; color: white; } nav { padding: 1rem 3rem ; background: #333; } nav ul { display: flex; flex-direction: row; } nav li { margin-right: 2rem; } nav a { color: white; } main { display: flex; flex-wrap: wrap; justify-content: space-between; } section { flex: 3; padding: 3rem; background: #EEE; } article { height: 8rem; padding: 1rem; margin-bottom: 2rem; background: #FFF; } aside { flex:1; padding: 3rem; background: #DDD; } footer { padding: 2rem 3rem; text-align: center; background: #333; color: white; } ~ ***HTMLとCSSの関連づけ index.html の<head>内に、以下の１行を追記して下さい。 <link rel="stylesheet" type="text/css" href="style.css"> これで、CSSに書かれた内容が、ページのスタイルに反映します。 注）CSSを記述する方法は３つあります。 ・ HTMLファイルに書かれた各タグの中に直接書く ・ HTMLファイルのヘッダー部分にまとめて書く ・ HTMLファイルとは独立した別のファイルに書く（ 拡張子は .CSS ） で、結論から言うと、''３つめを採用するのがWeb標準''で、ここではそれにしたがって、''style.css'' を別ファイルとして独立させています。 ''最初の index.html と この style.css を組み合わせた結果'' → [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/CSS01/]] ~ ~ ***CSSの記法 CSSでは''どの部分の・何を・どうするか''を記述します。 記述の基本ルールは以下のとおりです。 セレクタ（どの部分の） { プロパティー（何を） : 値（どうする） ; プロパティー（何を） : 値（どうする） ; : } HTML内の特定の要素を''セレクタ''で把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。 セレクタとしては、タグ名を使うのが最もシンプルですが、特定の１要素のみに適用したい場合は、id="任意の名称"、いくつかの要素にまとめて適用したい場合は、class="任意の名称" など、開発者が任意の名前を与えて、その名前を使って制御する・・という方法を採ります。 -''セレクタ''が既存のタグの場合 ＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する場合 article { background-color : gray; } タグ要素の中のタグ要素にスタイルを定義する場合 article p { line-height : 180%; } -''セレクタ''が ID 要素(ページ内に１つ)の場合（ 例：<div id="sideBar"> ） #sideBar { background-color : white; } -''セレクタ''が CLASS 要素(ページ内に複数)の場合（ 例：<p class="column"> ） .column { background-color : gray; } -その他の様々なセレクタの書き方 ＞ [[CSS/Selector]] -参考：コメントアウトについて /* color: red; */ のように /* と */ で一定範囲を囲むと、コメント扱いとなります。 後で使う可能性のある記述を一時機能停止させたい場合にも使えます。 ~ ~ ***CSSによるページレイアウト #image(CSS/html_css.png,right,45%) CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰めていく作業''と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。 箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。 ~ ''参考''：[[ZENGARDEN>http://www.mezzoblue.com/zengarden/alldesigns/]] ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替えのみで様々なビジュアルが実現できることを示す事例集です。 ~ ~ #image("CSS/boxModel.png",right,40%) ***ボックスモデルを理解する 箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。 -margin 境界の外側の余白 -border 境界 -padding 境界の内側の余白 -width, height 内容部分の幅と高さ #clear ~ ~ ***ユニバーサルセレクタ ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制御が可能です。 CSSによる精密なレイアウトコントロールの際は、CSSの先頭で、以下のような「リセット」を行うのが一般的です。 * { margin: 0; padding: 0; line-height: 100%; list-style-type: none; text-decoration: none; } この例では、すべての要素に対して余白をゼロに、また、余計な装飾を「無し」にリセットしています。 ~ ~ ***flexboxを用いたレイアウト 親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。 以下、メニューを横に並べる事例です。 -HTML側の記述 <ul> <li><a href="#">about</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> </ul> -CSS側の記述 ul { display: flex; flex-direction: row; } li { width: 120px; margin-right: 20px; } 詳しくは、[[CSS/Flexbox]]をご覧下さい。 ~ ~ ***floatを用いたレイアウト &color(red){上記 flexbox 仕様の登場で、あまり使用されなくなりました。}; -特定のブロック（箱）のCSSに float を書き加えると、ブロックは左に（右に）回り込みながら、詰め込まれていきます。連続するfloat要素はスペースに余裕のあるかぎり、左（右）へ回り込んで、横に並びます。 float : left; （ float : right; ） -ただし、回り込みは一旦定義すると、左右に余白がある限り、その後の要素も自動的に回り込んでしまうので、これ以上は回り込みさせたくない…という''次の''要素のところで回り込みをストップさせる必要があります。その場合は、回り込み設定の「解除」という意味で、 clear : both; （clear : left; clear : right; ） と書きます。 ~ ~ ***positionを用いたレイアウト floatを用いた「箱詰め作業」では、スペースに余裕がなければ収まりません。しかし、スペースの有無に関わらず、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、''position''というプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。 -位置の基準となるブロック（一般的には #container）に position:relative; と書きます。これで基準となるブロックの左上が原点（0,0）となります。 -対象となるブロックに position:absolute; top: Ypx; left: Xpx; と書きます。これで当該ブロックは（X,Y）の位置に表示されます。 ~ ~ ***テンプレートから個別ページへ #image(CSS/html_css_2.png,right,40%) index.html と style.css のセットは、いわばページのテンプレート（ひな形）です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。 gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。 ~ -参考：テンプレート http://www.oswd.org/designs/browse/ ~ ~ **ファイルのアップロードについて 作成したファイル(群)は、Webサーバーにアップして「公開」となります。 [[詳しくはこちら>FTP]]}; -FTPクライアントソフト(FileZilla)を起動。 -FTPサーバー（ホスト名）、ユーザID、パスワード の３つを入力して接続 -一般的にはウインドウの左側があなたのPC（ローカルマシン）、右側が接続先サーバー（リモートサーバー）です。 -左のウインドウから右のウインドウへ「アップロード」します((FileZiilaはドラッグ＆ドロップにも対応しているので、フォルダを掴んで、ターゲットディレクトリにドラッグ＆ドロップするだけで完了します。))。 -アップロードの仕方とアクセス方法は以下ような関係があります。 --ドキュメントルート直下の ''index.html''(トップページ) を閲覧する場合 http://xxxxxxxx.com/ --ドキュメントルート直下の test.html を閲覧する場合 http://xxxxxxxx.com/test.html --ドキュメントルート直下にsampleフォルダ(中にindex.html)がある場合 http://xxxxxxxx.com/sample/ つまり、サーバー（ディレクトリ）がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。 ~ ~ **最後に ~ -Webサイトはオープンなソースコードでできているので、ブラウザ上で 右クリック ＞ ページのソースを表示 とすると、そのページのHTMLソースを見ることができます。また、ヘッダー部分にあるCSSファイルへのリンク辿ればCSSのソースを見ることもできます。あらゆるサイトをページ作りのお手本として参考にすることができるので、是非ブラウザを活用してみてください。 -本講習では、HTML+CSS のみでWebページをつくる演習を行いましたが、さらにインタラクティブなWebページをつくるには、JavaScript、PHPといった言語を使用することになります。以下のページに関連する言語等についての各種概説へのリンクがありますのでご参考下さい。＞ [[WebDesign]] ~ ~ ~ ~