くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

CSS

[CSS3]animationで背景色を変化させる

CSS

昨日の授業の復習。 CSS3のanimationで背景色を変化させる画像はPhotoshopで用意。文字や太陽のシェイプの部分をくり抜き、 背景色が見えるようにする. サーバーにアップしたのはこのアドレスから見られます http://webtre.ikidane.com/css3/CSS div { ani…

[CSS3]CSS3だけでできる!滑らかな動きの横アコーディオン型スライダー

CSS

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

[HTML/ CSS/ JavaScript/ jQuery]課題サイト「Kitchen Club」

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

[HTML/ CSS/ jQuery]課題サイト「Photolog」

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

[CSS]position 設定の注意点

CSS

positionは特定の要素の配置を自在に指定する場合に使います。 positionを指定した要素は、他の要素より浮き上がった状態になります。 種類 ①relative ②absolute ③fixedよく使われるrelativeとabsoluteについて。 absolute:絶対配置 位置の指定 left: ○px; …

[HTML/CSS]グリッドレイアウトの組み立て

前回Photoshopで切り出したパーツを、HTMLで組み立てていきます。 まず ①HTMLで文書構造を正しく組み立てる ②The W3C Markup Validation Serviceでソースのチェック ③CSSで位置や色等を調整していく ④CSS Validation ServiceでCSSのチェックこの順番は厳守!…

[HTML・CSS]パスタとワインのお店のページを作成しました

課題でパスタとワインのお店のページを作成しました。 <完成図> 所要時間は約3時間でした。 このサイトのポイントは ヘッダーのロゴと大きな画像の重なりは、画像を背景にすることで実現。ロゴの位置はpaddingで指定(positionを使う必要なし) ナビゲーシ…

[HTML/ CSS / jQuery ]ECサイトの再現

インテリア・雑貨を扱うFrancFrancのECサイトのページの一部を再現してみました。 元のページはこちら⇒ floatをかけて2カラムにしています。 メイン商品画像のサイズは大きいもの1種類しかなく、サムネイル部分はサイズを縮小して使用しています。 サムネ…

[CSS][Illustrator]透過PNG画像を使い画像の重なりをつくる

完成予想図 見出し画像の上にロゴマーク画像が重なっている状態を目指します。イラストレーターでロゴの透過PNGを、画像の重なりはCSSのPositionを使います。幅:800px 1.イラストレーターでの透過PNG画像作成 ロゴマーク画像をイラストレーターで開いてお…

[CSS]positionの基礎

CSS

今日の講義はpositionについてです。 positionが使われているのはどんなところ? 例えば 「ケンコーコム」 一番上にあるロゴやグローバルナビは、CSSを無効化してみると、HTMLのかなり下の方に記述されているのがわかります。 このように、HTMLで記述された…

企業系サイト完成

本日の課題の企業系サイトが完成しました。 <諸条件> 授業内5時間で画像制作からコーディングまで 色彩計画・キービジュアル画像は適宜 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピ…

[Illustrator]ボタンの作成③ 横ナビゲーション用

完成図 イラストレーターで横ナビゲーション用のボタンを作る 上が通常時、下がマウスオン時ボタン1個のサイズは幅140px 高さ50px = 全体幅980px 1pxでもズレないように、画像作成時は時々チェックすること ①枠線・・黒 1pxで長方形を作る (幅980px 高さ5…

[CSS]記述時の注意点(3月17日)

CSS

間違いやすいCSSのおさらい

[HTML・CSS]復習

HTMLとCSSの、間違いやすいポイント <条件> #container:幅 840px・上の空き無し・左右は自動空き #header:高さ100px #nav:幅160px・高さ50pxのナビゲーションボタンが5個(nav1~nav5) #content:幅500px・高さ300px #footer:下余白50px 背景色は、…

[CSS]リストを使った横ナビゲーション(3月12日)

CSS

リストを横ナビゲーション ナビゲーションの種類 グローバルナビ →実はあまり使われない サイドナビ →ローカルナビ フッターナビ →ローカルナビ パンくずリスト →現在位置を示す役割 横ナビゲーションの特徴・注意点・各メニューの横幅指定が必要・float: le…

[CSS]floatの練習(3月10日)

CSS

3月10日 午前 レイアウトの種類 floatの練習 レイアウトの種類 固定レイアウト 可変レイアウト :情報の優先順位が付けられないと難しい ・リキッドレイアウト ・フレキシブルレイアウト 例:ケンコーコム - 健康メガショップ、Amazon.co.jp ・可変グリッド…

[CSS]CSSのバリエーション(3月9日)

CSS

午前のカリキュラム タイピングテスト(約10分) CSSの記述のバリエーション 7種類 午後のカリキュラム CSSの記述のバリエーション 7種類の続き Photoshop <Memo> ファイルの新規作成 Ctrl + N ファイルに名前を付けて保存 Ctrl + Shift + S で時間短縮…

[CSS]縦のナビゲーション(3月6日)

CSS

ナビゲーションをlist で作る <ul>で作るメリット = 順番を入れ替えても成立する ◆記述例 <ul> <li class="nav01"><a href="#">ホーム</a></li> <li class="nav02"><a href="#">サービス</a></li> <li class="nav03"><a href="#">セミナー</a></li> <li class="nav04"><a href="#">会社について</a></li> </ul> 1.リスト<li>にidをふる方法(上の例、一般的) 2.アンカー<a>にdをふる方法 → スタイルシートが複雑になる 例①…</a></li></ul>