WEBデザインの学習 | ナイアルラトホテップ

このブログは池袋にあるフェリカテクニカルアカデミーで学んだ学習過程を記録するためのものです。HTML+CSS及びJavaScript、jQueryなど。

HTML5

HTML+CSS

HTML5での基本的な文法

  • HTML5ではDTDの指定が不要だが記述するのが一般的
<!DOCTYPE html>

大文字小文字でもどちらでも良い。

metaタグは charset属性のみ

<meta charset="UTF-8">

link要素・style要素・script要素の属性は不要

  • type属性は削除します

空要素の閉じ方

<br><br />

どちらの記述も可能。混在していても良いが統一するのが望ましい

HTML5では柔軟な書き方が許可されている

  • 属性値の「" "」を省略できる
  • 終了タグをを省略できるが書くの一般的

コンテンツモデル

section要素

  • sectionこそがHTML5の命
  • ネストして使う
  • 必ず見出しが必要
  • コンテンツやテーマによってグループ分けしたセクション区切り
  • レイアウトの枠はdivを使用するのが適切

article要素

  • ブログなどの記事に使う
  • 独立した記事として成立し、どこに持っていっても良い要素
  • ページ全体を囲ってはいけない

aside要素

  • 補足的なコンテンツにつかう
  • テーマに関連しているが、主テーマではないもの
  • サイドバーのようなものは入れても良い

nav要素

  • 主要なナビゲーションに使う
  • セクショニングコンテンツなのでアウトラインを明確にするためには見出しを入れることもある

header要素・footer要素

  • body直下は必ずheader要素
  • header,footerに使用する
  • アウトラインに影響を与えない

フォームの新属性

  • placeholder属性
  • autofocus属性
  • required属性
  • type="email"
  • type="tel"

サイトデザインについての説明+flashカルーセル

HTML+CSS Flash WEB一般

  • レイアウトについて

世の中にあるWEBサイトのレイアウトは大きく分けて二つある。

  • グリッド
  • フリー

グリッド＋フリーが多い。
グリッドからはみ出しを作って見せるのが重要。 positionは重なりを作る際に使うことが多い。
過去はtableや画像を使って無理に表示した。

横並びの見せ方

f:id:whitexblack:20150430111012j:plain

先日のPhotoLogサイトの細かい横並びはdivで囲ってfloatで左右にしてもいいが下記のタグを使うのも良い。

  • inline-box
  • inline-table

WEBは横並びをいかに上手くするか

ダウンロードしたもの

  • 960Grid System
  • bootstrap grayscale

ドロップダウンメニューはモバイルに向かないし、PCでももうやらないほうが良い。

モバイルで本を読むときは長い巻物だと考える。（めくるアニメーション等は絶対に入れてはいけない。）

最近のサイト構成

  • 背景画像を大きく使う。
  • はみ出たように作る
  • ナビゲーションもつなげるのが今風

Flashによるカルーセル

ポイント

  • Photosopデータを読み込む時基準を左上にする
  • 最後にマスクを作る。作らないとブラウザの幅を広げたときに横の画像も見えてしまう。

var base:Number;
var startEdge:Number = 0;
var rate:Number = 7;

this.s01_btn.onRollOver = function() {
	base = main_mc.ph01_mc._x;
}
this.s02_btn.onRollOver = function() {
	base = main_mc.ph02_mc._x;
}
this.s03_btn.onRollOver = function() {
	base = main_mc.ph03_mc._x;
}
this.s04_btn.onRollOver = function() {
	base = main_mc.ph04_mc._x;
}
this.s05_btn.onRollOver = function() {
	base = main_mc.ph05_mc._x;
}
this.main_mc.onEnterFrame = function() {
	main_mc._x -= (main_mc._x + base-startEdge)/rate;
}

サイト制作課題＋プレゼンテーション

jQuery JavaScript HTML+CSS プレゼンテーション

Photo Logサイト制作

Positionをいかに使うか。
午前中に完成させるのは難しいらしい。

f:id:whitexblack:20150430111012j:plain

Kitchen Club

昨日作成したサイトについてのポイント
アコーディオン部分はToggleを使うとスマート

$(function(){
  $('dt').click(function(){
    $(this).next('dd').slideToggle('fast')
  });
});

JavaScriptのギャラリー

  • name属性は古いのでhtml5ではidにする。
  • onmouseoverは今は小文字で書くことが多い。

GoogleDriveを利用したプレゼンテーション

  1. 表紙　第一回プレゼンテーション　年　月　日
  2. 制作するサイトについて　店舗会社情報
  3. 既存のサイトがある場合は紹介する
  4. サイト制作の目的（仕事のようにクライアントの言うことを聞くのではなく、ポートフォリオに載せて就職に活かすのが重要）
  5. ターゲットユーザー　年齢、性別。
  6. サイトのコンセプト
  7. 素材、画像
  8. サーバー、ドメイン
  9. 検索キーワード
  10. サイトマップ
  11. 参考サイト

手書きでのレイアウトもあると良い。

プレゼン：連休明け
発表：5月末から6月頭

positionについて

HTML+CSS

relative：相対配置。要素の左上からの移動。領域は確保される。

absolute：絶対配置。親要素左上からの移動。領域は確保されない。親要素がある場合相対配置される。

fixed：実際にはjavascriptで書くことが多くCSSではあまり使わない。

・演習課題