カテゴリー別アーカイブ: HTML5

1月8日(木) (実)Webプログラミング演習⑤講義内容

JavaScriptとPHP

php01
Webページがインターネットで閲覧できるのは、ファイルをWebサーバーにアップロードするから。
ユーザーがブラウザを通して、サーバーにアクセスし、ファイルを閲覧する形になっている。
JavaScriptはクライアントサイドスクリプトと呼ばれ、閲覧者のPC(正確にはIE、ChromeなどのWebブラウザ)で動作する言語。クリックしたら~する、などの、動きを作るのに適している。

対して、PHPはサーバーサイドスクリプトと呼ばれ、Webページをアップロードしたサーバーで動作する言語である。
ユーザーがリクエスト → サーバーで実行 → 実行結果を返す
という流れになり、実行時にユーザーの環境に左右されないというメリットがある。
また、ブラウザでソースコードを確認できないのが特徴。JavaScriptに比べ、秘匿性に優れている。
更にサーバーに沢山のデータを保存するデータベースとの親和性が高い。

Twitter、Facebookなどの有名なSNSや、ショッピングサイト等、大量のデータを扱うページでは、サーバーサイドスクリプトが用いられている。

フォーム

コード

お問い合わせフォームやアンケートフォームなどに使われるタグ。種類が沢山ある。
これらのタグを書いただけでは表示しかされず、実際に内容を送信するにはphpやjavascriptとの連携が必須である。

<form method="post" action="">
    <input type="text" name="name" value="お名前" >
    
    男性<input type="radio" name="gender" value="男性">
    女性<input type="radio" name="gender" value="女性" checked="checked">

    読書<input type="checkbox" name="hobby" value="釣り">
    スポーツ<input type="checkbox" name="hobby" value="スポーツ">
   
    <input type="email" name="mail_address" value="メールアドレス">
    <input type="email" name="mail_address" value="電話番号">
    <input type="date" name="date">
    <input type="url" name="http://">

    <select name="list">
        <option>項目1</option>
        <option>項目2</option>
        <option>項目3</option>
    </select>

    <textaera cols=""100" rows="10"></textarea>

    <input type="submit" value=" 送信 ">
    <input type="reset" value=" リセット ">
</form>

表示


男性 女性

読書 スポーツ




実際はtableタグやdlタグを使ってきちんと整理して書くことが多いです

formタグ
フォーム全体を囲うタグ。これがないとフォームとして機能しない。
また、以下のinput等のタグは、全てこの中に記述する必要がある。
属性値として、「method」と「action」が必須になる。
methodはデータの送信方法を指定し、値は「POST」か「GET」のいずれか。
使い分けもするにはするが、今はとりあえず「method=”POST”」と入力すればOK。

actionは、送信ボタンを押した後の飛び先を設定する(確認画面や送信完了画面)。
どこにも飛ばさない時は、「action=””」と表記する。

inputタグ
様々なデータを取り扱う、フォームの中で使えるタグ。
type属性の値によって様々な振る舞いをする特殊なタグでもある。
必須の属性としてnameがあり、これには任意の名前を付けることが出来る。
基本的には半角英数字で入力する。
また、type値によってvalue属性の内容も変わる。

type 用途 valueの扱い
text 汎用的な、短いテキストを入力できるエリア 初期表示
radio ラジオボタン。いずれか一つを選択する。同じ名前尾付けたものがグループになる。
checked=”checked” を属性として入力すると、その項目に初期状態でチェックが入る。
選択された時に送信されるデータ。同じグループの選択肢にはる。
checkbox 複数の項目尾選択する 選択された時に送信されるデータ。同じグループの選択肢に貼る。
email,tel,date,url,他 HTML5から増えたタイプ。本来プログラムで判定しなければいけなかったエラー文を判定してくれるようになった。
古いブラウザだと対応が微妙な場合があるのと、表示の仕方(特にdate)がブラウザによって異なるので、使用はケースバイケース。
type=”text”と同じ
submit フォームに入力した内容を送信するボタン。formタグにactionが指定されていると、そこに跳ぶ。 ボタンの上に表示される文字。
reset 入力したデータを消す。 subimitと同じ。
button 特に何も起こらないボタンを作るタグ。昨日はJavaScript等と合わせて使われることが多い。 subimitと同じ。
select,option
選択式のボックスを表示するタグ。
selectタグを親として、項目ごとにoptionタグで囲む。
紛らわしいが、inputタグではないので注意。
selectタグにname属性、optionタグに送信したいデータを入力する。
textarea
テキストを入力するボックス。inputのtextと違い、複数行のテキストが入力できる。
こちらもinputタグではないので注意。
属性としてcolsとrowsがあり、colsは一行の文字数、rowsは行数を指定できる。

11月25日(水)HTML5・CSS3演習⑥ 講義内容

本日使用したタグ・プロパティ

HTMLタグ

  • address
  • video
  • audio

CSS疑似要素

  • :before
  • :after

YouTube動画の張り方

Webページには、youtubeの動画を貼り付けることも出来る。
張り方の動画がyoutubeにあったので張ってみた。

<iframe width="560" height="315" src="https://www.youtube.com/embed/kfvxmEuC7bU" frameborder="0" allowfullscreen></iframe>


リンク先:動画と再生リストを埋め込む


clearfix

clear:both の今の書き方
詳しくは以下の記事に書いています。
float、clear、そしてclearfix


HTMLタグ

<address></address>
連絡先や問い合わせ先を囲うタグ。住所を囲うだけのタグではないので注意。
メールアドレス等の、サイト制作者の連絡先を囲う。
<video></video>
videoタグはHTML5で登場した新しい要素。動画を張ることが出来る。
もともと、動画はyoutubeなどの動画サイトを経由しなければ、サイトに張ることが出来なかった。
しかしその方法だと、YouTube内の動画が削除されてしまったり、サーバーエラーで見られないときに、自分のページの動画も見られなくなってしまう。
また、企業の作った動画などは、動画サイトにアップしたくないケースも考えられる。
そこで、videoタグが登場。アップロードした動画を、タグだけで表示できるようになった。

<video controls poster="images/caption.jpg" loop>
    <source src="movies/sample.mp4">
    <source src="movies/sample.flv">
    <source src="movies/sample.ogv">
</video>


動画にはいくつかの形式があり、ブラウザによって読めるファイルが違ったりするので、sourceタグを使っていくつか指定する。
上から読んで、読めない場合は自動的に下のものを読んでいく。

videoタグの属性
controls コントロールバーを表示
poster=”画像パス” 初期表示画像を設定。パスを入れる
loop 繰り返しするかどうか。loop=”数値”でループ回数を指定できる
autoplay 自動再生
width 動画の幅
height 動画の高さ
<audio></audio>
videoタグの音楽版。こちらもHTML5から
音声ファイルの再生が出来る。使い方はvideoとほぼ同じ。

<audio controls>
    <source src="music/sample.mp3">
</audio>

音が出ます。音量に注意してください

今回のサンプルファイルは、
動画素材はこちらから、
音楽素材はこちらから、
それぞれお借りしました。他にも「動画 フリー」「音楽 フリー」などで検索すると、サンプルのダウンロードサイトが出てきます。利用規約等をよく読んで使ってみてください。
もちろん画像もですが、動画、音楽の著作権には特に気を付けましょう!
仕事で使うときにはクライアントから提供される事が多いですが、個人利用時は自己責任になります。


CSSの疑似クラス

:before
要素の直前に何かを書き加える擬似クラス。
beforeとafterは一つの要素を擬似的に出現させるので、擬似要素とも呼ばれる。

CSS

/*list横の点を無効化*/
ul.bf li{
    list-style-type:none;
}

ul.bf li:before{/*liタグそれぞれの直前に要素を追加*/
    content:"▼";/*文字を読み込むプロパティ*/
    color:#dd8fbb;
    font-size:0.8em;
}

HTML

<ul class="bf">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
</ul>

表示

  • リスト1
  • リスト2
  • リスト3
  • リスト4

リストの手前にピンクの三角形を表示させた。
見出しタグのデザインなどにもよく使われる方法の一つ。

:after
要素の直後に何かを書き加える擬似クラス。

CSS

li.pickup:after{
   content:"pickup";
   color:#f00;
   border:solid 1px #f00;
   padding:5px;
}

HTML

<ul class="bf">
    <li class="pickup">リスト1</li>
    <li>リスト2</li>
    <li class="pickup">リスト3</li>
    <li>リスト4</li>
</ul>

表示

  • リスト1
  • リスト2
  • リスト3
  • リスト4

after要素をつけたクラス、「pickup」がついた要素の後にだけ、装飾された文字が表示される。

11月20日(金)HTML5・CSS3演習③ 講義内容

本日使用したタグ・プロパティ

HTMLタグ

  • article
  • section
  • header
  • footer
  • aside

CSSプロパティ

  • border
  • box-sizing

html5で追加されたタグ

xhtmlまでは、レイアウトのために意味のない「div」タグを使用してきた。これはレイアウトの為に該当するタグが他になかった為である。
つまり、なんらかの意味のある纏まりであるグループであるにも関わらず、そこに意味を持たせることができなかった。
htmlはマークアップするための言語になるので、意味を持たせたい。
そのために、最新バージョンのHTML5では、様々な意味を持たせるためのタグを作成した。
ブロックごとに意味を持たせる事で、HTMLはより詳細かつ確実に検索エンジンに読み込まれるようになった。

プラスポイント

上述のように、様々なタグが用意されたが、今でも意味づけできない部分は存在している。
例えば、サイドバーやメインコンテンツを包むwrapなどは、意味のつけようがない部分である。
その為、使用頻度は減ったものの、divは変わらず使われている。


タグ解説

<article></article>
記事を意味するタグ。
これの有無で、ページの核となる記事(メインコンテンツ)があるかを判別するので、非常に重要。
記事はある程度まとまった文章なので、画像のギャラリーや表しか入っていない部分に入れるのは望ましくない。
<section></section>
セクションを表すタグ。
扱いが難しいともっぱら評判(?)のタグ。記事ではないが、重要なまとまり(表やコンタクトフォーム、画像ギャラリーページなど)を纏める他、記事の中の章分けに使用する。
<header></header>
ページトップや、記事の見出しを表すタグ。
Webページには、ページの一番上に、全ページ共通のエリア(ヘッダー)がある事が多い。
他にも、記事毎に(ブログで言えばタイトルや投稿時間が該当する)ヘッダーが付くことがある。
そういった部分を纏めるためのタグである。
<footer></footer>
ページ末尾や、記事のフッターを表すタグ。
ヘッダー同様、ページの一番下に、全ページ共通のエリア(footer)がある事が多い。
他にも、記事毎に共通の末尾が付くことがある。
そういった部分を纏めるためのタグである。
<aside></aside>
補足エリアを表すタグ。
記事内における、本筋とは関係のない部分、余談や補足などに使用されるタグ。
他のものほど使う機会は多くないが、覚えておくとより正確なマークアップができる。

プロパティ解説

border
枠線をつける為のプロパティ。
四辺別々に枠をつける、線の種類や色をかえるなど、値が非常に多いので、がんばって覚えよう。

.wakusen{
   border:thick solid #f00;
}
.wakusen2{
    /*四辺の線一つ一つに線を引くこともできる*/
    border-top:1px dotted red;         /*幅1pxの赤い点線*/
    border-right:2px dashed orange;    /*幅2pxのオレンジ破線*/
    border-bottom:4px groove yellow;   /*幅4pxの黄色の装飾線*/
    border-left:8px solid green;       /*幅8pxの緑の直線*/
}
枠線は四方の好きな方向にだけ表示することが出来る。
方向を指定しないときは四辺全てにborderがつく。
左側だけ線をつけたりなど、色々なデザインに使用される。
このエリアには、上記のクラスwakusen2を適用させてみた。
種別 プロパティ値 説明
線幅 thin 細線
medium 通常線
thick 太線
数値px pxで指定もできます
線の種類 solid 直線
dotted 点線
dashed 破線
groove 装飾線
線の色 色名 or カラーコード or RGB colorやbackgroundと同じ指定です
box-sizing
CSS3で登場した、新しいCSSプロパティ。
borderやpaddingをそのまま使うと、それに応じて要素が太ってしまう。その為、以前は幅などを合わせるのに、一々余白や枠線の分を計算をしなければならかった。そこで最近、box-sizingというプロパティが登場。borderとpaddingが内側に含まれるようになり、計算が非常に楽になった。
ただし新しいプロパティなので、古いブラウザ対応の仕事(IE7以前対応の時。今はほとんどなくなっている)があった場合は使えないことに注意。

content-box 初期設定。paddingや余白が、要素の幅や高さの外側につく
border-box paddingや余白が、要素の幅や高さの内側ににつく

余白・ボーダー無し

これの幅が300px

ボーダーのみ余白無し

box-sizingなし

幅:300px + border(左右に8px)= 316px

borderの分だけ太る

余白・ボーダーあり

box-sizingなし

幅:316px(border込み) + padding(左右に10px)= 336px

padding、bordeの分太る

余白・ボーダーあり

box-sizing:border-box;

300pxの枠内に、borderとpaddingが入る

CSSのルール

header h1{ color: red;}         /*ヘッダーの中のh1タグにだけ適用*/
#main p{ margin-bottom:0.5em; } /*id="main"の中のpタグにだけ適用*/
#main .text{ color:red } /*idの中のclassへの指定も出来る*/

これまでCSSは、特定のタグやidを直接書いて指定してきた。
しかし単にタグだけを指定すると全ての同じ要素の見た目が変わってしまうし、かといって、一々クラスをつけるのも大変な作業である。
そこで、CSSには色々な指定の仕方が用意されている。
今日使ったのは「ある要素の中の、特定の要素」に指定する方法。
セレクタを半角スペースで区切ると、○○の中の××という指定が出来る。
他にも沢山便利な指定方法がありますので、後日まとめて紹介します。

CSSのコメントアウト

/*CSSのコメントアウト*/

CSSのコメントアウトはHTMLと違い、/**/でできます。
他のプログラムなどでも使われる汎用的なコメントアウトです。