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

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

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

HTML

[HTML5]ルビ付き・縦書きテキスト

HTMLでルビをつける <ruby>香水<rt>こうすい</rt></ruby>縦書きにする ※webkit系とIEのみ Safariは非対応 -webkit-writing-mode: vertical-rl;vertical-rl は右から左への順番 vertical-lr は左から右テキスト <p><ruby>君<rt>きみ</rt></ruby>が<ruby>行<rt>ゆ</rt></ruby>く<br> <ruby>道<rt>みち</rt></ruby>の<ruby>長手<rt>ながて</rt></ruby>を<br> <ruby>繰<rt>く</rt></ruby>り<ruby>畳…</ruby></p>

[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を使用し…

[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種類しかなく、サムネイル部分はサイズを縮小して使用しています。 サムネ…

企業系サイト完成

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

[HTML・CSS]復習

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

[HTML]フォームの練習

HTMLのフォームの目的は、ユーザーの情報・意見の収集です。フォームで集めたい情報から、内容・体裁・信頼性などからプログラムをくみ上げることが大事です。とりあえずHTML・CSSでのフォームのマークアップについて書いていきます。