画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、＜div class=”cr-titles”＞のタグ内で書き換える。 【 htmlRead More…
サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。 まず、共通の設定部分になるCSSファイルをリンクさせる。 【 html 】 1 <head> 2 <link rel=”stylesheet” type=”text/css” href=RRead More…
CSS,Javascriptで作るドロップダウンリスト５パターン。 まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。 【 html 】 1 <head> 2 <link rel=”stylesheet” type=Read More…
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目 次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に、テキストを下側にエフェクトをかけて配置 ・hoRead More…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第4回目となるこの記事では、「素材感を活かした手作り風のサイトを作る際のポイント」についてをまとめておきます。 グラフィックソフトの機能を駆使することで直線的でシャープ スマートな表現はできるけれど、一見Read More…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第3回目となるこの記事では、「大量の商品を見せるデザイン レイアウトにする際に押さえておくこと」についてをまとめておきます。 1. 大量の商品を掲載するサイトを作る時のポイント 情報アーキテクチRead More…
画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とJSファイル(3ファイル)を設定する。 【 html 】 1 <head> 2 <link rel=”stylesheRead More…
CSSで作るドロップダウンメニューのドロップ表示５パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを記述していきます。 【 html 】 1 <ul id=”Read More…
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をする スタイルシート6パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。 https://github.com/brunodsgn/incontent パターンごとに変えるRead More…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「食品」「飲料」を扱ったサイトのデザインについて押さえておくことをまとめておきます。 1. 「食品」「飲料」を扱ったサイトを作る際のポイント 五感を刺激するデザインであること 食Read More…