開発・技術

2018年07月03日

CSSの色を指定する方法3パターン はてなブックマーク - CSSの色を指定する方法3パターンこのエントリーをはてなブックマークに追加

こんにちは。白井です。

さて、私は最近、弊社プログラマーの宮田と共同でサービスの開発を行っています。
私は主にプログラマーからやってきた仮組みのUIを装飾して返すということをやっていますが、ここで気になることが一つ。

プログラマーからやってくるCSSの色指定がすべてRGBで行われているんです。
カラーコードで育った私は「プログラム界隈ではRGBが主流なのか…?🤔」などと思ったりしたのですが、そんなわけがあるのかとちょっと気になって調べてみました。

color


さてさて、CSSにおいて色の指定方法はおおよそ4種類程度あるかと思います。

🔸カラーコード
#(シャープ)から始まる16進数6桁の英数字で色を表します。
カラーコードはHTMLの中でも使用でき、古いブラウザから見ても色を表示できるため、モダンから化石まで幅広いブラウザに対応する必要がある場合に便利です。ただし透明度情報は扱えません。
1・2桁目、3・4桁目、5・6桁目がそれぞれ同じ値の場合は3桁に省略して表記することができます。
#000000は#000、#AABBCCは#ABCと書いてもいいわけですね。

🔸色名
redやblueなど色の名前を直接指定するものです。100色以上の色に対応しているようなので、だいたいであれば思ったとおりの色を再現できるのではないでしょうか。直感的に色を指定できるので急いでいるときも便利です。
ちなみにaliceblueという色名はブラウザによっては全く違う色で再現されることがあるそうです。

🔸RGBa
RedGreenBlueとAlphaを指定する方法です。色はそれぞれ0から255の256段階、アルファ(透明)は0から1の中で小数点を使って調整します。
透明度情報を扱えるうえ、多くのブラウザにも対応しているため、多くの場面で使われるようです。

🔸HSLa
あたらしいCSSことCSS3から使えるようになった指定方法です。
Hue(色相),Saturation(彩度),Lightness(明度),Alpha(透明度)で色を指定します。色相、再度、明度はパーセンテージで、透明度はRGBaと同じく0から1.0の中で指定します。

✨✨✨✨✨✨

…ということで、RGBaがよく使われているのはおそらく多くのブラウザに対応していて且つ透明度も扱えるからではないかな?というところが今日の結論(感想)です。

私はIllustratorやPhotoshopから色を抜いてくることが多いことと、RGBよりカラーコードのほうが見た目スッキリに感じるため、透明度情報を扱わないときはカラーコードを使っています。
ただ、透明度情報を扱うときはRGBaを使いますし、普段自分で色を作るときはHSLを使っています。要は使い分けということですね。
みなさんも目的に合わせて楽しいカラーライフをお過ごしください🙌

sakamo_knowledgeflow at 18:24コメント(0) この記事をクリップ!

2018年06月21日

Font Awesome5が擬似要素で反映されない はてなブックマーク - Font Awesome5が擬似要素で反映されないこのエントリーをはてなブックマークに追加

こんにちは。白井です。
最近食べ物の話しか書いていないように思うので、今回は食べ物ではない話をひとつ。

Webページを作ったことがある人は知っているかもしれない「Font Awesome」。
手元の端末の中ではなくWebからフォント情報を読み込んで表示するWebフォントのひとつで、GoogleのMaterial Iconと並んで便利なアイコン特化のWebフォントです。

個人的には種類が多いのでFont Awesome派です。2つのサービスには使い分けどころがあるのでしょうか?

この使い方はさておいて、今回は「Font Awesome5がCSSの擬似要素で反映されない」話です。

Font Awesomeをアイコンに使うときなどは、CSSの疑似要素「:before」で置くのが定番かと思いますが、最新版のFont Awesome5を疑似要素で使ってみると…
contentだけ指定
「ログイン画面へ戻る」の前がtofuこと四角い文字化けになってます。
疑似要素でFont Awesomeを使うにはbeforeの中にfont-familyでFont Awesomeを指定しないといけないんですね。

contentとfont-familyを指定
まだまだtofuになってます。
実はFont Awesome5の無料版はfont-family名が「Font Awesome 5 Free」なんですね。
Font Awesome4までとは仕様が違うようです。ということで、font-familyを修正します。

contentと正しいfont-familyを指定
まだtofuになってる!!!!!!
Font Awesomeの中には定められたfont-weightを指定しないと表示されない物があるようです。
こちらのStyles&Prefixesにこっそり(?)記載されていますが、無料版でよく使う「Solid」スタイル(HTMLに埋め込むときのclass指定がfasで始まっているもの)はfont-weightを900に指定します。

contentと正しいfont-familyとfont-weightを指定
やっとtofuが消えました。

CSSで使うときはContentにHTMLタグではなくて「\4字のUnicode」を指定しなくてはならないのもなかなかハマるポイントな気がします。UnicodeはFont AwesomeのCSSまたはWebサイトの各アイコンのページに載っています。

ということで、Font Awesome5をCSSの疑似要素で使うときは
content:"\4桁のUnicode";
font-family:"Font Awesome 5 Free";
font-weight:各スタイルに定められた数字;

を指定しよう
という話でした。

Font Awesomeにはワッフルのアイコンもありますが、どこで使うのでしょう…



sakamo_knowledgeflow at 14:15コメント(0) この記事をクリップ!

2018年05月24日

Google Chromeで画像がぼやけて見えるのを直す はてなブックマーク - Google Chromeで画像がぼやけて見えるのを直すこのエントリーをはてなブックマークに追加

こんにちは、白井です。

突然ですが、ホームページに画像を載せたときに「拡大したわけでもないのに何かぼんやりしてない?」と思ったことがある方はいますでしょうか。

Webサイトを作っていると載せた画像がなんだかぼんやり見えて、疲れてるのかな?と思ったこともありましたが、そういう理由でぼやけているわけではありませんでした。

結論から言うと、
画像がぼやけるのはGoogle Chrome(Windows)特有の現象。
CSSに img{-webkit-backface-visibility: hidden;} といれると直る。

というところのようです。

***

まず、以下の画像を見てみます。

01

弊社製品「ビジネス通話録音」のサイトです。
実際にサイトを見ていただいたほうがわかりやすいのですが、下段Google Chromeはロゴのあたりなど特になんとなくうすらぼんやりとしています。
こちらのサイトにはbackface-visibilityの指定はありません。

次にこちら。

02
これまた弊社の「ひかり電話転送」のサイトです。
(色味はともかく)女性の輪郭などEdge、Chromeともにシャープになっています。
こちらはbackface-visibilityをhiddenに指定してあります。

この画像がぼやける現象はWindows版のGoogle Chromeのみで確認されている現象らしく、img要素にbackface-visibility:hiddenを指定することでなぜか直ります。

もともとbackface-visibilityは「画像の裏側を見せるか否か」のプロパティで、画像がコマ回しのように3D回転するときに裏から見て画像が見えるようにするかどうかなどを指定するときに使うもののはずですが、なぜか画像のぼやけも直ります。
その他にもCSSアニメーションでちらつきがあるときなどに使うと改善されたという情報もあるため、Chromeで見え方が気持ち悪い…というときに一度試してみてはいかがでしょうか。
(裏技的用法なのである日突然使えなくなる手かもしれませんが)

そういえばこの比較画像を作っているときに、随分前のアップデートでChromeの色がくすむようになってしまったことを思い出しました。Edgeってこんなに鮮やかな色をしてたんですね…。


sakamo_knowledgeflow at 17:21コメント(0) この記事をクリップ!

2018年04月06日

Riot.js勉強会へ行ってきました はてなブックマーク - Riot.js勉強会へ行ってきましたこのエントリーをはてなブックマークに追加

こんにちは、宮田です。

昨日、サポーターズcolabのイベントスペースで行われたRiot.jsというフレームワークの勉強会へ行ってきました。

まずは、入口に入るとおしゃれなスペースとサポーターズのキャラクター「サトアズ」が目に入ります。

IMG_0739


そのまま案内の看板にそって目的の部屋に行って、参加者はざっと60人以上いました

IMG_0735



勉強会の形式はセミナータイプで発表する人と聞く人に分けらています。
(自分は聞く側です)

最初は発表者が3人で一人20分程度の発表はじまり、だいたいRiot.jsを案件・プロジェクトでどういうふうに使ってるかの話でとても勉強になりました。

その後はLT大会と懇親会
IMG_0737



写真撮り忘れましたがこのあとに大量にビールが入ります。
自分はまだ飲めないのでソフトドリンクです....


IT業界の先輩方とweb技術や作ったアプリなどの話をしたりできたので満足です。


入り口にあったフレームワークアンケート


IMG_0736
やはり、jQueryが人気ですね

sakamo_knowledgeflow at 16:31コメント(1) この記事をクリップ!

2018年01月25日

「ビジネス通話録音」をリリースしました! はてなブックマーク - 「ビジネス通話録音」をリリースしました!このエントリーをはてなブックマークに追加

こんにちは。白井です。
全国的に冷え込みの激しい今日この頃ですが、いかがお過ごしでしょうか。

さて、弊社ではこの度「ビジネス通話録音」というサービスをリリースいたしました。


ビジネス通話録音バナー


簡単に言うと「事業所などにかかってきた電話をすべて録音する」というものになります。

お仕事中、事業所や事務所にかかってくる電話。その中には後で言った言わないのトラブルに発展するものも少なくありません。電話でのトラブル対策として、また聞き漏らし対策として「通話録音」は非常に重要なポイントなのです。

しかし、通話録音は「価格が高い」「機械の置き場所がない」「古い録音データがデータサーバーの容量を圧迫する」などの理由で敬遠されがちです。
それを「安く」「場所も取らず」「無制限に」録音することを可能にしたのがビジネス通話録音になります。

「安く」「場所も取らず」「無制限」の通話録音を実現できた理由は「ビジネス通話録音」特設ページをご覧ください。

通話録音にご興味のある方はもちろん、気になる方にはお試しで機器の貸出も行っております。
詳しくはこちらの特設ページ、または弊社までお問い合わせください!

sakamo_knowledgeflow at 10:30コメント(1) この記事をクリップ!

2017年11月20日

電話転送自動化リリースです! はてなブックマーク - 電話転送自動化リリースです!このエントリーをはてなブックマークに追加

こんにちは。坂本です。
寒い日が続きますがいかがお過ごしでしょうか。

バナー2

電話転送自動化という電話転送サービスを開発いたしました。
どのようなサービスかと言いますと
電話転送画像1

お昼休みなど、社員がいない時間に電話かかって来るので
その時間のみ、電話代行会社に電話を転送行う会社様など多いと思います。
しかし、電話の転送を手動で行うの面倒ですよね。

電話転送自動化なら、そのお悩みが解決出来ます!

画像16

転送開始から転送解除が設定出来るので、毎日手動での切り替えが不要になります!

パンフ4

値段も月額400円で他社と比較しても圧倒的にお安く使用できます。
※安さの理由はひかり電話転送のみに限定しているからです。

また、自社の電話代行・秘書代行サービスに「電話転送切り替えの手間がかからない!」という付加価値をつけることで、他社の電話代行・秘書代行サービスとの差別化を図ることができます。

本日よりリリース致しました。
お試しで使用することも出来ますので、もしご興味などございましたらご使用下さい。




sakamo_knowledgeflow at 14:00コメント(0) この記事をクリップ!

2017年11月16日

11月9日・11月10日にコールセンター/CRM デモ&コンファレンス 2017 in 東京 に行ってきました。 はてなブックマーク - 11月9日・11月10日にコールセンター/CRM デモ&コンファレンス 2017 in 東京 に行ってきました。このエントリーをはてなブックマークに追加

こんにちは、臼井です。
最近ますます寒くなり、本格的に冬といった感じですね。
皆様風邪を引かないようにお気をつけください


11月9日、10日に池袋で開催されていた展示会のほうに私も参加してきました。
会場の写真は撮り忘れてしまったので、ないのが残念です。

当日はパンフレットと共にペーパーも配布していました。(下はその一つです。タチキリが入ってますが実際に印刷されたものにはありません…)


スマートダイヤラー-チラシ表

資料を手にとってくださった方、デモをご覧になった方々、ありがとうございました。
しばらく展示会に参加する予定ありませんが、またこのような機会がありました際にはよろしくお願いします。

jimu_knowledgeflow at 11:37コメント(0) この記事をクリップ!

2017年11月08日

【宣伝】コールセンター/CRM デモ&コンファレンス 2017 in 東京 はてなブックマーク - 【宣伝】コールセンター/CRM デモ&コンファレンス 2017 in 東京このエントリーをはてなブックマークに追加

callcenter_tokyo2017_form-1

コールセンター/CRM デモ&コンファレンス 2017 in 東京

明日、11月9日・11月10日にコールセンター/CRM デモ&コンファレンス 2017 in 東京という
コールセンター向けイベントに出展します。

株式会社ナレッジフローは
・スマートダイヤラー
スマートフォンで電話営業するシステム

・ビジネス通話録音
企業向け通話録音システム

・電話転送自動化
ひかり電話に特化した自動で行う電話転送サービス


上記3つの製品を出展します。

もし、お時間ありましたらお立ち寄り頂けたら幸いです。







sakamo_knowledgeflow at 18:56コメント(0) この記事をクリップ!

2017年07月31日

夏です。セミナーです。 はてなブックマーク - 夏です。セミナーです。このエントリーをはてなブックマークに追加


こんにちは坂本です。

7月も最後ですね。いかがお過ごしでしょうか?
私は最近子猫が家で暴れ回っていて寝不足です。

さて、ここ最近私は専門学校時代の友人とWEB系のセミナーに行っています。
ワードプレスやHTML、iPhoneのアプリ開発などWEB系だけでも様々な授業があります。

ストアカというWEBサイトからお申込みができるので、
誰でも簡単にできます。

ダウンロード
ストアカ



また、WEB系のセミナー以外にも
ビジネススキルやスポーツ、料理など多種多様で、
自分がやりたい習い事が多くあり内容もそれぞれ興味深い物があります。

是非これから何か習い事をしたい方でお試しで
習い事してみたい方にはオススメです。





sakamo_knowledgeflow at 18:39コメント(0) この記事をクリップ!

2017年01月20日

PCが起動しない、そんな時 はてなブックマーク - PCが起動しない、そんな時このエントリーをはてなブックマークに追加


こんにちは、最近運動不足で首がよく攣る坂本です。

今日はPCが起動しなくなった時の対処法について書きたいと思います。

突然何らかの理由でPCが起動しなくなってしまったという時
今後そんな事が起こるかもしれません。

その場合に下記の手順で起動してみて下さい。


・電源を入れると詳細オプションのメニューが出てきます。
    ↓
・トラブルシィーティングを選択します
     ↓
・詳細オプションを選択
     ↓
・スタートアップ設定を選択

・セーフモードを使うを選択してセーフモードで起動します。

もし、起動しなければ、一度再起動して下さい。

それでも駄目なら、ナレッジフローまでお電話ください。



 

sakamo_knowledgeflow at 18:11コメント(0)トラックバック(0) この記事をクリップ!
PR広告
月別アーカイブ
最新コメント
最新トラックバック
livedoor Readerに登録
RSS
livedoor Blog(ブログ)