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

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

HTML+CSS

CSS3によるanimation

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…

html5のテンプレート(IE対策)

IE対策のため記述を追加。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>

HTML5_02

朝イチで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での基本的な文法 HTML5ではDTDの指定が不要だが記述するのが一般的 大文字小文字でもどちらでも良い。metaタグは charset属性のみ <meta charset="UTF-8"> link要素・style要素・script要素の属性は不要 type属性は削除します 空要素の閉じ方 <br><br /> どちらの記述も可能。混在して</meta>…

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

レイアウトについて 世の中にある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

positionについて

relative:相対配置。要素の左上からの移動。領域は確保される。 absolute:絶対配置。親要素左上からの移動。領域は確保されない。親要素がある場合相対配置される。 fixed:実際にはjavascriptで書くことが多くCSSではあまり使わない。 ・演習課題

企業系サイト作成テスト

授業内5時間で画像制作からコーディングまで。キービジュアルにあわせて色彩計画を立てる。以下のサイトを作成した。 。

月1テスト

ハローワークに提出される月1のテスト及びコーディングテスト。コーディングテストが終了したものは、課題を制作。

floatを使った横ナビゲーション

横ナビゲーション floatを使うのが主流。使うのはfloat:left;のみ。 カラム落ちしやすいので注意すること。 floatを使う場合は必ずwidthを設定する。 今日の授業は、グローバルナブをいかに面として押しやすくするか。 ポイント liではなくli aにborderを指…

floatを使ったレイアウトについて

主なレイアウトの種類 教科書108ページ参照 固定レイアウト 可変レイアウト リキッドレイアウト フレキシブルレイアウト 可変グリッドレイアウト 等。 可変グリッドレイアウトについては、注意が必要。 情報の優先順位を付けるという意味において、効果がで…

HTML01

ブラウザ(User Agent) 何を使うかによって得られる情報が変わる。 IEは使ってはいけない。 HTMLとは Hyper Text Markup Language 学習したHTMLの要素 ol 番号付きリスト ul 番号なしリスト dl 定義型リスト li:リストアイテム dt,dd

導入編

ブラウザについて 初心者はFireFoxを使う事。文法チェックがしやすいため。 HTML 検索エンジンはテキストを求めている。 文章がメインで、画像や表はオマケにすぎない。 WEBは皆が探している結論から書く事が重要である。 ゲシュタルトの法則 ゲゲシュタルト…