本日は…■HTML5の基礎●DTD ●section,header,nav…etc 文書構造を明確にするための要素 今までdivでid="container"としていたところを、sectionで書き換えられる ※HTML5ではDIVを文書構造のためには使わない ●blockレベルとinlineレベルの概念はナシ →divをaで…

本日は… ■PhotoLogサイト制作の続き …コメントともっと読むボタンなどが横並びになっている部分の処理について 1．floatで制作→ divで左右の要素をくるんで、それぞれにfloatをかける <div id="wrapper"> <h2><img src="●●●" alt="画像"></h2> <p class="date">2015 04 30</p> </div> cssでfloatを… #wrapper{ overflow: hidden; } h2 { float…

本日は…・昨日の続きと新たに２つ課題 ・午後はクライアントワークで使うgoogleスライドの話■昨日の３つめのサイト jsをtoggleで書き換えたので一個一個押していくと全部開く仕様に…。 一つ開いたらひとつ閉じる、をtoggleでできるか勉強中。 実際のサイト・…

本日は…■jQueryのドリル(回答は正誤不明。)1.jQueryは必ず「」から始まる…記号は？ →$2.テキストを書き換えるメソッドは？ →.text()3.HTMLを書き換えるメソッドは？ →.html()4.属性を書き換えるメソッドは？ →.attr()5.要素の中身をカラにするメソッドは？ →…

本日は…■カンプからスライスして画像制作→HTMLとCSSでサイト制作今回は教材としてloftのHP（旧）を使用 これをフォトショップでスライスしていく →このサイトはグリッドデザインなのでとてもスライスしやすい・Photoshopでルーラ表示、画像に合わせてガイド…

本日は… ■カフェのページを５ページ構成に ※一つのCSSで以下を行う ポイントは ①背景色を各頁で変えられるか ②各頁へのリンク ③billbordのあるなしでレイアウトが崩れないか ④ナビゲーションの擬似クラス ホーム。 ※※アンダーラインでずれるのを回避するため…

本日は… ・フォームの試験 ・Dreamweaverを使うために ：フォームの試験はタイトルを入れ忘れた事以外は…多分無問題。 ■Dreamweaverの使い方 ・サイト管理：任意フォルダ選択、名前をつける ・ウィンドウ：ワークスペースのレイアウト→コーダーに ・環境設定…

本日は… ■ナビゲーション用のスプライト画像を作る ■spriteが必要な理由 …何度も画像を読み込ませるとその早さは回線の速度に依存 一枚で済ませればCSS読み込んだ時点で終る @importは使わない ※linkで入れるなら２個までがベスト。大本のcommon.cssと個別に…

本日は… ■テスト返却 ・CSS = Cascading Style Sheets■Aiによるボタン作成 ・大切なのはアンチエイリアスを入れないこと ・borderは内側に設定(線の設定を変更する） ・ピクセルグリッドに整合に☑・レイヤーの重なり順を変えるときは、くれぐれも▲が小さいの…

本日は… テスト＆その応用 テスト内容は… ２カラム＆ナビゲーションつきのページモデルを作る。大体４０分ほどで完成。 <div id="container"> <div id="header"></div> <div id="nav"> <ul> <li><a href="#">nav</a><li> … </ul> </div> <div id=" wrapper"> <div id="content"></div> <div id="sidebar"></div> </div> <div id="footer"> </div> </div> という形で形成する。 (index00.html…

本日は… 一日フォームの話 午前はフォームの書き方、午後はGoogleフォームの作り方、運用の仕方 ・フォームはおおまかにお問い合わせ、アンケートと分類可能 ：お問い合わせはtextareaで作ることが多いが、悪意あるコードなどを送られる可能性を考慮して制限…

本日は… 午前中はCSSでliを横並びにしてナビゲーションを作る 午後はフォトショでいろいろ CSS編 ■liでつくる… ・ナビ以外にもパンくずリストなどを作れる →現在位置を教える ・クライアントは会社の説明を書きたがるが、閲覧者は何を取り扱ってるかの方に興…

本日は… 午前中はCSSで２カラムレイアウトの練習 ■CSSでページを作る… ・ページを作る前に手書きで、どこがどうというのを作る ：#header h1などかきこんでいく ・ヘッダーよりコンテンツをあげようと頑張る必要はない。そこにnavがあることはよくあること …

本日は… □サイトのレイアウトについて ・リキッドレイアウト ・フレキシブルレイアウト ・可変グリッドレイアウト …これらを複合的に使って、レスポンシブレイアウトなどが使われていたが、レスポンシブは潮流ではない →アップルが、スマホに恩恵が薄いとし…

本日は… まずタイピングテス卜で、DTDからスタイルシートのリンク、divをでheader、content、wrapper、その中のmainとsidebar、最後にfooterと作っていくという雛形を作るような、雰囲気。 きっちり十分でしめて合格。その後、宮沢賢治のいちょうの実を使っ…

本日は…CSSで1カラムサイトを作る Fsの初期設定 Aiで円形グラデとブレンド ・1コンテンツのデザインはスマホサイトで使う ：スマホサイトはファーストビューが大事 ：一見して何をすればいいかわからないサイトは閉じる ：勝手に動いてるサイトも閉じる（自…

本日は… ページを作る！ということだったので一日CSS！ ・仕事ではクラス指定を使う事のほうが一般的 ：CSSではクラス指定、JSなどではid指定だと思っていていい ：ただし会社ごとに指定やコーディングルールがあったりする ・ダブらないからidにしよう、と…

本日は… ・embed：head内にスタイルシートを書いていく方法 ・Font styleの指定 ：Mac用、Win用、汎用と書いていく。 ："Hiragino Kaku Gothic ProN", Meiryo, serif; →書いていく順番としては、頻度の少ないものから多いものへ。 ※デバイスフォントは基本he…

本日は…adobe bracketsをいれる プラグインも10個ほど導入…以下その内容 ・Code folding…dlなどが折りたためるようになる ・Brackets File icons…ファイルがアイコンで見れられるように ・Tubs -Custom Working or document toolbar…タブ表示できるように ・…