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

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

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

～参考サイト～ デザイナーなら読んでおきたい！デザインに関する6つのスライド・企画書 | creive【クリーブ】

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

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

これは便利!! JPEG,PNG,GIF形式の画像を、SVGのベクターに変換できるサービス。 写真画像を指定してクリックするだけで、ベクターデータ (svg) が生成される。 ファイルサイズは1Mb(1000Kb)までアップロード可能。 参考サイト Convert Picture to Svg - Pics…

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

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

CSS3の「transform」プロパティを使って対象物を斜めに傾けることができます。 この指定は、テキストだけでなく画像に対しても適用できます。 CSSの記述は、transformプロパティの値に「rotate」という値を指定。 記述のしかたは以下のようになります。 記述…

「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。 以下で細かく見ていきます。 マウスオーバーした時、背景カラーをふわっと変える設定 1. もとの色を設定…

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる設定。 やり方は色々あると思いますが この記事で紹介するのは、まず背景を白にしてから画像の透明度をつけることで ふわっとみせる、という方法です。 画像ホバーした時、半透明の白色レイヤー…

シンプルでかつ、訴求力があり、インパクトも抜群の「斜め上をいく文の里商店街のポスター25点」の中から一部を抜粋してみました。 どれも売り込み臭さがなくて親しみやすさがあり参考になります。 参考記事

サイトを編集中に、画面の一部の画像が表示されないという現象が起きたので、この際の対処法についてをまとめておこうと思います。 使用している環境 ・機種は、sony VAIO ・使用ブラウザは、GoogleChrome ・OSは、Windows7 ・メモリ 8GB 画像が表示されない…

「創造的破壊」 中字の筆ペンで制作 ・背景と書の一体感、全体の色彩や熱量のバランス ・筆ペン特有の人口筆の張りのあるシャープなタッチを表現するなど意識しました。 「 パンダカフェ 茶の花 」 「 パンダカフェ 茶の花 」サイトのタイトル用に書いたもの…

▼在学時に制作したWEBポートフォリオです。 http://ooigawa.bitter.jp/portfolio/

「 脳は、情報を入れ込む ( インプット ) よりも、その情報を何度も使ったり出力する ( アウトプット ) ことで鍛えられる 」 ということが脳科学でも明らかになっています。 ここからいえることは、アウトプットを前提にしたインプットが重要であるというこ…

ブラウザ上でプレビューを見ながら手動で設定できてコードも生成してくれるCSS3ジェネレーターを３サイトピックアップ。 ベンダープレフィックス付きでコピペしてすぐに利用可能。 1. 「 CSS Generator 」http://www.css3generator.in/ ■ カスタマイズできる…

「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。 手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。 以下、手順の詳細 画…