久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

デザイン

webデザイン初心者がデザイン力を磨く方法

webデザインをどうやって磨いていったらいいかを、人から聞いたり考えたり調べたりしたものをまとめた。 デザインを見る力、判断力を養う 質の高いデザインを作るためには、デザインの質を判断することが重要 自分自身のデザインを客観的に判断できれば、デ…

WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード

色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、…

Webサイトのデザインの作り方 Webサイトデザインの基礎の基礎

Webサイトのデザインをする流れについて、色彩検定の勉強で学んだことを活かしつつまとめてみた。 準備 サイトの目的を確認する 何かを売りたいのか、情報を発信したいのか、など何の目的でサイトを作るかをはっきりさせておく。目的によって、カラー、ロゴ…

画像形式の違い GIF、JPEG、PNG形式

今までWebページに利用できる画像のファイル形式の違いを知らないまま何となく使ってしまっていたので勉強した。今後はきちんと場面によって適した形式を使い分けられるようにしたい。 GIF形式(.gif) GIF(Graphics Interchange Format)形式は、256色まで使用…

Yahoo!ログールのデザインをはてなダイアリーでカスタマイズする方法

前回、Yahoo!ログールの使い方などについて書いた。 今回ははてなダイアリーでカスタマイズする方法。普通にブログパーツのコード <script type="text/javascript" charset="utf-8" src="http://parts.logoole.yahoo.co.jp/parts/script/87cjhim80hppm6qwauoxyok691otppnx"></script> <div class="yahoo-tracks-widget"></div>を書くと、サイドバーに裸の状態で表示されてしまう。しかも左に偏ってる。 そこで、まず枠を作る。

自作バナーをはてなダイアリーのサイドバーやヘッダにつける方法

バナーを作ってはてなダイアリーに載せてみた。最初にバナーをfotolifeにアップロードした。 普通にはてなfotolifeのURLを使えば出来るのかなと思ったら、 URLはそのままだとダメらしくて表示できなかった。 ということで、はてなダイアリーに写真をアップし…

テキストエリアを読み取り専用にするコード

HTMLでテキストエリアを表示するコードは、 <TEXTAREA cols="横幅" rows="縦幅" style="border:枠の種類 1px 枠の色;color:文字色;background-color:背景色;"> 書き換え可能 </TEXTAREA>枠の種類については下線を点線にするには? 〜デザイン/CSS基礎を参照。これを読み取り専用にするには、readonlyを付け加える。 <TEXTAREA cols="横幅" rows="縦幅" style="border:枠の種類 1px 枠の色;color:文字色;background-color:背景色;" readonly> 書…</textarea>

下線を点線にするには? 〜デザイン/CSS基礎

文章の下線を点線にしたい場合、CSSを利用すれば簡単に出来る。 borderを下だけに設定して、スタイルを点線にすればよい。スタイルシートで、 span.dotted_under_line{ font-weight: bold ; font-size: 15px ; border-bottom:1px dotted; }として、ビューで…

色彩の勉強法

11月9日、色彩検定2級を受けた。結果はまだ出てないが、合格していた(12月19日)。答え合わせしたら、8割強だった。ということで、勉強法はあまり間違ってなかったと思うので方法を一応メモ。 前提条件 3級は飛ばして2級のみを受けた。 (2級とれば3級…