1715/4月
ihover-capture-1

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 – ihover –

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目  次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に、テキストを下側にエフェクトをかけて配置 ・hoRead More…

1515/4月
consideration-about-website-design-4

「素材感を活かした手作り風」のサイトを作る際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第4回目となるこの記事では、「素材感を活かした手作り風のサイトを作る際のポイント」についてをまとめておきます。 グラフィックソフトの機能を駆使することで直線的でシャープ スマートな表現はできるけれど、一見Read More…

1315/4月
consideration-about-website-design-3

「大量の商品を見せる」デザイン レイアウトにする際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第3回目となるこの記事では、「大量の商品を見せるデザイン レイアウトにする際に押さえておくこと」についてをまとめておきます。 1. 大量の商品を掲載するサイトを作る時のポイント 情報アーキテクチRead More…

1315/4月
four-boxes-capture

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とJSファイル(3ファイル)を設定する。  【 html 】  1   <head>  2       <link rel=”stylesheRead More…

1215/4月
css3-logo

【TIPS】CSSで作るドロップダウンメニューのドロップ表示5パターン

CSSで作るドロップダウンメニューのドロップ表示5パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを記述していきます。  【 html 】  1   <ul id=&#8221Read More…

0815/4月
css3-logo

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 – InContent –

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をする スタイルシート6パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。 https://github.com/brunodsgn/incontent パターンごとに変えるRead More…

0415/4月
consideration-about-website-design-2

「食品」「飲料」を扱ったサイトを作る際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「食品」「飲料」を扱ったサイトのデザインについて押さえておくことをまとめておきます。 1. 「食品」「飲料」を扱ったサイトを作る際のポイント 五感を刺激するデザインであること 食Read More…

1515/3月
sweet-thumbnails-preview

サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCSS、Javascript、JRead More…

1915/1月
data-move.jpg

「 はてなブログ 」のデータを「 WordPress 」へ移行する手順

はてなブログのデータをWordPressへ移行するまでの手順まとめ。 「 はてなブログ 」のデータを「 WordPress 」へ移行する手順 1. 「 はてな 」のデータをダウンロードする 「はてな」のデータをダウンロードするために、まずは設定画面を開く。 「 設定 」 → 「Read More…

2814/12月
design-category-topimage

「良いWEBサイトとは」「良いWEBサイトを作るためには」

まず、「良いWEBサイト」とは、 特定のユーザー層が、特定の状況で、特定のゴールを達成しやすいサイトであること。 そして良いサイトを作るためには、定めておくべき3つの要素がある。 1  そのサイトは、どんなユーザー層をターゲットにしているのか 2  そのサイトは、どんな状況で使われると想定されるか 3&nbRead More…

2314/12月
css3-logo

文字を変形させる ( 拡大 / 縮小 )

WEB上で縦横比を無視して文字の形を変形させるには、CSS3のtransformプロパティを使う。 transformプロパティの値には「scale」という値を指定してコードを以下のように記述する。 【 CSS 】 1   transform:scale(x,y);  「x」には横方向の倍率を、「y」には縦方向の倍率を数値で記述する。 標準のサイRead More…

2314/12月
consideration-about-website-design-1

「落ち着き」「安らぐ雰囲気」のデザインにする際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「落ち着き」「安らぐ雰囲気」のデザインにする際に押さえておくことをまとめておきます。 1. 「 落ち着き 」「 安らぐ雰囲気 」のデザインにする際のポイント 彩度 明度 コントラストの低いRead More…

0214/12月
wordpress-thumbnail

「 functions.php 」とは

【ワードプレス学習  進捗メモ&備忘録】「functions.php」ファイルについてのまとめ。 「functions.php」ファイルの機能 役割とは? サイドバーを作成する際、そこに様々なメニュー ( カテゴリーメニュー、月別メニュー等など )を表示するためにはウィジェットという機能が必要になる。 そのウィジェットの機能をRead More…

1514/10月
f:id:ooigawa-bitter-sweet:20150130191408j:plain

JPEG、PNG、GIF形式の画像を、SVGのベクターに変換できるサービス

これは便利!! JPEG,PNG,GIF形式の画像を、SVGのベクターに変換できるサービス。 写真画像を指定してクリックするだけで、ベクターデータ (svg) が生成される。 ファイルサイズは1Mb(1000Kb)までアップロード可能。 参考サイト PICK UP TIPS記事セレクション 【TIPS|筆文字デザイン作成】自作の筆文字をRead More…

1514/10月
css3-logo

CSSで作るリボン風の見出し

  ~CSSでリボンを作るまでの大まかな流れ~   まず、リボン風にしたい部分の要素をhtmlに設定。 そこに スタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し positionプロパティで位置の調整をしていく、という流れ。 まずは、htmlから  【 html 】  1   <div Read More…

1314/9月
css3-logo

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる

CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。 ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述が抜けている ● 閉じカッコ ( } ) の記述が抜けている ● 編集したファイルを保存し忘れている ● 単純にスペルミスRead More…

2114/8月
css3-logo

CSSだけで改行する方法

ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。 とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、やはり直したいところです。 Read More…