広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

2016年12月05日

rgb(a)|微妙な色合いもOK! カラーコードを知りたいときに便利なツール

CSSで色を指定するとき、みなさんは、rgb(a)をどのように調べていますか?
kabeはPhotoshopで調べるか、オンラインで調べるか、のいずれかです、大抵。
一度決めてしまったら「要素」で変更しながら、調整することもありますが。

しかし、カラーコードなんて覚えていないですよね、いちいち。
kabeはせいぜい、白と黒と赤だけです。

バナーや背景を作りこんでいるときはPhotoshopを立ち上げているのでいいのですが、コーディングだけってときは、わざわざ立ち上げるのが面倒。
そんなとき、HTML color codes が便利です。
rgbにも対応しています。

使い方はすごく簡単です。この色がいい、と思うところにカーソルを合わせてクリックするだけで、色を抽出して、コードを見ることができます。

ちょっとこの色、置いときたい、と思えば、
html.png
「save color」で保存もできます。

カラーコード(#hoge)的なのだけ知ることができるツールって多いですけど、rgbを使用するときには使えないっすよね。
これなら、微妙な色合いもセレクトできるので、Goodです。

ブックマークに入れておくと、便利ですよ。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

新品価格
¥2,808から
(2016/12/5 13:19時点)




ではでは、また〜。
クリックしていただけるとうれしいです

人気ブログランキングへ

にほんブログ村 デザインブログ 女性デザイナーへ
にほんブログ村

2016年11月28日

Cherome|便利な拡張機能サイトやWeb上にある画像の色を知りたいとき

どうも、kabeです。kabeだmonoブログを見てくださってありがとうございます。
今回は、GoogleCheromeの便利機能です。

▼目的
  • Webサイトで使った色を知りたい
  • 使われている色を知りたい


こんなことってないですか? kabeは時々あります。自分で作ったサイトの画像(バナー)、その色なんて覚えておりません。CSSで指定しているのなら、要素で見ればOKっすけど、画像となるとフォトショップを開いて色を抽出して、なんて面倒ですよね。
しかも、その画像が手元にない場合なんて、ダウンロードしなきゃっす。

また、何か所もあって、いちいちCSSを確認してらんねぇぜ、ってときにも使えます。

色を確認してくれる便利なツールは、クロームの拡張機能「ColorPick Eyedropper」です。
同じようなツールは色々あるけど、kabe的にこれが一番使いやすいです。

ColorPick Eyedropper導入

とりあえず、クロームWebストアで
ColorPick Eyedropper
と検索してください。出てきます。
0.jpg
kabeはもう入れちゃってるのですけれども、画像の青で囲んでいるところに「+CHEROMEに追加」という青いボタンが出ます。そちらをクリックしてくださいね。

すると、ブラウザ(クローム)の右上にColorPick Eyedropperが出てきます。
1.jpg
こんな感じのカラーパレットみたいなのが出てたらOKです。

ColorPick Eyedropperを使ってみる

せっかく入れたので、早速使ってみたいところですよね。
これ、めちゃくちゃ簡単なのです。

まず、この色を知りたい、というページへ行きます。
サンプルなので、kabeだmonoブログの色を調べますね。

先ほどの、クロームの右上に出ていたColorPick Eyedropperアイコンを1回クリックします。
そうすると、カーソルのアイコンが十字のようなものに変わります。
その十字を、ここの色が知りたい、というところまで持っていきます(マウスを動かすだけですけど)。

例えば、kabeはここにしました。
2.png

そして、その箇所で1回クリックします。左クリックです。
すると、このように、
3.png
色コードが現れます。

このまま「コントロールキー」+「C」でコピー可能! ああ、便利。

続けて別な箇所の色を調べることもできます。

ColorPick Eyedropper注意点

2つあります。

1つ目

調べた後、そのままだと、どこをクリックしても色が出てしまいます。
※別タブ、別ウィンドウで開いているサイトは無関係。
更新ボタンやF5キーを押して更新すると、元の色を調べない状態に戻ります。
再び調べたいときは、またColorPick Eyedropperアイコンをクリック〜です。

2つ目

ローカル環境だと使えません。
Web制作をしていると、ローカルで確認しながら作っていくことって多いですよね。
そんなときには使えません。
サーバーへアップしてからじゃないとダメなのでご注意くださいね。

色をすぐ知りたいときに使ってみてください。





クリックしてくださると嬉しいです

人気ブログランキングへ

ブログランキング・にほんブログ村へ
にほんブログ村

2016年10月16日

Web制作|jpg、png、画像圧縮でサクサク読み込み!軽やかなページのために

画像をたくさん掲載しているサイトは読み込みが重い! そんなことってありませんか?
ユーザー側なら避けて通ればいいだけのことだけど、運営側(制作側)だった場合、大切なユーザーに避けられるのはよろしくないですよね。

そんなとき、kabeは画像を圧縮して使っています。

まず、画像が重くて困ることと言えば、
・サーバーなどに容量制限がある場合、マックスまで達してしまいやすくなる
・レスポンシブサイトが主流なので、スマホで閲覧して読み込みがもっさりしているとユーザーが離れてしまう。Wi-fi環境じゃないとなおさら。場合によっては読み込みまでに時間がかかりすぎて余計なエラーが発生することも


とにかく、負荷を軽減しなきゃですよね。

軽減するためには、画像を圧縮するのがベスト。圧縮といっても、見た目はほぼ変わりません。変わったことにkabeは気づいたことがないです。
見た目はそのままに無駄な部分を圧縮して、データそのものを軽くするのです。

では、どうやってjpgやpng画像を圧縮するの?

便利なサイトがあります。嬉しい完全無料です。
そういったサイトはたくさんあるのですが、いつも使っている2つをご紹介します。
いくつも知っていたって結局使うのは、使い勝手のいいものなので。

jpgやpng画像を軽くするおすすめその1

▼Optimizilla
http://optimizilla.com/ja/
※別ウィンドウで開きます

◆Optimizillaの使い方
kabesite1.jpg
Optimizillaのサイトへいって、中央にある「ファイルをここにドラッグ&ドロップしてください」を目掛けて画像をドラッグ&ドロップ。複数一気に入れられます。
「アップロード」ボタンをクリックすると、PC内のフォルダを指定して、その中身を一気にアップすることも可能。
ちなみに、kabeは楽なので、ドラッグ&ドロップでやってます。

すると、「アップロード中」から「変換中」と勝手に変わっていき、圧縮してくれます。

kabesite2.jpg
サンプル画像(jpg)では、79%も圧縮されました。
元が4.3Mだったのが、何と! 928K

「クオリティ」を変更すると、さらに圧縮できますが、やりすぎると、見た目が荒〜い感じになっちゃうので要注意。
kabeは基本、お任せしてます。つまり、クオリティはいじらずにそのままってこと。

圧縮が済んだら、ドラッグ&ドロップした画像のとこにある「ダウンロード」をクリックするとDL(=ダウンロード)できます。
画像が複数ある場合、個別にDLするのもOKですけど、面倒なので、「全てをダウンロード」で一括DL。
一括DLした場合は、「optimizilla.zip」として落とされます。
kabesite3.jpg
しかし、これ、メリットでもあり、デメリットでもある点。
DLすると、ファイル名に必ず「-min」が付きます。
一括DL時も同じです。
元画像を残したまま、同フォルダへ格納するなどの場合は、大変便利です。
名前が被らないので、そのまま入れられますから。

しかし、実際にサイトへ反映させる場合、minなんて名前が付いてるままだとちょっと……てことがありますよね。
そういうときに不便。名前変えなきゃですもん。

一度にアップできる制限があるのか不明なのですが、今まで、kabeは一気にアップして、エラーが出たことがありません。その点では、大変便利なのですよね。

いい点
・手軽、使いやすい
・一度に何枚もの重い画像をアップできる!!!
・圧縮率が高い
・クオリティをいじれば圧縮率を変更できる


場合によってはちょっと気になる点
・必ず[-min]が付いたファイル名に変わっちゃう


ですな。

jpgやpng画像を軽くするおすすめその2

▼TinyPNG
pngて名前だけど、jpgもいけますよー
https://tinypng.com/
※別ウィンドウで開きます

◆TinyPNGの使い方
kabesite4.jpg
TinyPNGのサイトへGO!
「Drop your .png or .jpg files here!」目掛けて圧縮したい画像をドラッグ&ドロップします。
注意)20枚まで、かつ、1枚の画像容量が5M以下までしか一度にアップできません。


放置で勝手に変換してくれます。
kabesite5.jpg
さきほどのOptimozillaと同じサンプル画像を使いましたが、こちらは88%も圧縮! いいですね。
画像によりますが、TinyPNGの方が圧縮率が高いかと思います。
(元画像がこちらだと4.4Mと表示されています。小数点以下の切り捨てor notの違いでしょうね)
DLは、個別なら、画像右横の「Download」ボタンクリック。
一括DLなら、画像下の「Download al」lボタンクリック。tinified.zipとして落とされます。

個別DL時の注意点としては、たとえば、デスクトップにある画像をアップします。そして、デスクトップへ圧縮後の画像をDLします。すると、ファイル名が変わります。
この場合だと、元画像=sample.jpg DL画像=sample(1).jpg
なので、ファイル名を変更したくない場合は、元画像をどこかのフォルダに入れておいて、別な場所へDLするなど対策したほうがいいです。
一括DLなら、名前が変わりません。

また、個別にDLした場合、DL済のものはDownloadの文字がグレーになるので、どれがまだなのかわかりやすいですね。
kabesite6.jpg

いい点
・手軽、使い方が簡単
・方法を間違えなければ、ファイル名を変えずにDLできる
・圧縮率がかなり高い


場合によってはちょっと気になる点
・一度にアップできるのが、1枚につき5M以下の要領かつ20枚までである


ですね。

用途に応じて使い分けましょう! jpgやpng画像を圧縮して、サクサク、軽いサイト作りを目指しましょう!
kabeはこのブログでも画像を圧縮してまっせー

ただいま入会された方にも100円プレゼント中! ゲットモール経由でお得にお買い物しましょ!




クリックしていただけるとうれしいです

人気ブログランキングへ

にほんブログ村 デザインブログ 女性デザイナーへ
にほんブログ村

2016年10月11日

Web制作で行う文章・文言ライティング時活用している便利なサイト

kabeの行っているWeb制作業務は、サイトのデザインとコーディングだけじゃないです。
・バナーのデザイン/制作(基本毎回)
・バナーや見出しなどなど、キャッチコピー考案(毎回ではない)
・コンテントの記事ライティング or リライト(毎回ではない)

などがあります。

一番苦手なのはライティング。文字数もそうですが、何個のキーワードを何回含める、とか決まりがあって難しい。
しかも、日本語として問題のない、かつ、わかりやすい文章を求められる。

エステ店なんかだと、わりとライトな文章を。
企業だとかための文章を。
その中でも、ターゲットに合わせて書いていかねばならないとか、kabeには難易度高い。
ライターじゃないものね。

内容が何とかなっても、文字数で困ります。
というのも、kabeの使っているエディタは文字数がわかりません。
でも、別なアプリを立ち上げるのが面倒。
コーディングするのと同じエディタでいきたい。

そんなとき、文字数を調べる便利なサイトを使っています。

今、何文字? て時に便利

【文字数カウント】 - ODN
文字数を計算してくれます。
http://www1.odn.ne.jp/megukuma/count.htm
◆使い方
テキストエリアにエディタなどで書いた文章をコピペ(テキストエリアに直接書くのもいいけど、ブラウザが落ちるなどなど、消えたら大変なので非推奨)

貼り付けたら、「文字を数える」ボタンをクリック
スペース(空白)あり、なし、どっちも同時に見れるからナイス!
1-kabe.jpg

テキストエリアを広げれば、ちょっと文字の増減をするときに便利。
赤い丸で囲った部分をマウスで掴んでひっぱればOK。
2-kabe.jpg

ここのサイト以外にも、文字数をカウントしてくれるサイトは山ほどあります。
ぴったりのところを探して、何文字かちょっと知りたいって思ったら、ぜひ、使ってみてくださいね。

ちなみに、kabeはしっかりした文章を読めば読むほど、文章力が上がると勝手に思っています。
漫画でもいいし、日常を描いたコラムでもいいと思っています。
効果のほどはいざ知らず
でも、最近、参考書以外のリアルな本買ってない。
電子書籍が楽だもの。
↓様々なジャンルの小説を楽しもう





よかったらクリックしてください

人気ブログランキングへ

にほんブログ村 デザインブログ 女性デザイナーへ
にほんブログ村

2016年10月09日

Web制作で使える写真素材、商用可!クレジット不要!フリー(無料)!3選

商用OK!フリー画像(写真/イラスト/テクスチャ)いっぱい!便利なサイトたち


クライアントによっては、1枚も画像をくださらない場合があります。
ロゴだけはせめていただきたい、と懇願すると、大抵、名刺をスキャンか写メしたのかな、というSizeミニな画像が送られてきたりします。
トレースあるのみ。頑張って再現するしかないっすわ。

でもでも、画像は、自ら撮影するわけにもいかない。
購入してもいいけど、自腹になりそう、てなときに便利なのが商用OKの著作権フリーな画像。

でもでも、どれがフリーなのかイマイチわからない。
そんなときは、ここ!

1.kabeが背景や人物のボディパーツ(顔なし)なんかで一番お世話になっているサイト

▼pixabay
https://pixabay.com/ja/
<使い方>
・会員登録しなくてもダウンロードできますが、キャプチャ内の文字を打ち込む必要あり&Lサイズまでしかおとせません。
※サイズはS・M・L・オリジナル(画像によります。全部あるとは限りません)
・メアドで無料にて会員登録すれば、ダウンロード時に画像に書いてある文字を打たずに、大きな画像もとれる

<Goodな点>
・all著作権フリー(コピーライトなどの記載不要/加工もOK/使用する際に知らせなくていい)なので、著作確認しなくていいのが便利
・風景、人物、イラスト、テクスチャなど豊富
・気に入ったカメラマンのページをフォローしておけば、次見たいときに便利
・世界中のクリエイターたちの作品があがっている
・美しい風景、背景などが豊富

<ちょっぴりawwな点>
・日本人の画像が少ない
・イラストも西洋風(日本人の感覚だと使いにくいものもある)


2.人物系で最もお世話になっているサイト

▼ぱくたそ
https://www.pakutaso.com/
<使い方>
・欲しい画像を探してダウンロードするだけ!

<Goodな点>
・男性・女性ともに日本人画像が豊富!
・ビジネス・恋愛などシーンも豊富
・画像が古臭くない(これ、大事です)
・高画質画像も無料&登録不要! 素晴らしい

<ちょっぴりawwな点>は特になし!
もっともっと画像が増えたら嬉しいな


3.200px以下の小さなバナー用に使用しているサイト

▼photo AC
http://www.photo-ac.com/
<使い方>
メールアドレスで無料登録するとダウンロードできる

<Goodな点>
・男女ともに日本人の画像がいっぱい
・ビジネスシーン、エステシーンなどなど、パターンが豊富

<ちょっぴりawwな点>
・無料だと一辺が600pxちょっとの画像なので、ヒーローヘッダーなんかに使いたい場合は、まずきびしい
※有料だと大きいサイズもおとせます


以上おすすめ3選でした。




個人事業者も作れます!
全国で使える法人専用ガソリンカード。
クレジット審査なし^^

よかったらクリックしてください

人気ブログランキングへ

にほんブログ村 デザインブログ 女性デザイナーへ
にほんブログ村
ファン
検索
カテゴリーアーカイブ
プロフィール
kabeさんの画像
kabe
IT業界へ営業として入るや否や、数名いたデベロッパーが次々退職。 /クリエイトスキル0状態だったけど、自分でWeb制作もやらざるを得なくなる(!!なかなかないレア体験です、きっと)。フォトショとイラレの違い、JavaScriptとjavaの違いすらわかりませんでした。 /約3年が経過し、ようやくデベロッパーが入社したので、自分は退職。 /フリーランスのデベロッパーへ転向。 /美容・音楽大好き。癒しを求めて生きております。 よろしくおねがいします!
プロフィール
タグクラウド
記事ランキング
×

この広告は30日以上新しい記事の更新がないブログに表示されております。