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

webかたつむり

ウェブデザインを勉強中

発音記号を表示する

下の黄色い部分の発音記号を、htmlで表示するにはどうすればよいのか? そんな時の備忘録 まず基本的な表記の方法について調べる、、 英語を学ぼう - 英文テキスト・発音記号変換 - 変換のルール そして、HTMLでの表記を探します。 発音記号を表示する - 戦…

MAMP で PHPファイル以外でも PHP を実行可能にする。

/Applications/MAMP/conf/apache/httpd.conf を開く。 135行目 AddType application/x-httpd-php .php .phtml を書き換える。 AddType application/x-httpd-php .php .phtml .html 編集が終わったら、保存する。

intern firstWeek review

復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな? <li>の余白は上につける</li>…

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で指定する。…

画像をスライスしてコーディングする その6

okazu-background いままではすべての画像をimgで処理していた。 実際には、背景として画像を配置しなくてはいけない場面もある。 画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い 「img…

画像をスライスしてコーディングする その5 - カラム落ちでRWD

okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ(縮小)ではなく、カラム落ちするように記述してみる。 フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…

画像をスライスしてコーディングする その3

全体の幅は960px 1列(カラム)の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。 すべての画像にmargin: 10pxをつける。 カラムにfloat leftをかける。…

画像をスライスしてコーディングする その2

スライスした画像をコーディングする。 縦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>

画像をスライスしてコーディングする その1

一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…

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

課題:06-10

問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

frame chart

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軸を下げて、ヘッダーに掛からないようになっている。大丈…

jQuery ドロップダウンメニュー

<ul class="nav">の<li>、そのなかにもう一つの<ul class="menu">を作る。 それだけだと、最初に表示されている「カテゴリー」の見栄えだけを変えられないから<div>を作る。 そうすれば、「カテゴリー」のbackground,height,borderを「プルダウン」の部分と変えられるし、なにかと便利。 クリックしてsl</div></ul></li></ul>…

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…

box-sizing

rwd えだまめ隊長

soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…

css 復習

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>

nav を作る手順をもう1回確認する / えだまめ

ヘッダーにナビゲーションを作る 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。 ボタンの部分はセンター揃え ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。 このパターンで作る手順を、パ…

rwd 2 column layout その3

全く同じ手順で、スマホ用。767pxが、ブレイクポイント。 overflow: inherit;がなにもしないデフォルトの状態。 @media screen and (max-width: 767px){ #container{ width: 98%; padding: 1%;}#header{ margin-bottom: 1%;}#nav{ margin-bottom: 1%;}#wrapp…

rwd 2 column layout その2

その1 のCSS に以下のコードを書き足します。 containerの幅はbodyに対しての割合。 containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりp…

rwd 2 column layout その1

色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。 #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。 (本日の気付き)#conta…

rwd - responsive web design その2

メディアクエリー @media screen and (max-width: px){}(どこにスペースを入れるのか細心の注意を払う)間違えると機能しない。 波括弧の中に、指定した条件の場合のスタイルシートを書く。 ブレイクポイントとは、スタイルを変えるポイントのこと。 今回の…

rwd - responsive web design その1

レスポンシブデザイン SmartPhoneにどう対応させるか。SPできちんと見えているか? モバイル版googleで検索すると、”スマホ対応”と表示されるサイトがある。 どうすれば、”スマホ対応”になるのか? googleのmobile friendly test に合格すればよい。 https:/…

アコーディオン 再び

手順の整理 1番先頭、以外のddは閉じる(hide) dtがクリックされたら クリックされた隣のddが閉じているならば すべてのddを閉じて クリックされた隣のddを開く 以上の5段階。 さらに、開いているddの上にあるdtの色を変える。 addClass, removeClassでcs…

ul でアコーディオン

html ここでのマークアップがすべてです。 クラス名の付け方にもセンスが必要です。 <div class="accordion"><ul class="nav"> <div class="category">家具・インテリア</div><ul class="menu"><li><a href="#">ソファ</a></li><li><a href="#">ベッド</a></li><li><a href="#">テーブル</a></li><li><a href="#">チェア</a></li></ul> <div class="category">ステーショナリー</div></ul></div>

html5 display: block;

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

html5 shiv

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

オブジェクト指向 ソフトウェア

Jeff Goodell : そもそもオブジェクト指向ソフトウェアとは何か、簡単な用語で説明していただけますか? Steve Jobs : オブジェクトとは人間のようなものだ。生きていて、何をどうすべきかという知識を自分の中に取り込み、物事を覚えていられるようにメモリ…

クリック 画像置換 課題:05-10

Q10 いろいろ調べて、記述してみました…が 画像ファイル名を任意に設定する方法はないものかと。 この場合は、ファイル名が0から始まるという縛りがあります。 CSSに cursor:pointer; を記述するとそれっぽいね。 CSSのリセットを忘れるとバチが当たるね。 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q</title></meta></meta></head></html>…

年月日 曜日の表示 課題:05-05

Q5 dを書き忘れてロスタイム。しょっちゅうやっているね… <script> var d=new Date();var year=d.getFullYear();var month=d.getMonth()+1;var date=d.getDate(); var dayIndex=d.getDay();var week=new Array('日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '…

7の倍数 判定 課題:05-03

Q3 論理演算子の整理。「and」=「&&」、「 or」=「||」、「 not」=「!」 比較演算子の確認。 「等しくない」=「!=」 余りを、列挙しているのはおしゃれでない。いい方法を聞く。 if , else if, else文は最後の波括弧に「;(セミコロン)」をつける。 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title></title></meta></meta></head></html>…

MouseOver 画像置換 課題:05-01

Q01 ポイントは、メイン画像にname属性をつけること。 id , class はCSSを使うようになってからのやり方、だそう。 name 属性は旧式のやり方。 要素の値を使うときは、name属性を使う。 onMouseOver="mainImg.src='abc.jpg`" ダブルクオーテーションの中は、…

document オブジェクト

HTML文書を、オブジェクト化したものが「document」 documentは、HTMLそのもの、だと思う。 document.getElementByID('#').innerHTML='aaaaa'とは document、HTML文書全体の中から getElementByID('#')、#という名前の 要素(element)を見つけて innerHTML…

for文 復習 2 かけ算 九九表

予想通りの結果。ここからどうするかを考える… なにを、どのように繰り返すのか、頭を整理するといいのだろう。 <script>var ifor(i=1; i<=9; i++){ document.write('<tr><th>'+i+'</th>'); var j for(j=1; j<=9; j++) { document.write('<td>'+i*j+'</td></tr>'); }</script>…

for文 復習1 構文の確認

for (どこから;どこまで;幾つずつ/あるいはどのように){なにをする} <script>var sum=0;for(i=1; i<=100; i++){sum += iconsole.log(sum);};</script> この位置にconsole.logを入れると,コンソールに表示するまでを繰り返すことになるから、こうなる。↓ 下のように、conso…

if else文 セミコロンは 要注意

最初の if から緑のセミコロンまでが1文、なのかぁ。 赤いセミコロンをなくしたら、うまくいった。 セミコロンはカンマの代わりではないのであります。ピリオドなんですね。 見やすくしようと(自分にとってですよ)波括弧の位置を変えてみたのだけれども、…

MouseOver で 画像が入れ替わる 2

HTML <body><div id="container"><p><img src="img/ph01.jpg" width="600" height="400" alt="ph01" name="mainImg"></p><ul><li><a href="#"><img src="img/s01.jpg" alt="s01" onMouseOver="mainImg.src='img/ph01.jpg'"></a></li><li><a href="#"></a></li></ul></div></body>