カテゴリー別アーカイブ: WEBデザイン

ペイントで画像の中のカラーコードを調べる方法

[ペイント] 画像やウェブサイト上の特定色のカラーコードを調べる方法

画像の中の、特定部分の(16進数)カラーコードが知りたい場合は、Windowsに標準でインストールされている「ペイント」で調べることが可能です。

画像ではなく、ウェブサイト上のカラーコードを調べる場合は、ウェブページのスクリーンショットを取って調べることができます。
Surface Pro 3でスクリーンショットを撮る方法

まず、調べたい画像を準備します。
今回はこちらの画像を準備してみました。
ペイントで画像の中のカラーコードを調べる方法

この画像の中の赤丸の部分のカラーコードを調べてみたいと思います。
ペイントで画像の中のカラーコードを調べる方法_step1

画像をペイントで開きます。
カラーコードを調べたい画像をペイントで開く

[ツール]の中の[色の選択]をクリックし、カラーコードを調べたい部分をクリックします。
[ツール]の[色の選択]をクリックし、調べたい色をクリック

クリックした部分の色が表示されます。
選択した色が表示されます

[色の編集]をクリックします。
[色の編集]をクリックします

カラーコードを10進数の表した数値が確認できます。
この場合、赤(R):103、緑(G):150 青(B):184です。
カラーを10進数で表した数値です

10進数の
[赤(R):103、緑(G):150 青(B):184]、
を、16進数に変換すると、
[赤(R):67、緑(G):96 青(B):B8]
になります。
(※16進数とは、0~9とA~Fで表す数値です。)

16進数に変換した数値をつなげます。

[#6796B8]

これが16進数のカラーコードになります。

■カラーコード変換ツール
http://iroempitsu.net/zukan/tl-hexdec.htm
http://syncer.jp/color-converter

[CSS] line-heightの「%」設定と「単位なし」設定では挙動が違う!

行ブロックの基準となる高さを指定する line-height。

指定できる値は、「px」を用いた絶対値指定、「%」を用いた相対値指定、単位をつけない相対値指定などがある。

「%」を用いた場合と、単位をつけない場合はどちらも相対値指定だが、実は挙動が違うらしい。(ずっと同じだと思っていた)

例えば、

line-height:150%

line-height:1.5

は同じことを表しているように見えるが、実は「%」の方は要素の計算値が子要素に継承される。

つまり・・・

例えばフォントサイズ16pxで行間100%とした場合、子要素のフォントサイズが12pxだろうが10pxがろうが、行間は16pxとなる。

個人的には「%」指定の挙動が、嫌ですw

だから単位なしで行きたいと思います。

(もちろん「%」が便利な時はある!フォントサイズの違う子要素を交えながらもずっと同じ行間キープしたい時とか・・・)

 

文字実体参照の例(コピーライトマークなど)

コピーライトマーク(©)は、機種依存文字なので、環境によっては正しく表示されない場合がある。

HTMLでその文字を使いたい場合は、文字実体参照という表記方法を使うことができる。

他にも、アンパサンド(&)や不等号(<、>)など。

よく使われる文字実体参照

表示される文字 文字実体参照
& &amp;
< &lt;
> &gt;
© &copy;

例えば、コピーライトマークの場合は「&copy;」と記述したら「©」と表示される。

何度も言うが、「こぴーらいと」と入力して変換して「©」と出てもこれは機種依存文字なのでそのまま使わないほうが良いということです。

Android Design Preview

Android Design Previewは、PC側のディスプレイをスマートフォンにミラーリングするツール。
Googleが開発している。
http://code.google.com/p/android-ui-utils/

パソコンでスマホアプリやスマホサイトのデザインをしている時に、実際にスマホのディスプレイで確認できます。

スマートフォン用サイトのためのWebアプリケーションフレームワーク

「Webアプリケーションフレームワーク」というものを利用すると、サイト制作の初期部分があらかじめ準備されているだけでなく、個々のプラットフォームを自動で処理してくれる。

代表的なものに、「jQuery Mobil」や「Sencha touch」などがある。

これらを使えば、スマートフォン用サイトのデザイン制作に集中できる!

レストランが作るこだわりの逸品から会議弁当やピザチェーンまで、出前・宅配の総合グルメサイト『ぐるなびデリバリー』

ブラウザにキャッシュさせない設定

更新頻度の高いページなどではブラウザにデータをキャッシュされては都合が悪い。

ということで、metaタグに以下を設定してキャッシュさせないようにする。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

もちろん、実際にキャッシュをしないかどうかは、各ブラウザの解釈に依存する。

【上記タグの解説】
一行目と二行目

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

は、どちらもブラウザに対してページキャッシュを無効にする設定。
※一行目は古いブラウザのために未だ残されているコードと思っておけば良いか。

上記だけではキャッシュが無効にならない場合(なんちゅうブラウザなんだ!)、
キャッシュの有効期限を指定することでキャッシュ情報を消去させる方法が、
三行目

<meta http-equiv="expires" content="0">

さらにキャッシュの有効期限を0秒に指定している。
例えば content=”3600″ と指定すれば、一時間キャッシュすることになる。

[HTML5]セクショニング要素

※HTML5の要素の定義はこれからも変更点が出てくることがあるので注意 ( 2011/6 現在 )。

HTML5には、以下のようなセクションを表すためのセクショニング要素がある。

  • article要素
  • 内容が単体で完結するセクションであることを示す際に使用する。
    フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、コメント、その他コンテンツの独立した項目。
    【使用例】

    <article>
    <h1>ブログタイトル</h1>
    <p>ブログ記事・・・</p>
    <article>
    <h1>コメント</h1>
    <p>コメント内容・・・</p>
    </article>
    </article>
  • section要素
  • 通常はヘッダーを伴う。ヘッダーが伴わないならsection要素を使用するべきではない。
    また、section 要素を利用することで、どこにでも h1 要素を使うことができるようになる。
    article, aside, nav の方が適切な場合には section 要素は使わない。
    【使用例】

    <section>
    <h1>見出し</h1>
    <p>文章など文章など・・・</p>
    </section>
  • nav要素
  • 重要なナビゲーションブロックからなるセクションだけが、nav 要素に適している。
    サイト内リンクのリストをフッターに入れることが一般的であるが、このような場合においては、footer 要素のほうが適している。

  • aside要素
  • あまり重要でないコンテンツに使っても良い。
    例えば、サイドバーによく見るブログロール、補助的なナビゲーション、ページに関連する広告など。
    article 要素の中で使うときはその記事に関連した補助的なコンテンツとするべきである。