webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

background image or img その2

普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。 .backgroundImg{ background:url(img/bannar_background.PNG) no-repeat; margin-bottom: 50px; width:978px; height: 550px; margin: 100px auto;} 問題はない。 幅をpxで指定する。…

background image or img その1

backgroundにレイアウトした画像と、imgでレイアウトした画像の違いをきちんと認識したい。 なにが違うのか、自分で考えつくだけ列挙してみると… imgはhtmlに記述、一方background-imageはcssに記述。つまり、imgは本文構造上の意味を持っている。 imgにはal…

responsive 全画面表示

仕上がりの目標。 hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。 後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。 手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。 #photo、の中に(入れ子で)#captionを配置</div></div>…

form 課題2

valueの値を配列を使って文字列に変換する。 <html><head><meta charset="utf-8"><title>無題ドキュメント</title></head> <body>'男性','2'=>'女性','3'=>'その他');echo $value[$sex];}else{echo '</body></html>

form 課題1

送信側 <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>

form04 list

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><…

form03 radio

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をつければ、ラベル上にカーソルがあっても選…

form02 checkbox

チェックボックスは「複数選択可能」な場合に使うと便利だと思う。 label要素のはたらき。label(ラベル)とformのパーツを結びつける。 具体的には、labelを使わないと、ボタンやチェックボックスの上にカーソルがないと選択できないけれども、ラベルがある…

form 01 textarea

名前と、問い合わせ内容を送信するシンプルなフォーム。 inputにvalue属性をつけると、黒字で予め記入されてしまう。ユーザーが入力する時は、この「お名前」の文字を消してから入力することになる。 ユーザーの手間になるので、「value」でなく、「placehol…

html input element

概要HTML <input> 要素は、ユーザからデータを受け取るための、Web ベースのフォーム用のインタラクティブなコントロールを作成するために使用します。<input> の動作は、type 属性の値に応じて大きく異なります。 コンテンツカテゴリ フローコンテンツ、リスト化、サブミ…

html form element

HTMLの、<form>タグを使うと、ユーザーが入力したデーターをサーバーに送ることができます。 formでは少なくとも2つの属性を与えます。 ひとつは「action」。これで、データの送り先を指定します。 そして「method」。これでデータをやり取りする形式を決めます。 </form>…

article element, time element, datetime attribute

article element ブログにおける単体ページ、単体の記事。 いま、授業で作ろうとしているのは、インデックスページ。 インデックスページに、各々の単体ページをまとめて表示することが目的。 そもそも単体ページは独立して存在しているわけだから、「articl…

video element

「mp4」や 「webM 」videoを html5 video tagを使ってhtmlに挿入する。 video要素には属性値が指定できます。再生時のオプションになります。「loop」,「autoplay」,「muted」 <video autoplay loop muted > 読み込みが遅い場合に代わりの画像を表示させる「poster」属性も重要。 ソース</video>…

課題: コトリエカフェ その2

cotorier cafe pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。 もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。 display f…

課題: コトリエカフェ その1

まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…

jQuery plugin "fancy Box" 1

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>

html5 videoタグを使ってみる。 .mov形式ファイルだとうまくいかない。 media encoderでmp4に変換。 ファイルサイズは723Kb。概ね500Kb~1Mb程度がファイルサイズの目安らしい。上限の目安は3Mbくらいと、あるサイトには書いてあった。 imgフォルダを作って、…

webM Ogg converter

ムービーファイル名物の変換作業が早速出てくる。 素性は分からないが、とりあえずこれで試す。 20160705追記:webM converter 使いましたが問題なしです。 ダウンロードするだけで、premier の出力に「webM」が追加になっています。

html5 video format サポートされているビデオフォーマット

聞いたこともないファイル形式がある。 どんなものか汎用性も含めて調べる必要がありそうだ。 mpeg4が最適、だといいけれど…

html5 display: block;

HTML5でdisplay:block;を指定しないと、ブロックにならない要素。 そのうち悩むかもしれないので、メモ。 article aside dialog figure footer header main nav section リセットを掛けるときに、display: block; しておく。

html5 shiv

そのうちに必要になった時のため… IEの問題を解決するための、JavaScript IE8対応