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

キャッチコピーや見出しをテキスト化した場合、思わぬ場所で改行され、読みづらいと思ったことはありませんか？ 特に、PCではきれいに表示されても、スマホでは…ということもありますよね。 しかしレスポンシブデザインの場合、brタグを使うわけにもいかない。 これはよく使うCSSのdisplay要素とHTMLのspanタグを活用することで解決できます。 ▶サンプルページ HTML <span>改行させたくない</span> <span>語句を</span> <span>タグの中に</span> <span>入れるだけ。</span> CSS span { 　display: inline-block; } ▼PCでの見え方の違い まさかのこれだけで、誰でも簡単に折り返しをコントロールできちゃう。 ▶サンプルページ Written by Creative Flake

使いたいと思った写真の横幅が少し足りなかった！という経験はありませんか？ そんな、幅の足りない写真も使えるようにできるテクニックの紹介です。 まずはPhotoshopで画像を目的のサイズに置きます。 すると、こんな感じで横が少し足りない。 写真の端から足りない部分くらいの幅を、「長方形選択ツール」でコピー＆ペーストします。 ペーストした写真の一部の画像を「編集」→「変形」→「水平方向に反転」から、鏡のように反転させます。 不足部分に反転させた写真の一部を配置します。 写真は変になりますが、元の写真と上で反転配置した写真をレイヤー結合します。 写真のおかしい部分を「長方形選択ツール」で選択、再びコピー＆ペーストします。 しかし、まだ貼り付けた感があるので、ナチュラルな感じに仕上げるために、 「コピースタンプツール」や「スポイト修復ブラシツール」等を使って、自然な写真にします。 片側が完了しました。 反対側も同様に行います。 これで自然な感じで足りなかった部分を写真で埋めることができました。 今回使用したフリー写真は pexels.com のCC0ライセンスを利用しました。 Written by Creative Flake

すっきりとしたエフェクトで、表示・非表示を切り替えるメニュー「hamburgler.js」。 PCとスマートフォンで同じデザインを使えて、しかも軽量。 まずは動作はこんな感じ。 Demo & Download 左上のメニューアイコンをクリック（スマホ、タブレットはタップ）すると、メニュー画面が展開されます。 Step1 jQueryを読み込みます。 GoogleのCDNの場合は <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> jQueryのCDNの場合は <script src="https://code.jquery.com/jquery-1.11.3.js"></script> Step2 jsファイルとcssファイルをhead内で読み込みます。 <script src="hamburgler.js"></script> <link rel="stylesheet" href="hamburgler.css"> Step3 body内に次のコードを記述します。 <div class="mobilenav"> <li><a href="#">Menu Name 01</a></li> <li><a href="#">Menu Name 02</a></li> <li><a href="#">Menu Name 03</a></li> <li><a href="#">Menu Name 04</a></li> <li><a href=...

撮った写真が思いのほか暗くなってしまった、というとき、本当は写真を撮る段階で調整するのがベストなのですが、どうしてもこの写真がいいという場合におすすめのPhotoshop技術を3パターンご紹介。 ▼元の写真 ▼レベル補正を使用 「イメージ」→「色調補正」→「レベル補正」またはショートカットキーでCtr＋L（Windows）、Cmd＋L（Mac）で操作ウインドウを開きます。 三角のツマミ（△）を動かして全体を明るくします。 簡単に明るさを調整できるメリットがある一方、やりすぎると色まで飛んでしまうというデメリットもあります。 ▼シャドウ・ハイライトを使用 「イメージ」→「色調補正」→「シャドウ・ハイライト」とたどって操作ウインドウを開きます。 シャドウの値を大きくすると明るくなり、ハイライトの値を大きくすると影がつきます。 レベル補正では全体を明るく／暗くするのに対し、シャドウでは暗い部分が明るくなり、ハイライトでは明るい部分が暗くなります。 なので、部分的に明るくしたい／暗くしたいという場合におすすめです。 ▼HDRトーンを使用 HDRトーンを使用するとHDR風な写真を作ることができます。 HDRでは、人間が目で見たイメージにより近い写真を再現することができます。 「イメージ」→「色調補正」→「HDRトーン」をたどって操作ウインドウを開きます。 デフォルトでは明暗・コントラスト・彩度（鮮やかさ）の強い雰囲気になるので、値をいくつか抑えつつ調整します。 上記3つの方法とも、操作ウインドウの「プレビュー」をチェックのオン／オフを切り替えると、プレビューしながら値の調整ができます。 元となる写真の明るさや、雰囲気に合わせて使い分けたり、複数の方法を合わせて加工してみるとよいですね。 Written by Creative Flake

最近はログインスクリプトを書くとき、いろいろなソーシャルプラットフォームに対応できるようにしてほしいという要望が多くあるため、 OpenID のみを使ってきたのですが、 OAuth （オープンプロトコル）を学んで、おもしろいダイアグラムを見つけました。 参照： http://tools.ietf.org/html/rfc6749 ユーザーが認証を与えると、アクセストークンとリフレッシュトークンのペアをもらいます。そうすることでユーザーはアクセストークンを使ってリソースにアクセスできるようになります。 ここで最も重要なポイントは、アクセストークンはすぐに有効期限切れになってしまう点です。アクセストークンが切れると、リフレッシュトークンを使って新しいトークンのペアをもらいます。そうすることでセッションが常に新しく、乗っ取りが難しくなります（ちゃんと実装していれば。） そこで、OAuth 2.0は安全ななメッセージ交換をするのにこれは非常にいい方法だと考えました。というのもOAuth 2.0は1.0よりもよくないのですが、参考として It took IETF about 31 draft versions and the resignation of the lead author/developer Eran Hammer from the committee to finally publish the spec. Eran sparked a controversy by calling the spec "a bad protocol and a case of death by a thousand cuts". 参照： http://code.tutsplus.com/articles/oauth-20-the-good-the-bad-the-ugly--net-33216 自分がこれはとてもよい方法だと思う理由に入る前に、まずは基本的な暗号化方式と鍵交換をおさらいしたいと思います。 ▼対称鍵暗号 最も簡単な暗号化／復号化方式で、暗号文は送信者と受信者の両方に、メッセージを相互変換するための共通鍵（ルール）を作ることです。 しかしこの方法だと、第三者に鍵を盗まれてしまう可能性があったため...

「どのプログラミング言語を学ぶと良いですか？」、「どうやって勉強すれば良いですか？」 しばしばこのようなご質問をいただきます。 最も効果的にプログラミング言語を学ぶ方法を紹介します。 １．作りたいものを決める 言語からではなく、「作りたいもの」をまず決めましょう。 これは、自分に興味があるものを選ぶと尚よいでしょう。 シューティングゲームを作りたい 体調管理アプリが作りたい オジリナルの関数電卓を作りたい etc... これ作れたら楽しそう！というものから始めましょう。 ２．材料を考える では、作りたいものが決まったら、必要な材料を揃えましょう。 ここからは、ネット検索を活用しながら、どんな材料が必要なのか書き出してみます。 プログラミング言語はJavaがいいかもしれない ボタンが必要そうだ タイマー設定があったらよさそう etc... ３．材料のもととなるものを探す 材料が決まってきたら、その材料のもととなるものを探しましょう。 ゼロベースで作っていっても良いのですが、初めて学ぶ場合、材料のもとを自分なりにアレンジするところが重量なポイントです。 ここでも検索を使って、サンプルソースなどを探します。 【サンプルソースのコピペはだめ】 今やあらゆるサンプルがネットで公開されています。目的にかなり近いサンプルもすぐに見つけられるかもしれません。 当然なことですが、サンプルソースはカスタマイズすることが前提です。 ４．作ってみて考える 必要な材料のもとをいくつか見つけてきたら、それらをくっつけたり、必要な部分を抜き出したりして、目的のものになるように工夫をしてみましょう。 実際に作業をしていくと、「不足しているパーツ」や「実はいらなかったソース」も出てくるかもしれません。 必要に応じて２．へ戻って部分的な材料あつめも行いましょう。 この学習方法のポイントは、 ソースコードが読めるようになる サンプルソースを使うことで、ソースコードの基本的な構造が分かるようになり、内容が理解できるようになります。 応用／拡張できるようになる カスタマイズすることで、もとのソースを自分オリジナルのもの（のように）することができます。 ダウンロード＆コピペだけではちょっとした機能...

htmlでリストと言えば、ul要素、ol要素、そしてdl要素の3種類があります。 そのうち、「使い分け方が分からない！」という声の多いul要素とol要素の違いと属性を学びましょう。 ▼ul要素は順不同 ul要素の中身は順序を入れ替えても問題ありません。 例えば、レシピの材料や、持ち物リスト、参加者メンバーなど、各要素の順序を入れ替えても大丈夫です。 See the Pen HTML by CreativeFlake ( @creativeflake ) on CodePen . そして、ul要素を使用するとブラウザで自動的に先頭に「・」マークがつきます。 ▼ol要素は順番が大切 ol要素は順番をつけるリストです。 例えば、レシピの工程や、ランキングなど、各要素の順番を入れ替えると意味が変わってします場合です。 See the Pen HTML by CreativeFlake ( @creativeflake ) on CodePen . ol要素を使用すると、"1.", "2."…と番号が振られます。 ▼ol要素の属性「start」 ol要素のオプションのひとつにstart属性があります。 これは初期値を変更するものです。 See the Pen HTML by CreativeFlake ( @creativeflake ) on CodePen . ▼ol要素の属性「reversed」 reversed属性は、番号を逆順にするものです。 これはHTML5で新たに追加された属性です。 See the Pen HTML by CreativeFlake ( @creativeflake ) on CodePen . Written by Creative Flake