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

webかたつむり

ウェブデザインを勉強中

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>

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

現在時刻を表示する

DayとDate を間違えないなど…自分にとっての落とし穴が満載 インスタンス名を記述し忘れ。 セミコロン記述忘れ。 dayの記述、配列の箇所が怪しい。 var week=[......] でもいいのか、実験してみよう。 <script>var d=new Date();var year=d.getFullYear(); //yearで…

for文 練習 2 入力された数字 までの和を表示する

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>入力された数までの和を求める。</title><script>function summary(){var sum=0;var i;var num=prompt('好きな数字を入力してください。','半角数字');num=parseInt(num); for(i=1; i<=num; i++){ sum=i+sum}document.getEle…</meta></meta></head></html>

for文 練習 1

<html></html>に挟まれた、<script>の中にあるdocument.writeは、どうして<html>の中に記述されるのですか?ということが疑問だけれども… そうなるのだから受け入れる、以外にない。 細かなことを追求しても理解できない、から追求しない。そもそもポイントはそこにない。 というわけで</html>…

perseInt();

int=integer=整数 整数として解釈しなさい、ということ。

console.log(); について

なんとなくわかった。

リストからナビゲーション、再び

リセットして、何もしない状態。 float: left; を使って、li を横に並べる ul に overflow: hidden; li に float: left;をかけた状態。 display: inline-block で li を横に並べてみると… li に display: inline-block を指定した状態。 リセットを掛けた状…

border-radius: 50%;

http://ohtafelica.webcrow.jp/20160428/border-radius/ <html lang="ja"><head><meta charset="utf-8"><title>opacity</title><style>html, body, div{ margin: 0; padding: 0; line-height:1.0; font-family: "游ゴシック", YouGothic, sans-serif; /*reset ------------------------------------------------…</meta></head></html>

opacity and rgba

opacity <html lang="ja"><head><meta charset="utf-8"><title>opacity</title><style>html, body, div{ margin: 0; padding: 0; line-height:1.0; font-family: "游ゴシック", YouGothic, sans-serif; /*reset ---------------------------------------------------*/}#wrapper{ width: 1000px; margin: 30px au…</meta></head></html>