WDI-Slides-04.pptx

Size: px

Start display at page:

Download "WDI-Slides-04.pptx"

うまじふじがわ
5 years ago
Views:

1 WEB+DB システム ( 入門編 ) 第 4 回 (2016 年 4 月 28 日 ) HTML と CSS

2 今日のテーマ p HTML(Hyper Text Markup Language) を読む p CSS(Cascading Style Sheet) の使い方を理解する p 画面の修飾記述方法を調べる n タグについて学ぶ p HTML+CSS で WEB 画面を記述する方法について実際に試し理解を深める

3 メインの表示画面を見る p memopad/app/views/layouts/ にある application.html.erb を開く

4 HTML のタグ p <tag> 記述 </tag> n タグと呼ばれるキーワードが並べられる n タグは必ず対応している必要がある n 単独で動作するタグの場合 <tag /> と記述すると開いてすぐに閉じる記述となる p <tag1> <tag2> 記述 </tag2> </tag1> p 入れ子構造になった場合内側から閉じていく

5 全体構成 <html>   </head> <body>  </body> </html>

6 ブロック構造を常に意識する C 言語や Java の場合は { } で囲まれた領域が一つのブロックになる Ruby では def などから end までがブロック閉じるまでが一つのブロックとなるブロックの開始は def, module, if など

7 ソースコードにはインデントを! プログラムの段下げのことをインデントといいますインデンテーションがきちんとしているとブロック構造が見やすくなりますインデントが書けないプログラマは同僚から嫌われます! ( しつけがなってない ) 空白 2 文字分で良いでしょうインデントは必ずつけて下さい

8 ヘッダ部 p <head></head> で囲まれた部分がヘッダ部 p ヘッダ部には title タグなどがくる p <title></title> n title で指定された文字列がブラウザの見出しになる p <meta ( 次ページ ) p <style id= ></style> n 書式を名前で指定する記述

9 マルチフレーム p <frame> </frame> で囲まれた部分がそれぞれ独立した html の形態になる p <frameset> </frameset> の中に複数の <frame></frame> ブロックを記述する p 現在はマルチフレームの構造を使っていない

10 フレームを左右に 2 分割する例 <html> <head> <title> わたしのブログ </title> <META NAME="description" CONTENT=" ブログ, 日記 "> <META http-equiv="content-type" content="text/html"> </head> <a name="_top"></a> <frameset border="0" cols=200,*> <frame src="menu.htm" marginwidth=10 scrolling=yes name="menu"> <frame src="bodytop.htm" marginheight=20 marginwidth=20 scrolling="auto" name="main"> </frameset> </html> 歴史的な構造です忘れていいと思います何かの折りに見かけたらあれかと思って下さい

11 body ブロック p <body> </body> タグで囲まれた部分が画面本体の記述になる n n などを参照のこと p ブロック内で使われるタグ ( 一部抜粋 ) n table / th / tr / td 表の記述行列 n h1 / h2 / h3 見出し行 n br / hr 改行横線 n b / i / u / del 太字など文字修飾 n a リンク n img 画像表示

12 application.html.erb での body 記述 p <%= yield => n とだけ記されている n yield 部分でアクションが実行される n layouts/application.html.erb は共通の型枠で型枠の中身としてはめ込む機能は Memos/index.html.erb などで記載する n yield は他にもアクションを実行する部分で使われる言葉なので覚えておくとよい

13 埋め込み ruby (Embedded Ruby) <% %>Ruby 言語で解釈される TAG <% %> rubyを主に制御構造に記述する <%= %> rubyで変換した結果をhtmlに出力する

14 table 記載 p table は表だが画面全体を升目状に区切って使う際のテクニックとしても利用される p 表現方法は文法とは別に自習して下さい <table> 表の開始 <tr> 横方向行の始め <td> </td> </tr> </table> 各列のデータの始め

15 index.html.erb の中身一覧表的な画面としてテーブル構造が基本となっている

16 table によるレイアウト編集 p <table> </table> でテーブル全体 n <tr> 行記述 </tr> で行を区切る n <td>1 枡 </td> で一つの枠を区切る n この td に colspan や rowspan を組み合わせて全体の枠を作るテクニックはよく使われる n align = center / left などで中央揃え左揃えなどを指定する n width= 200 height= 60 などで幅高さを指定 <td rowspan= 4 > 縦に 4 つ連結 <td colspan= 3 > 横に 3 つ連結

17 見出し行 / 改行 / 横線 p <h1> このページのタイトル </h1> p 数字が大きくなるほど見出しレベルが下がってくる n ( どんどんと小さくなる ) p html では通常の制御文字 ( 改行タブなど ) は意味を持たない p 改行する時は <br /> タグを必ず入れる p 横線を引く時は <hr />

18 文字修飾 p <b> 太字 </b> bold p <i> 斜体字 </i> italic p <u> 下線 </u> underline p <del> 取り消し線 </del> delete p <font size= +2 color= RED > 文字を 2 大きくし色は赤にする </font>

19 リンク p <a name= zzzzz /> p <a href= xxx.htm > ファイルへのリンク </a> p <a href= #zzzzz /> ファイル内へのリンク </a> p <a href= どこかのサイト / target= _blank > どこかのサイトへのリンクを新しいページで開く </a>

20 画像表示 p <img src= ファイル名 /> p 画像タグ n src= ファイル名で表示する画像ファイルを指定 n height= 高さピクセルで高さを表示 n width = 幅ピクセルで幅を表示 n 但し rails ではリソース管理のため n app/assets/images の下に画像を置き n <%= image_tag( ファイル名 ) %> n で記述する

21 段落ブロック p <div> </div> p 囲まれた内部が一つの段落として表示される p 通常 align= left, center などのそろえる位置を記したりさらに様式を定義したスタイルシートを引用し id= スタイル ID などを記して記載する p 他に段落を区切る機能があるタグ n <p> </p>, n <blockquote></blockquote>

22 例題演習 p 見出し部分に画像をはめ込んでみる p 好きな画像を 1 枚 jpg gif png などの形式で保存する n 保存先は app/assets/images application.html.erb ファイルに <%= image_tag( banner.gif', :size=> 450x100', :alt => ' 私の専用メモ帳 ') %> などと書く ( ファイル名サイズは各自調整のこと ) p タグを埋め込んで画像を表示させる

23 ホスト OS とゲスト OS との共有 Windows 側の D:/VMware/Shareと LINUX 側の /mnt/hgfs/sharedとの間の共有設定を確認してください VMware の設定画面の共有で設定できます Windows 上でファイルを Share に書き込み LINUX 側で読み出すことができます

24 例題演習の画面私の編集例です

25 日本語入力システム設定から入力メソッドを選択します

26 今回の環境での日本語入力入力メソッドの個人設定を行うと日本語 Anthy というのがありますのでこの設定やアイコンを確認して下さい画面右上に入力メソッドのアイコンが表示されています日本語入力の方法は Anthy を調べて下さい

27 今回の実行画面上記の修正で以下のような画面になりました

28 画像表示のタグの例 <!DOCTYPE html> <html> <head> <title>memopad</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <%= image_tag 'banner.gif', :size=>'450x100', :alt =>' 私の専用メモ帳 '%> </head> <body> <%= yield %> </body> </html>

29 HTML による画像の表示 HTML による画像表示のタグは <img src= ファイル名 /> であるこの記述でも画像が貼付けられるこの場合のファイルは public の下に置くはずだったが rails のバージョンが変わって場所が変わった!? リソース管理の都合でなるべく rails の機能を使って下さい

30 ソースコードを読んでみようプログラマにとって大切なことは長文のプログラムでも丁寧に読みこなすこと WEB ページを右クリックしソースを表示を選んでソースコードを読んでみよう

31 次のテーマ CSS(Cascading Style sheet) を利用する画面全体を分割してそれぞれのスタイルを決める統一性のあるデザインとする注意点様々なファイルを新規に追加していくのでそれらの修正追加作業が完結しないとテストランは動きません

32 Application.html.erb

33 Id として属性名を与える DOM (Document Object Model) で画面上の要素一つ一つがオブジェクトとして識別されています Javascript などでは DOM の ID を経由して画面上の要素一つ一つを動的に書き換えることができますブロックレベルで指定している id を呼び出している側 (.html.erb) と定義している側 (.css) とで対応付けて呼んでください

"data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body> <div id="container"> <div id="header"> <%= image_tag 'banner.

34 同じ内容のテキストページ <!DOCTYPE html> <html> <head> <title>memopad</title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body> <div id="container"> <div id="header"> <%= image_tag 'banner.gif', :size=>'450x100', :alt =>' 私の専用メモ帳 '%> <%= render :partial => 'shared/menu_bar' %> </div> <div id='left'> <%= yield %> </div> <div id='right'> <%= render :partial => 'shared/right_bar' %> </div> <div id= footer'> <%= render :partial => 'shared/footer' %> </div> </div> </body> </html> Container を定義し Header/left/right/footer の 4 つの領域を作った Shared のフォルダを作り menu_ba r などを記述するこれらの修正が終わらないとテストランはできません 1 ブロックずつ徐々に追加しテストランしながら進めてください

35 Container( コンテナ ) 内容全体を含むデザインを指定する内部に header left right footer の四つの構造を持たせる Leftに <%= yield %> で元々あった構造を持たせる

36 開発時の注意 menu_bar right_bar footer の三つの別ファイルを sharedの下に配置するこれらを書いてから全体の枠指定を修正しないとファイルが見つからないというエラーになりますまた <div> と </div> の入れ子構造に注意する

37 タイトルバナーの移動 bannar ファイルを head ブロックから body ブロック内部の head 部分に移動しました画面の表示するものは body ブロックにまとめるようにしました

38 HTML でのコメントアウト <%= render :partial => 'shared/menu_bar' %> でまだ menu_bar を記述していないためこの 1 行をコメントアウトします HTMLのコメントは  ですこのタグをコメントにするため  にしました

39 CSS( スタイルシート ) の指定 <div id="container"> では container という名前のスタイルを指定しましたスタイルはスタイルシート (Cascading Style Sheet) のファイルに記述しますスタイルシートは app assets stylesheets フォルダにあります今回は scaffold.css を修正します

40 対応している scaffold.css を修正 p 以下の内容をそのまま書いて見る div#container{ background-color: white; margin: 0 auto; padding: 5px 0 0; width: 800px; } div#header { padding-top: 4px; border-top: 4px solid white; } div#left { float: left; background-color: white; padding: 6px 6px 6px 0; } div#right { float: right; width: 228px; background-color: #e8ffff; } div#footer { background-color: white; border-top: 2px lightgreen solid ; text-align: center; clear: both; width: 100%; } div#menu_bar{ color: black; }

41 scaffold.css.scss 全体 body { background-color: #fff; color: #333; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 18px; } div#container{ background-color: white; margin: 0 auto; padding: 5px 0 0; width: 800px; } div#header { padding-top: 4px; border-top: 4px solid white; } div#left { float: left; background-color: white; padding: 6px 6px 6px 0; } div#right { float: right; width: 228px; background-color: #e8ffff; } div#footer { background-color: white; border-top: 2px lightgreen solid ; text-align: center; clear: both; width: 100%; } div#menu_bar{ color: black; } p, ol, ul, td { font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 18px; } pre { background-color: #eee; padding: 10px; font-size: 11px; } a { color: #000; &:visited { color: #666; } &:hover { color: #fff; background-color: #000; } } div { &.field, &.actions { margin-bottom: 10px; } } #notice { color: green; }.field_with_errors { padding: 2px; background-color: red; display: table; } #error_explanation { width: 450px; border: 2px solid red; padding: 7px; padding-bottom: 0; margin-bottom: 20px; background-color: #f0f0f0; h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px; margin-bottom: 0px; background-color: #c00; color: #fff; } ul li { font-size: 12px; list-style: square; } }

42 入力時の注意とお願いこの教材は一人でも多くの人がテストランに成功するようにテキストでプログラムをそのまま掲載していますこれをコピペしても動作はしますただ意味を考えないと理解にはつながらないので各自の責任で意味を考えてくださいまた PDF などで [00] などの制御文字が入りそれが見えないままエラーの原因となるケースが散見されます空白や改行を削除して空白や改行を入力し直すとこのエラーは回避できます

43 memos/index.html.erb と layouts/application.html.erb の関係 p Application.html.erb の <%= yeild %> p に他の index.html.erb の中身が展開される p memos は指定された URL p p p ここでは例えばなどのように看板の URL が入り application はその全体に共通するレイアウトとなる p デザインに一貫性を持ちたい部分を application に p サブ画面として個性を持たせ区別したいそのサブ画面のアイテムは memos/index.html.erb で記述を行う

44 メニューバーを入れてみる p 最初に修正の全体像を把握する (1) application.html.erb に 1 行追加この記述で menu_bar が展開される <%= render :partial => 'shared/menu_bar' %> (2) views に shared フォルダを作り _menu_bar.html.erb を書く (3) _menu_bar.html.erb で呼ばれている menu_link_to(item) メソッドを application_helper.rb 内に書く

45 サブフォルダの作成 Views の上で右クリックして新規フォルダと入力する shared というフォルダ名を入力する

46 menu_bar の呼び出し p views/layouts/application.html.erb に 1 行追加 p <%= image_tag の下 <%= render :partial => 'shared/menu_bar' %> p renderは htmlへの展開 p :partialで部分ファイル指定

47 _menu_bar.html.erb を作る p shared フォルダで右クリックし新規ファイルへ p ファイル名を入力する _menu_bar.html.erb 右クリック

48 _menu_bar.html.erb の入力 p 以下の内容を入力する

49 同じページのテキスト <% menu_items = [ { :link => memos_path, :name => ' 一覧表示 ' }, { :link => new_memo_path, :name => ' 新規追加 ' }, { :link => ' :name => 'ruby 公式サイト ' }, { :link => '', :name => ' 自分の課題ページ ', :disabled => true } ] -%> <div id="menu_bar"> <% menu_items.each_with_index do item, index -%> <% if index > 0 %> <% end -%> <%= menu_link_to item -%> <% end -%> </div>

50 最後に menu_link_to の記述 p application_helper.rb に n menu_link_to メソッドを記述する

$( item[:link] ) raw "<span class=\'current_page\'>" + item[:name] + "</span>" elsif$

51 同じページのテキスト記述 #!ruby # coding: utf-8 module ApplicationHelper end def menu_link_to( item ) end if current_page?( item[:link] ) raw "<span class=\'current_page\'>" + item[:name] + "</span>" elsif item[:disabled] raw <span class=\'disabled\'> + item[:name] + ( 準備中 )</span>" else end link_to(item[:name], item[:link]) PDF では \ current_page \ と \ disabled\ の両端の ( 引用府 ) が全角になっています注意してください

52 ここまでの画面 p タイトル画像とメニューバーを上下 2 分割のレイアウトで入れてみた

53 トラブルシューティングこんなのが出てしまった

54 全角文字によるエラーコンソール画面を参照しエラーのある行を探してくださいこの PDF の ( 引用符 ) は全角文字として表示されています全角文字によるエラーは場所により出方が異なります注意してメッセージを読んで下しさい

55 ファイルを準備しないでテストラン Right_bar を準備しないうちに引用した場合 <div id="right"> <%= render :partial=> 'shared/right_bar' %> </div> この部分を削るかコメントアウトすれば解決します

56 CSS とは! p 今更ながら CSS とは p Cascading Style Sheet p WEB ページを簡便に体系的に見やすく修飾するための簡易言語 p このページがわかりやすい p

57 CSS で ; を忘れるとこんなエラーが出ました ( まったく同じエラーになることは保証しませんが ) css ではなく html 側でエラーになっている点に注意して下さい

58 CSS を変えると

59 Right と footer _right_bar.html.erb 広告募集中とだけ書きました _footer.html.erb Copyright (C) by Ikuo.Kobayashi と書いてみました

60 今日の最終画面こんな感じです

61 フッタがおかしい! 思い通りの表示にならないエラーにならないミスは探すのが大変です

62 今日のレポート課題 p 今日はありません p どんな画面にデザインしたいか参考になりそう WEB サイトを検索したりデザインの雑誌を読んだりしてイメージを固めてください

63 きょうの授業を休んだ人 p 自分なりの画像ファイルなどを用意して CSS を組み込んで下さい p 欠席課題のレポートには application.html.erb のソースコードとそれ以外に実際に修正したファイル CSS のプログラム index.html.erb のプログラムなどを添付 ( テキスト貼り付け OK) し画面を貼り付けて報告して下さい p この欠席課題の提出があれば出席扱いに切り替えます

64 参考ページ p 超初心者のためのホームページ作成講座 p 超初心者のためのスタイルシート講座 p p スタイルシートレファレンス p

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます