フレークの素 | Web制作・システム開発のCreativeFlakeブログ

こんにちは、クリエイティブフレークです。 この例は、画像を使わないでテキストだけでコーディングしています。 そんなの画像を使えば済む話じゃない？という考えの方もCSSだけで組むとこんなにいいことがあります。 メリット１ 全体のファイルサイズが小さくなる メリット２ テキストなのでSEOとしても効果的 メリット３ 文字の変更、フォントサイズ、色の変更が簡単 作り方は簡単。 まずはどうやって表示しているのかという仕組みから説明します。 ベースとなる文字の上に 別の色で半分だけの文字を かぶせるだけ 次はソースコードです。 HTML <span class="halfStyle hs-base" data-content="H">H</span> <span class="halfStyle hs-base" data-content="a">a</span> <span class="halfStyle hs-base" data-content="l">l</span> <span class="halfStyle hs-base" data-content="f">f</span> CSS .halfStyle .hs-base, { position: relative; display: inline-block; font-size: 80px; overflow: hidden; white-space: pre; color: #3c2210; } .halfStyle .hs-base:before { display: block; z-index: 1; position: absolute; top: 0; width: 50%; content: attr(data-content); pointer-events: none; overflow: hidden; color: #6...

こんにちは、クリエイティブフレークです。 一度は聞いたことがあるかもしれない「ゲシュタルト」。 ゲシュタルト 人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt ：形態)と呼ぶ。 人間の脳がものの形、要素をどのように認識するか、ということですね。 人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。 ゲシュタルトの法則１ : 近接の法則 近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。 ゲシュタルトの法則２ : 類同の法則 類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。 ゲシュタルトの法則３ : 共通運命の法則 共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。 共通運命の法則は、近接の法則や類同の法則よりも強く働く。 ゲシュタルトの法則４ : 良い連続の法則 良い連続の法則は、図形はつながった形になりやすいと認識されやすい。 近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。 ゲシュタルトの法則５ : 閉合の法則 【】や（）のように、閉じた形は同じグループだと認識されやすい。 】【 は同じグループと認識しづらい。 ゲシュタルトの法則６ : 面積の法則 小さいものが図として、大きいものが背景として認識されやすい。 ゲシュタルトの法則７ : 対称の法則 対称な図形は閉じた図として認識されやすい。 このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。 たとえばリモコンのボタン配列。 数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。 こちらは私のMacのドック。 急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。 Webデザインにおいては、もしすべてのパーツが単調に置かれて...

こんにちは、クリエイティブフレークです。 おかげさまでCreative Flakeは設立から1周年を迎えました。 「Web制作・システム制作」と銘打ってこれまで様々なものを制作させていただきました。 WebシステムやWebデザインは、常に新しい基準ができたり、新たなツール、流行が変わったりと、日々刻々と変わり続けています。 特に当事務所のある東京ではその流れが速いと感じますが、大変良い刺激になるとも感じております。 Creative Flakeでも時代のニーズに合った柔軟な方式で、いつでも最新の技術を取り入れながら100%自社開発で制作しています。 またWeb以外でも、紙媒体のデザインや、ライティング、コンサルティングなど、いい意味でWeb開発事務所らしくないチャレンジもできました。 これもひとえに良いクライアント様に出会えたこと、理解者がいたことだと感謝しております。 これからも努力を重ね、良いもの、良いサービスを作って参ります。 Creative Flake スタッフ一同 Written by Creative Flake

こんにちは、クリエイティブフレークです。 今回は文字について。 PhotoshopやIllustratorを使ったデザインでも、もちろんWordやExcelだって、文字を置くときは文字のスタイル１つで、印象はだいぶ違います。 こんな悩みが一目瞭然、解決できる便利なサイト wordmark.it です。 パソコン内にインストールされているフォントを一覧表示してくれるサイトです。 まずは画面の説明から。 中央部分、文字を入力する欄にプレビューしたい文字を入れて、Enter（エンター）キーを押すだけ。 オプションとして、 ■positive/negative …… 白黒反転。指定をしなければ、文字色が黒、背景色が白で表示されます。 ■aa/Aa/AA …… 大文字小文字の切り替え。aaがすべて小文字、Aaが先頭文字のみ大文字、AAがすべて大文字で表示されます。 ■font size …… 数字のところにプレビューしたい大きさを入れます。指定がなければ32（単位はピクセル）で表示されます。 ■filter selected …… 選択したフォントをズーム、文字間隔の調整（複数選択可） こんなところがあります。 実際に「Science」と入力してみると、 このように一覧が表示されます。 その中で気になるフォントがあれば、クリックすることでマークしてくれます。 さらにチェックしたフォントを比較する場合は、オプション機能の「filter selected」を利用します。 枠内にカーソルを合わせると、「＋」マーク（ズーム）、「 」マーク（文字間隔調整）、「×」マーク（削除）が現れ、 ズームをすると、こんな風に虫眼鏡で見たような感じに、 文字間隔を変更したい場合は「tracking」をプラスまたはマイナスをクリックして変更します。 時間短縮にもなる便利ツールとしてブックマーク必須サイトです。 Written by Creative Flake

こんにちは、クリエイティブフレークです。 ゴールデンウイーク期間は、基本的にカレンダー通り営業・休業いたします。 4月30日は都合によりお休みをいただきます。 お急ぎの方、急な依頼の方もメールまたはお電話いただければ、対応できる場合もありますので、お気軽にご相談ください。 Written by Creative Flake

こんにちは、クリエイティブフレークです。 今回はSSLのセキュリティについて。 各ニュース、メディアでも大きく取り上げられたように、Open SSLのバージョン1.0系に脆弱性が見つかりました。 このバージョンは2012年3月にリリースされたOpen SSLのバージョンで、現在最新版です。 今回は自分が使っているサイトのSSLが、果たして安全なのかどうか、を調べるツールの紹介です。 SSL Toolbox（SSLツールボックス） ・ Symantec（シマンテック）版 ・ GeoTrust（ジオトラスト）版 ・ Thawte（ソート）版 ▼例えば、amazon.co.jpの場合 こんな風に表示されます。 調べ方は １．調べたいサイトのURLをhttps://から始まる形式で入力 ２．SSLの情報が表示されます。SSLの情報には有効期限やシリアル番号、暗号化アルゴリズムの種類や鍵の長さなどが表示されます。 ３．また、そのSSLがどういうCA（認証機関）を経ているのかという情報も見えます。 さらに、今回のOpen SSLの脆弱性問題を踏まえ、Heartbleed攻撃に対し安全なのかというのが見れるようになりました。 ↓↓上記Amazonの例では安全ですが、こんな場合もあります↓↓ サイトを使う側も、安全性を見極めて使用するように、ですね。 Written by Creative Flake

こんにちは、クリエイティブフレークです。 コーディングをしていると、リストをよく使用するのですが、リストの種類って気にしたことがありますか？ リストは大きく分けて3種類。 ・<ul><li>を使用 ・<ol><li>を使用 ・<dl><dt><dd>を使用 ↓↓何が違うのかというのがこちら↓↓ ■<ul><li>のサンプル HTML <div> <p>試験当日持参するもの</p> <ul> <li>受験票</li> <li>筆記用具</li> <li>写真付き身分証明書</li> </ul> <p>持ち込み禁止物</p> <ul> <li>携帯電話（持ち込みの場合は電源をOFF）</li> <li>問題集、参考書</li> <li>飲食物</li> </ul> </div> CSS div { 　color: #333333; 　font-size: 12px; 　width: 300px; } p { 　background: #f1f1f1; 　border-left: 5px solid #17aad8; 　padding: 5px 15px; } ※リストの装飾については今回は省略します。 ■<ol><li>のサンプル HTML <div> <p>当店人気フレーバーランキング</p> <ol> <li>チョコチップ</li> <li>ストロベリー</li> <li>抹茶ミルク</li> </ol> </div> ※CSSは<ul><li>のサンプルと同じです。 ※リストの装飾については今回は省略します。 ...