ホームページの作成

Size: px

Start display at page:

Download "ホームページの作成"

ときなみつだ
7 years ago
Views:

1 HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language)は, 文章の部分を Tag(タグ)と呼ばれる命令で挟んでいくタグは <hoge>...</hoge> 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している属性としてさらに細かい設定を開始タグの中に書き込むことができる <hoge attribute = "value"> 属性は一つのタグに複数指定することができる.その場合は, 新たな属性との境目に半角のスペースを入れる開始終了タグの入れ子構造は決して崩してはならない HTML ファイルの作成 (1) エディタ(TeraPad)を起動する (2) ファイルに名前をつけて保存するその際,ファイル形式は HTML にする (3) 1 行目に<!DOCTYPE html> (4) 2 行目に<html>, 最終行には</html> (5) 3 行目に<head>, 4 行目に</head> ヘッダ情報は<head> </head>の中に加えていく (6) ヘッダ情報に以下の二行を記述する <meta charset= UTF-8 > 文字コードの指定 <title>タイトル</title> 文章のタイトルの指定 (7) </head>の下に<body></body>を加える 1

2 <!DOCTYPE html> <html> <head> <meta charset= UTF-8 > <title>タイトル</title> </head> <body> </body></html> ( 例 ) 本文の記述 1:ヘッダーとフッター, 構造をあらわすタグサイト上部をヘッダー, 下部をフッターと呼ぶヘッダーには,サイトがどこに属しているのかをわかるようにタイトルをつけるフッターにはコピーライトをつける <header> <h1>タイトル</h1> </header> <footer> (c) Copyright 2014 hogehoge </footer> 構造をあらわすタグ article aside figcaption figure header footer hgroup mark nav section time 記事の部分関連リンク figure 部分の脚柱画像や映像の範囲指定文書のヘッダー部分文書のフッター部分, 作者情報,コピーライトを記載見出しタグをグルーピングする文字列の中のハイライトナビゲーション文章のそれぞれの要素を囲む文字列が時間や日付の場合本文の記述 2: 見出しと本文本文は<body>タグで囲まれた部分, 上図 ( 例 )のの部分に書く.ここでいう本文とは, 主にテキスト( 文字 )と画像動画などからなりたっている以下, 使用することができるタグのうち最も基本的なものについて解説する 2

3 (1) 段落 <p> </p> 文章の本文には一段落ごとに<p>というタグをつける.このタグで囲まれたものがひとつの段落である. (2) タイトル <h1> </h1> / ~ / <h6> </h6> 見出しを設定すると,その部分は大きくあるいは太字で表示される. 見出しは<h1>~<h6>まであり,<h1>が一番大きな見出しである. (3) 同一コンテンツのマークアップ <article> </article> 同じ内容に属する部分を囲むことでマークアップするタイトルのタグ h1~h6 はマークアップされた内部ごとに 1 から始めることができるその他のタグ (1) テーマやコンテンツの区切り区切り線 <hr> 単独で用いられて, 終了タグを持たない CSS で, 長さ, 太さ, 水平方向の位置, 陰の有無を指定できる長さ width: 50%> : 画面の 50%の長さ太さ height: 5> :5 ピクセルの長さ align: center 中央に表示,left 左寄せで表示,right 右寄せで表示 (2) ハイパーリンクを張る <a href= > </a> ハイパーリンクを張ることによって, 文書と文書,あるいはウェブサイトとウェブサイトを結びつけることができる引用符で囲まれた箇所には,インターネット上の URL やファイル名を入れる属性で target = _blank と記述しておくと,リンク先が別のウィンドウで開く(_self / _parent / _top / ウィンドウ名 ) (3) 画像を挿入する <img src = hoge.jpg width = "360" height = "220" alt = " 風景 > img タグは開始タグ単独で用いられる width 属性で画像の幅,height 属性で画像の高さを指定できる. 別に指定しなくてもよいが,その場合,あらかじめ画像の大きさを調整しておく必要がある. 数値はピクセル(px) 単位で指定する.1px は約 0.3mm である. 幅と高さを両方指定すると, 元の画像の縦横の比率が変わる可能性があるので, 通常はどちらか一方だけを指定する. alt 属性では, 画像ファイルについての説明を記述しておく. 例えば, 川の写真を入れてあるならば, alt = 川の写真とでもいれておけ 3

4 ばよい.コンテンツの意味が重複しないように注意するこれは必須項目ではないが,ブラウザのテキスト読み上げ機能や画像の読み込みがなされなかった場合にユーザーのアクセシビリティがよくなるこれ以外に, 文章の部分に構造上の意味づけを行うためのタグが色々と用意されている. いろいろな構造に関するタグ (1) 強調 <em> </em> と,さらに強い強調 <strong> </strong> 強調された文字列はブラウザではイタリックやボールドで表示されるが, 実際にどのように表示されるかは,ブラウザによる. (2) 定義 <dfn> </dfn> (3) 引用 <q> </q>, 長い引用 <blockquote> </blockquote> (4) 引用元, 引用した作品名 <cite> </cite> (5) 署名連絡先 <address> </address> (6) メイルの送信 :<a href="mailto:(メールアドレス)"> </a> (7) コメントアウト <!- - コメント - -> コメントを記述する.このタグ内部のコメントは,ブラウザでは表示されない. (4) <div> </div> と <span> </span> このタグは単にテキストを領域指定するために用いる. 具体的な使い方は CSS の項を参照せよ. 箇条書き箇条書きを表すときには, 番号付きの箇条書きと番号を振らない箇条書きの 2 種類がある. (1) 番号付き箇条書き <ol> <li>hogehoge</li> <li>hogehoge</li> </ol> (2) 番号無し箇条書き <ul> <li>hogehoge</li> <li>hogehoge</li> </ul> 文章のタイトル(ヘッダ)と末尾 (フッタ)と自己完結したセクション (1) <header> </header> 4

(2) <footer> </booter> (3) <article> </article> 表の作成とその応用ウェブサイトにおいて表を作るには<table> </table>というタグを用いる.ウェブサイトにおける表組みの重要性は, 1. 表を出力する 2. ウェブサイトのレイアウトを制御するという二点にある.

5 (2) <footer> </booter> (3) <article> </article> 表の作成とその応用ウェブサイトにおいて表を作るには<table> </table>というタグを用いる.ウェブサイトにおける表組みの重要性は, 1. 表を出力する 2. ウェブサイトのレイアウトを制御するという二点にある. 表組のためのタグの使い方 <table border> <tr> </tr> <tr> </tr> </table> <td>(1, 1)</td> <td>(2, 1)</td> <td>(3, 1)</td> <td> (1, 2)</td> <td>(2, 2)</td> <td>(3, 2)</td> </table> <table> </table>:テーブルであることを示す <tr> </tr>:テーブル内の行であることを示す <td> <td>: 行のなかでの区切りセルを示すリンクタグと属性タグのなかには, 属性を使って値を指定するものがある. <tag attribute="value"> </tag> <hr>( 水平線を引く) align="center/left/right" ( 水平線の位置を指定 ) 5

6 noshade [ 影のない水平線を表示 ] width="number" [ピクセル単位かページ幅に対する割合 (%)で指定 ] <a> </a> [アンカー] href="url" (url のサイトにリンクを張る) name="text" (ドキュメントの一部に名前を付ける) target="name_blank/self/_parent/_top" (href と共に用いるターゲットのページが表示されるウィンドウやフレームを指定する) <figure> </figure> [ 画像動画の範囲指定 ] <img> src="url" ( 画像ファイルの指定 ) alt=" 画像の説明 " ( 画像の説明 ) height(width)= number ( 画像の高さと幅を数値で指定, 単位はピクセルか%) hspace= number ( 画像の左右の余白を指定, 単位はピクセル.) <table> </table> ( 表組み) align="left/right/center" (テーブルの配置を左寄せ/ 中央揃え/ 右寄せのいずれで指定する) background="url" ( 背景に用いる画像の url を指定する) border="x" ( 枠線の幅 ) cellpadding="x" (セルの罫線の内側から内容までのスペースをピクセル単位で指定する) cellspacing="x" (セル間のスペースをピクセル単位で指定する) vspace="x" (テーブルの上下の空白をピクセル単位で指定する) hspace="x" (テーブルの左右の空白をピクセル単位で指定する) <tr> </tr> (テーブルの行の区切り) align="left/right/center" bgcolor="#rrggbb/colorname" valign="top/middle/bottom/baseline" <td> </td>[<th> </th>] ( 行をセルに区切る) colspan="number" ( 複数のセルを横方向に結合する) rowspan= number ( 複数のセルを縦方向に結合する) height(width)="x / Y%" (セルの高さ) 6

7 CSS 現在のウェブサイト作成は,まず HTML によってサイトの構造を記述し,レイアウトは CSS(Cascading Style Sheet)でデザインするというのが主流となりつつある. 本来,HTML はネットワーク上のさまざまな環境下で情報を共有するために開発されたものであり,そして OS(オペレーティングシステム)などが異なる環境下では, 表示のされ方も異なることが考えられる.したがって,HTML ではウェブサイトの見た目を規定するような要素は使わないようにし, 文書の構造を定義することのみに用いよう,という最近の傾向は HTML の本来の精神にかなっているといえる. しかし近年,ウェブサイトは以前にもまして見た目やレイアウトが重視されるようになってきた.これはサイトの見た目が,そのサイトのアクセス数などに大きな影響を与える以上, 当然のことであろう.そこで,レイアウト情報は CSS(Cascading Style Sheet)というスタイルファイルによって規定することになった.CSS を利用することで, 従来では不可能であったより細かな調整が可能になったが, 他方, 未だ CSS に対応していないブラウザでは, 不可解なバグを発生させることがありうる. CSS の書式 CSS は, 要素 (selector)に対して属性と値という 2 つの要素を組み合わせる.この場合の要素 (selector) とは,1 単独のタグであったり,2 複数タグをまとめたものであったり,3 任意のウェブサイトの要素である. そして,その文法はどの要素に対して何を:どうするという順番で記述していく. 複数の何を:どうするを指定したい場合は,それぞれをセミコロンで区切って記述する.ただし, 改行は任意に行ってかまわない. 要素 { 属性 1: 値 ; 属性 2: 値 ;} また,CSS では /* */ がコメントとなる. CSS の記述の仕方は 3 種類ある. 1. タグに属性として記述する: <h1 style= fontsize:+2; color:red > 2. ページのヘッダ部分ボディ部分に記述する: <head> <style type= text/css ></style> </head> 3. CSS ファイルに記述するヘッダ部分に <link rel= stylesheet href= /hoge.css > と書き込む 7

8 hoge.css というファイルをつくりそこでスタイルを指定する. <div>と<span> <div>, <span> というタグは単に範囲を指定するという機能のみを担っている.<div> はブロック単位での指定に用いて,<span>はその前後で改行されない場合に用いる.これらは様々な用途に用いることができるが,その主な使用法の一つが CSS を用いてスタイルを指定するときの,スタイルの適用先を規定するということである. 具体的には次のような手順を踏むことになる. 1. タグに class 属性を指定して,クラスに分類する例 ):<div class= hoge1 > </div> 2. クラスに対してスタイルを指定する例 ):.hoge1 { 属性 : 値 :} div.hoge1 { 属性 : 値 ;} 但し,class 属性は上記以外のタグにも用いることができる. スタイルシートの記述例 a) 色,フォント, 配置の指定 body {color:#666666; ( 文字の色を# に) background-color:#ffffee;} ( 背景色を#ffffee に) h1 {font-size:40px; (フォントサイズを 40px) font-family: Comic Sans MS ; (フォントを指定 ) color:#666633; text-align:center; (テキストを中央揃え) font-weight:normal/bold/bolder/lighter/100~900; (テキストの太さ) font-style:normal/italic/oblique;} ( 普通 /イタリック/ 斜体にする) b)テキストの配置, 余白の設定 <div>, <p>, <h1>などに適用 p{text-indent:20pt; (テキストの段落の最初の一文字をインデント) line-height:1.5; (テキストの高さ, 行間を指定する) margin-top:30pt; ( 上部余白の設定 ) margin-bottom:30pt; ( 下部余白の設定 ) margin-left:30pt; ( 左部余白の設定 ) margina-right:30pt; ( 右部余白の設定 ) c) 水平線, 表の設定 hr {height:4px; ( 水平線の高さの指定 ) background-color:#33cc65;} ( 背景色の設定 ) table {width:90%; ( 表の幅をウィンドウの 90%に) 8

9 height:115px;} ( 表の高さを指定 ) td {padding:10px; (セルの上下左右を 10 ピクセル余白をとる) text-align:left;} (セルのテキストを左寄せ) 画像とテキストのそろえ方を指定する CSS の値 (<div>, <p>, h1>, <span>, <img> など) vertical-align: 値 ; 値 :baseline(イメージの下辺をテキストのベースラインにそろえる, top (イメージの上辺を行の上にそろえる), middle(イメージの中央を行の中央にそろえる), bottom(イメージの下辺を行の下にそろえる), 数値 (ベースラインからの位置を数値で指定 ), 割合 (ベースラインからの位置を割合で決定 ), float:left/right/none; (コンテンツの回り込みを指定 ) clear: 値 ; (コンテンツの回り込みを解除 ) 部分的にコンテンツの回り込みをしたくない場合にはこれを使う. 画像,コンテンツの周りに余白を入れる margin-top: 値 ; margin-right: 値 ; margin-bottom: 値 ; margin-left: 値 ; 値 = 数値 ( 単位 :cm, mm, in, pt, pc, px, em, ex) 割合 ( 単位 :%) 画像の表示位置 <figure> text-align:center; 背景と罫線のデザインをする CSS(<div>, <p> <h1>, <span> <img> <b> 背景色 background-color: 値 ; 背景色の境界線の角を丸くする border-radius: 10px; 背景色の境界線に影をつける box-shadow: 1px 1px 3px #aaaaaa; コンテンツと背景の間の余白 padding: 値 ; 数値と割合 9

10 背景画像を表示する(<div> <p> <h1> <body> <span> <img> <b> ) background-image:url; 背景に画像を表示させる.url では画像ファイルを指定する. 背景画像をスクロールしないようにする background-attachment:scroll/fixed; 背景画像を繰り返して表示しない backgroudn-repeat:repeat/norepeat/repeat-x,repeat-y; repeat 縦横に繰り返し no-repeat 繰り返して表示しない repeat-x 横にだけ繰り返し repeat-y 縦にだけ繰り返し背景画像の表示位置を指定 background-position: 値値横方向と縦方向それぞれ数値, 割合,left, center, right のいずれかで指定する. 罫線の種類 border-style: 値 dotted 点線 dashed 波線 solid 実践 double 二重線 groove 立体枠罫線の太さ border-width: 値 ; thin, medium, thick, 数値罫線の色 border-color: 値 ; テーブルとフォームのデザインをする CSS 罫線のスタイルを指定 border: 値値値罫線の種類, 太さ, 色の順で指定する 10

11 空セルの罫線を表示 table{empty-cells:show/hide;} セルとセルの間隔を調節 table{border-spacing: 値 / 割合 ;} テーブルやセルの大きさの指定 table {table-layout:fied; width: 値 ; ( 数値か割合 ) height: 値 ; ( 数値か割合 ) } 11

ホームページの作成

ホームページの作成 HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language) は, 文章の部分を Tag( タグ ) と呼ばれる命令で挟んでいくタグは ... 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している属性としてさらに細かい設定を開始タグの中に書き込むことができる