2015-04-01から1ヶ月間の記事一覧
画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、＜div class=”cr-ti…
サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。 まず、共通の設定部分になるＣＳＳファイルをリンクさせる。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 3 <link rel="stylesheet" type="text/css" href="css/style.css" /> 4 <noscript> 5 <link rel="stylesheet" type="text/css" href="css/noscript.css" /> 6 </link></noscript></link></link></head>
CSS,Javascriptで作るドロップダウンリスト５パターン。 まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css" /> 3 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' 4 rel='stylesheet' type='text/css' /> 5 </link></link></head>
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目 次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第4回目となるこの記事では、「素材感を活かした手作り風のサイトを作る際のポイント」についてをまとめて…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第3回目となるこの記事では、「大量の商品を見せるデザイン レイアウトにする際に押さえておくこと」につ…
画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある３パターン共通のＣＳＳファイル(３ファイル)とｊｓファイル(３ファイル)を設定。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 3 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 4 </link></link></head>
CSSで作るドロップダウンメニューのドロップ表示５パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを…
スクリプト不要で、画像ホバー時にＣＳＳ３アニメーションで様々なキャプション表示をするスタイルシート６パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「食品」「飲料」を扱ったサイトのデザインについて押さえておくことをまとめておきます…
