HTML
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>
jQueryを使用してアコーディオンメニューを実現した課題サイト「Kitchen Club」です。 このサイトのポイント ナビゲーションがjQueryでアコーディオンメニューになっている ナビゲーションにマウスオンすると画像が変化する 商品画像のシャドウ 1.アコーデ…
jQueryを使った課題サイトを作成しました。 このサイトのポイント rollover.js、LightBox.jsの2つのプラグインを使用 左サイドバーとメインコンテンツの重なり 画像だけではない、パーツの横並びが多い Photo Log 1、ナビゲーションにrollover.jsを使用し…
前回Photoshopで切り出したパーツを、HTMLで組み立てていきます。 まず ①HTMLで文書構造を正しく組み立てる ②The W3C Markup Validation Serviceでソースのチェック ③CSSで位置や色等を調整していく ④CSS Validation ServiceでCSSのチェックこの順番は厳守!…
課題でパスタとワインのお店のページを作成しました。 <完成図> 所要時間は約3時間でした。 このサイトのポイントは ヘッダーのロゴと大きな画像の重なりは、画像を背景にすることで実現。ロゴの位置はpaddingで指定(positionを使う必要なし) ナビゲーシ…
インテリア・雑貨を扱うFrancFrancのECサイトのページの一部を再現してみました。 元のページはこちら⇒ floatをかけて2カラムにしています。 メイン商品画像のサイズは大きいもの1種類しかなく、サムネイル部分はサイズを縮小して使用しています。 サムネ…
本日の課題の企業系サイトが完成しました。 <諸条件> 授業内5時間で画像制作からコーディングまで 色彩計画・キービジュアル画像は適宜 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピ…
HTMLとCSSの、間違いやすいポイント <条件> #container:幅 840px・上の空き無し・左右は自動空き #header:高さ100px #nav:幅160px・高さ50pxのナビゲーションボタンが5個(nav1~nav5) #content:幅500px・高さ300px #footer:下余白50px 背景色は、…
HTMLのフォームの目的は、ユーザーの情報・意見の収集です。フォームで集めたい情報から、内容・体裁・信頼性などからプログラムをくみ上げることが大事です。とりあえずHTML・CSSでのフォームのマークアップについて書いていきます。