html
下の黄色い部分の発音記号を、htmlで表示するにはどうすればよいのか? そんな時の備忘録 まず基本的な表記の方法について調べる、、 英語を学ぼう - 英文テキスト・発音記号変換 - 変換のルール そして、HTMLでの表記を探します。 発音記号を表示する - 戦…
/Applications/MAMP/conf/apache/httpd.conf を開く。 135行目 AddType application/x-httpd-php .php .phtml を書き換える。 AddType application/x-httpd-php .php .phtml .html 編集が終わったら、保存する。
復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな? <li>の余白は上につける</li>…
普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。 .backgroundImg{ background:url(img/bannar_background.PNG) no-repeat; margin-bottom: 50px; width:978px; height: 550px; margin: 100px auto;} 問題はない。 幅をpxで指定する。…
okazu-background いままではすべての画像をimgで処理していた。 実際には、背景として画像を配置しなくてはいけない場面もある。 画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い 「img…
okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ(縮小)ではなく、カラム落ちするように記述してみる。 フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…
全体の幅は960px 1列(カラム)の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。 すべての画像にmargin: 10pxをつける。 カラムにfloat leftをかける。…
スライスした画像をコーディングする。 縦3列、一列ごとに、ユニットごとにまとめる。 縦の列は<div>のクラスで、ユニットは<ul>でまとめる。 まずは整理整頓。 <body><div id="container"><div class="leftColumn"><h1 class="a1 size22"><img src="img/a01_logo.png"></h1><nav><ul class="a2"><li class="size11"><img src="img/a02_nav01.png"></li><li class="size11"></li></ul></nav></div></div></body></ul></div>
一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…
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>…
問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…
1200-1500 1300-1500 制作課題を作るのはいいけれども、htmlファイルがbrouser上でどのように表示されるのか、気になって仕方がない。 そこで、フレームチャートを作ってみた。 width: 1300px height: 1500pxとwidth: 1200px height: 1500pxの2つ。 おもに…
石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…
最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 4隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…
<ul class="nav">の<li>、そのなかにもう一つの<ul class="menu">を作る。 それだけだと、最初に表示されている「カテゴリー」の見栄えだけを変えられないから<div>を作る。 そうすれば、「カテゴリー」のbackground,height,borderを「プルダウン」の部分と変えられるし、なにかと便利。 クリックしてsl</div></ul></li></ul>…
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…
soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…
html <html lang=ja""><head><meta charset="utf-8"><title>無題ドキュメント</title><link rel="stylesheet" href="style.css"></head> <body><div id="logo">logo</div><div id="header">header</div> <div id="nav"><ul><li><a href="#">menu1</a></li><li><a href="#">menu2</a></li><li><a href="#">menu3</a><…</li></ul></div></body></html>