HTML+CSS
bg-color部分はIDなので自由な文字を設定できる。 0%と50%を同じ色にしないと急に色が変わったようになってしまうので、注意すること! rgbaによる透過指定もできる。 body{ background: #C6F; -webkit-animation: bg-color 10s infinite; /* --moz-animatio…
ポイントは2段表示になったとき3段目を横並びにする。 HTML <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1><img src="img/logo01.png" alt="美味しいおかず"></h1> <ul> <li></li></ul></header></div></div></body></html>
後から追記予定。知人のソフビフィギュア会社の一ブランドのサイトを制作した。仕様:モバイル対応(レスポンシブ) IE9以上より対応構想:約1週間 画像加工:約1日 コーディング:1週間wordpressでのテーマ制作は初めてでもろもろの仕様について理解してい…
注意点として画像は必ずPNG24で作る。 そのままではサイズが大きいため、圧縮する。 →https://tinypng.com/ body{ background-image:url(background.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed…
IE対策のため記述を追加。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>
朝イチでHTML5のペーパーテスト。 その後以前作成した「うちのにゃんこ」サイトをHTML5でマークアップした。うちのにゃんこ <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> </head> <body> <div id="container"> <header> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します!</p> </header> <nav> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <…</ul></nav></div></body></html>
HTML5での基本的な文法 HTML5ではDTDの指定が不要だが記述するのが一般的 大文字小文字でもどちらでも良い。metaタグは charset属性のみ <meta charset="UTF-8"> link要素・style要素・script要素の属性は不要 type属性は削除します 空要素の閉じ方 <br><br /> どちらの記述も可能。混在して</meta>…
レイアウトについて 世の中にあるWEBサイトのレイアウトは大きく分けて二つある。 グリッド フリー グリッド+フリーが多い。 グリッドからはみ出しを作って見せるのが重要。 positionは重なりを作る際に使うことが多い。 過去はtableや画像を使って無理に表…
本日は昭和の日のため授業は休みだった。 宿題となっていたPhoto Logサイトの続きを作成した。backgroundでカメラアイコンなどの位置を調節していたが、FirefoxとChromeで位置がずれることに気がついた。
Photo Logサイト制作Positionをいかに使うか。午前中に完成させるのは難しいらしい。Kitchen Club昨日作成したサイトについてのポイントアコーディオン部分はToggleを使うとスマート $(function(){ $('dt').click(function(){ $(this).next('dd').slideToggl…
朝一でjQueryテスト その後サイト作成課題CSS基礎演習 cafe67 ギャラリーをそれぞれの言語で作成 JavaScript jQuery ActionScript アコーディオンパネル演習 Kitchenware Club
relative:相対配置。要素の左上からの移動。領域は確保される。 absolute:絶対配置。親要素左上からの移動。領域は確保されない。親要素がある場合相対配置される。 fixed:実際にはjavascriptで書くことが多くCSSではあまり使わない。 ・演習課題
授業内5時間で画像制作からコーディングまで。キービジュアルにあわせて色彩計画を立てる。以下のサイトを作成した。 。
ハローワークに提出される月1のテスト及びコーディングテスト。コーディングテストが終了したものは、課題を制作。
横ナビゲーション floatを使うのが主流。使うのはfloat:left;のみ。 カラム落ちしやすいので注意すること。 floatを使う場合は必ずwidthを設定する。 今日の授業は、グローバルナブをいかに面として押しやすくするか。 ポイント liではなくli aにborderを指…
主なレイアウトの種類 教科書108ページ参照 固定レイアウト 可変レイアウト リキッドレイアウト フレキシブルレイアウト 可変グリッドレイアウト 等。 可変グリッドレイアウトについては、注意が必要。 情報の優先順位を付けるという意味において、効果がで…
ブラウザ(User Agent) 何を使うかによって得られる情報が変わる。 IEは使ってはいけない。 HTMLとは Hyper Text Markup Language 学習したHTMLの要素 ol 番号付きリスト ul 番号なしリスト dl 定義型リスト li:リストアイテム dt,dd
ブラウザについて 初心者はFireFoxを使う事。文法チェックがしやすいため。 HTML 検索エンジンはテキストを求めている。 文章がメインで、画像や表はオマケにすぎない。 WEBは皆が探している結論から書く事が重要である。 ゲシュタルトの法則 ゲゲシュタルト…