html5
普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。 .backgroundImg{ background:url(img/bannar_background.PNG) no-repeat; margin-bottom: 50px; width:978px; height: 550px; margin: 100px auto;} 問題はない。 幅をpxで指定する。…
backgroundにレイアウトした画像と、imgでレイアウトした画像の違いをきちんと認識したい。 なにが違うのか、自分で考えつくだけ列挙してみると… imgはhtmlに記述、一方background-imageはcssに記述。つまり、imgは本文構造上の意味を持っている。 imgにはal…
仕上がりの目標。 hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。 後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。 手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。 #photo、の中に（入れ子で）#captionを配置</div></div>…
valueの値を配列を使って文字列に変換する。 <html><head><meta charset="utf-8"><title>無題ドキュメント</title></head> <body>'男性','2'=>'女性','3'=>'その他');echo $value[$sex];}else{echo '</body></html>
送信側 <html><head><meta charset="utf-8"><title>questionaire06</title><style>table, th, td{ border: 1px solid #AAA; border-collapse: collapse;}</style></head> <body><form action="getquestionaire06.php" method="post"><table><tr><th>お名前</th><td><input type="text" name="your_name" ></td></tr></table></form></body></html>
listはinputしない。selectする。だからselect。 <form action="#" method="post"><p>年齢 <select name="age"></p><p><option value="" selected>以下から選択してください</option></p><p><option value="1">10代</p></option></p><p><option value="2">20代</p></option></p><p><option value="3">30代</p></option></p><p><option value="4">40代</p><…
radiobuttonは、1つ選択するときに使う。 記述の仕方は、checkboxとなにも変わらない。 <form action="#" method="post"><p><input type="radio" name="sex" value="1">male<input type="radio" name="sex" value="2">female<input type="radio" name="sex" value="3">else</p><p><input type="submit" value="送信"></p></form> labelをつければ、ラベル上にカーソルがあっても選…
チェックボックスは「複数選択可能」な場合に使うと便利だと思う。 label要素のはたらき。label（ラベル）とformのパーツを結びつける。 具体的には、labelを使わないと、ボタンやチェックボックスの上にカーソルがないと選択できないけれども、ラベルがある…
名前と、問い合わせ内容を送信するシンプルなフォーム。 inputにvalue属性をつけると、黒字で予め記入されてしまう。ユーザーが入力する時は、この「お名前」の文字を消してから入力することになる。 ユーザーの手間になるので、「value」でなく、「placehol…
概要HTML <input> 要素は、ユーザからデータを受け取るための、Web ベースのフォーム用のインタラクティブなコントロールを作成するために使用します。<input> の動作は、type 属性の値に応じて大きく異なります。 コンテンツカテゴリ フローコンテンツ、リスト化、サブミ…
HTMLの、<form>タグを使うと、ユーザーが入力したデーターをサーバーに送ることができます。 formでは少なくとも2つの属性を与えます。 ひとつは「action」。これで、データの送り先を指定します。 そして「method」。これでデータをやり取りする形式を決めます。 </form>…
article element ブログにおける単体ページ、単体の記事。 いま、授業で作ろうとしているのは、インデックスページ。 インデックスページに、各々の単体ページをまとめて表示することが目的。 そもそも単体ページは独立して存在しているわけだから、「articl…
「mp4」や 「webM 」videoを html5 video tagを使ってhtmlに挿入する。 video要素には属性値が指定できます。再生時のオプションになります。「loop」,「autoplay」,「muted」 <video autoplay loop muted > 読み込みが遅い場合に代わりの画像を表示させる「poster」属性も重要。 ソース</video>…
cotorier cafe pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。 もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。 display f…
まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…
What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (s…
html5 videoタグを使ってみる。 .mov形式ファイルだとうまくいかない。 media encoderでmp4に変換。 ファイルサイズは723Kb。概ね500Kb~1Mb程度がファイルサイズの目安らしい。上限の目安は3Mbくらいと、あるサイトには書いてあった。 imgフォルダを作って、…
ムービーファイル名物の変換作業が早速出てくる。 素性は分からないが、とりあえずこれで試す。 20160705追記：webM converter 使いましたが問題なしです。 ダウンロードするだけで、premier の出力に「webM」が追加になっています。
聞いたこともないファイル形式がある。 どんなものか汎用性も含めて調べる必要がありそうだ。 mpeg4が最適、だといいけれど…
HTML5でdisplay:block;を指定しないと、ブロックにならない要素。 そのうち悩むかもしれないので、メモ。 article aside dialog figure footer header main nav section リセットを掛けるときに、display: block; しておく。
そのうちに必要になった時のため… IEの問題を解決するための、JavaScript IE8対応
