webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

課題

php BMI 判定プログラム テキスト課題

'm' to the 'n'th power→mのn乗 pow(m,n); <html><head><meta charset="utf-8"><title>無題ドキュメント</title></head> <body></body></html>

php inch converter テキスト課題

インチをセンチに変換するプログラムの課題。 formと結果の表示をひとつにまとめる。 赤字の箇所、変数の表示方法に問題があって手こずる。 2回目に記述した時は、inputをinsertにして気づかないまま時間を浪費。 float, int 実数と整数の表記 $inch=floatva…

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

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

高さの指定

pc用に高さを指定してあった、<header>をスマートフォン用に、高さの指定を解除するときにどうすればよいか? dreamweaverでは、autoとinheritの2種類が選択肢として候補にあがる。 値として、取れるものを調べてみる。もっと前にやるべきことだよね… いろいろあり</header>…

課題: コトリエカフェ その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では、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

制作実習 wire frame

http://ohtafelica.webcrow.jp/clogoWireframe/ 頭のなかにあるアイディア、思いつき、なんでもいいから整理してみようと思う。 具体的な図面に起こすだけで、実行不可能、あるいは思っていたほど面白くないアイディアは多いものだ,と気がつく。 まずは「た…

frame chart

1200-1500 1300-1500 制作課題を作るのはいいけれども、htmlファイルがbrouser上でどのように表示されるのか、気になって仕方がない。 そこで、フレームチャートを作ってみた。 width: 1300px height: 1500pxとwidth: 1200px height: 1500pxの2つ。 おもに…

課題:06-09

問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが2つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…

演習 : 石垣島観光ガイド やりなおしとレスポンシブ対応

石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…

css について整理したい

background-size contain、は縦横の比率を維持したまま(スクイーズはかけないで)画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま(スクイーズはかけ…

演習 : 石垣島観光ガイド

最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 4隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…

課題:06-08

問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか?…

アキュートアクセント の入力方法 "café"の入力

Make sure that "Number Lock" is switched on. Don't release the "Alt" key until after you've typed the alt code. 自宅のPCにはテンキーがないので、numlockして、altキーを押しながら、233つまりKLLのキーを押す。 無事にアキュートアクセント付き…

web writing

web writting - 中に書かれている言葉の価値の追求 人々は自分の目的を達成しようとするときに、どのようなキーワードで検索するのか。 web は結論から記述する。行間、言外はない。 キーワードで、伝えたい事が正しく伝わるのか。 サイトの title 、h1、bod…

クリック 画像置換 課題: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-08

Q8 「else if」を「if else」と書いてロスタイム。 if文は記述の方法を変えたほうがいいのかもしれない。 <html lang="ja"><head><meta charset="utf-8"><title>Q8</title><script>function kuji(){ var rdm=Math.random();if(rdm<0.25){ document.getElementById('ans').innerHTML='本日の運勢は、大吉です。';}else if(rdm>=0.2</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`" ダブルクオーテーションの中は、…

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

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>

MouseOver で 画像が入れ替わる 1

メイン画像の大きさでファイルを新規作成。今回は960px*640px。 5枚の写真を別々のレイヤーに配置する。 各々のレイヤーの名前を、ph01-ph05と割り当てる。 一度この状態で保存。 「ファイル」「スクリプト」「レイヤーをファイルに書き出し」 次にサムネイ…

Math.random 課題のメモ

どこがうまくいったのか? よくわからないので、振り返る時のために保存しておきます。 <script>function dice(){var rdm=Math.random();var dice=Math.floor(rdm*6+1);var img='<img src="img/'+dice+'.jpg" width="61" height="61">';document.getElementById('ans</script>…

テストの直し

http://ohtafelica.html.xdomain.jp/biz/ フッターのナビゲーションを修正 li の幅を揃えないで、文字の両サイドの空きを揃えるように修正。li a にdisplay: block;しない。文字の左右にpadding を指定。 要素検証して、ul に必要な幅を計算する。各々の、li…

演習 卵料理 カフェ

卵料理カフェ 道は険しい。時間がかかりすぎだ。きょうはこれまで。 p要素は2次元空間でどのように広がっているのか?まだわかっていない.… ミスタイプでハマるケースが多すぎる。 html, body, h1, h2, h3, ul, li, footer{ margin: 0; padding: 0; line-he…

2column layout 演習

2column layout floatするには幅が必要。 大きいブロックをフロートさせて、小さなブロックは成り行きにした。 <p>はパラグラフであることを思い出した。 段落と段落の間は、p{ margin-bottom : 16px;}、のようにまとめて指定すると楽。 imgの周囲にマージンを</p>…

1column layout 演習

1column layout 面として、幅があるから左右の位置指定ができる、アタリマエのことをもう一度確認する。 #containerの幅を指定すれば、bodyに対して左右の位置を決められる。例えば、margin: o auto;といった具合に。 1カラムの場合は、#containerの中央に…