講義が3ヶ月目に入り、webサイト制作に入っています。 実在する動物病院のサイトを作ることになり、ラフスケッチからはじまって、今はコーディング段階に入っています。 最初は5ページの予定でしたが、7ページになりそうです。 今日は２ページ目、3ページ目…

スマートフォン用のメインコンテンツとフッターの設定編。 設定前はこんな状態です。 メインコンテンツの設定（スマートフォン用） ①テキストと画面の空きがなく、ギリギリなので空きをつくります。 PC用を想定するならば全体の幅は一定なのでpaddingを設定…

ヘッダーとナビゲーションの設定をレスポンシブWebデザイン（以下「レスポンシブ」）用に行います。 ＜ヘッダー＞ header ヘッダー部分はレスポンシブ用の設定は特になし。 ヘッダーテキストを中央揃えにする ロゴ上下の空きを24pxにする 「豆はカラダにいい…

あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。 次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイ…

「レスポンシブ」とか色々な呼び方がありますが正確な名前は「レスポンシブWebデザイン」。 ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。概念などはおいおい書いていくとして、今回はいきなりレスポンシブW…

タブパネルのテキストだけを改変（修正・更新）したい場合、予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。 テキストファイルのみを変更すれば、更新も簡単！ １、テキストの入っていない空のタブパネルを作りま…

Yaho!!の検索バーの真下に使われているようなタブパネルをつくります まず、HTMLとCSSを書きましょう ［HTML］ <div id="container"><ul class="tab"><li><a href="#tab1" class="selected">JavaScript</a></li><li><a href="#tab2">CSS</a></li><li><a href="#tab3">HTML</a></li><li><a href="#tab4">jQuery</a></li><li><a href="#tab5">PHP</a></li></ul></div>

GWからウェブサイトのラフデザインのスケッチを始めた。 デザイン力を上げるには有効な方法だと先生がおっしゃっていたからだ。 何気なく見ているウェブサイトにも、色々な発見がある。 ”このフォントは何だろう？webフォントかな？後で調べてみよう” ”きっ…

JavaScriptもjQueryも使わずに、CSS3だけで横のアコーディオンスライダーを作れます。 動きも非常に滑らかです。 HTMLとCSSの書き方はこちら→ Make an accordian style slider in CSS3

横方向に動くアコーディオンもjQueryでできます。今回はプラグインを使用しない方法です。 【HTML】 <dl class="accordion"><dt>1</dt><dd><div>コンテント</div></dd><dt>2</dt><dd><div>コンテント</div></dd><dt>3</dt><dd><div>コンテント</div></dd><dt>4</dt><dd><div>コンテント</div></dd><dt>5</dt><dd><div>コンテント</div></dd></dl> 【CSS】 .accordion { width: 600px; height: 300…

jQueryを使用してアコーディオンメニューを実現した課題サイト「Kitchen Club」です。 このサイトのポイント ナビゲーションがjQueryでアコーディオンメニューになっている ナビゲーションにマウスオンすると画像が変化する 商品画像のシャドウ １．アコーデ…

jQueryを使った課題サイトを作成しました。 このサイトのポイント rollover.js、LightBox.jsの２つのプラグインを使用 左サイドバーとメインコンテンツの重なり 画像だけではない、パーツの横並びが多い Photo Log １、ナビゲーションにrollover.jsを使用し…

jQueryには数多くのプラグインがありますが、プラグインがデフォルトで提供する設定をそのまま使用するのは練習段階です。 実際には自分のつくったページにプラグインを実装することが多く、そこで考慮すべきことはいくつかあります。 プラグインを動かすた…

strong要素 従来は「より強い強調」に使われていたが、HTML5より「重要なテキスト」を表す意味に変更になった b要素 従来は文字を太くするために使われていたが、HTML5より「キーワードや固有名詞等たと区別したいテキスト」を表す意味に変更になった その箇…

HTML5で追加された、フォーム関連の新機能・属性 placeholder属性 テキストボックス等に予めサンプルとして表示させておく文字 input要素とtextarea要素のみ、設定可能。値はテキストのみ placeholder="山田" autofocus属性 最初の入力項目に自動的にカーソ…

article要素 ブログ等独立した記事として成立する文章に使う ページ全体をarticle要素で囲み、body直下に置く使い方は誤り（Appleがかつて使用していた方法）body直下はheader要素しかあり得ない。この使い方でのアウトライン構造は、最上位の見出しがHTMLに…

文書構造を明確にするための要素 section要素 header要素、footer要素 nav要素 １． section要素 「コンテンツやテーマによってグループ分けをするための区切り」→文書構造上の意味のある文章を囲むために用いる メインコンテンツを入れる。必ず見出し要素（…

HTML5の特徴 HTML4.01とXHTMLの記述を混同しても構わない インライン要素・ブロック要素の分類の廃止 HTML5 API（Application Program Interface／アプリケーション開発のためのもの）が新たに追加・標準化 APIとは｜アプリケーションプログラミングインター…

サムネイルにカーソルを置くと横にスライドするFlashムービーをつくります。 スライドの早さは徐々に減速するようになります。 Photoshopで画像を用意 レイヤーを重ねて複数毎のメイン画像のファイル（ph01.psd）、サムネイル画像のファイル（ph01s.psd）を…