CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
Photoshopのスマートオブジェクトを拡大して書き出すとぼける現象について - saucer
Photoshopのデザインカンプ上で、スマートオブジェクトを50％以下に縮小しておき、画像アセット生成などで200％にして書き出す手法があります。スマホなどの高解像度ディスプレイ対策としては定番ですね。しかし、ある条件下では、元の画像を50％以下に縮小しているにも関わらず、書き出し後の200％画像がぼけてしまうことがあります。この点について気になったので、少し整理してみました。（2016.4.15／注意点を追記） 2016.4.15／注意点を追記スマートオブジェクトの特長スマートオブジェクトは、拡大、縮小を繰り返しても劣化しないというのが特長です。もちろん、オリジナルのサイズより大きくする場合は別ですが、いったん縮小してから再び拡大しても、その都度オリジナルからピクセルを生成しますので、常に最適な画質が保持されるというわけです。 スマートオブジェクト入門～直しに強いPhotoshopデー
どこからでも固定 IP が使えるインターリンクのマイ IP がとても便利
引っ越した後、固定 IP を引いていないタイミングで固定 IP が必要になり「なるべく早めに使えるようになって費用が手頃なところがないかなー」と調べたところ「どこでも固定 IP 環境を実現」と書いてあるマイ IP を見つけました。 マイIPはどこでも固定IP環境を実現します – INTERLINK 「固定 IP は回線にヒモ付いている、その場所からでないとダメなもの」と思っていましたが、このマイ IP はインターリンクの VPN サーバーを経由することで固定 IP になるというもので、家でも外出先でも固定 IP が使えます。WiMAX などでも固定 IP で接続できるのはかなり便利！ そんなわけで早速契約してみました。……と、契約したのはもう数ヶ月前の話なのですが、しばらく使ってみて安定しているなと思ったので改めて書いてみます。
レスポンシブWebデザインに関しての備忘録 - NxWorld
This Is Responsive わざわざこのエントリーを書かないでも、ここ見れば良いじゃんという気もしなくはないですが...。 レスポンシブなWebデザインに関する情報やツールなどをまとめているリソース集でかなりの量があります。 Responsive Design in 3 Steps | Web Designer Wall viewport、IE用JS、Media Queriesなど、レスポンシブWebデザインを実装する際の基本的な3ステップ。 CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き | Webデザインレシピ Media Queriesの使い方や注意書きをまとめたエントリー。 わかりやすくまとまっているので、これからレスポンシブに挑戦するという方は特に一読してみるといいと思います。 レスポンシブ・ウェブデザインでの C
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
デザイナーが書くコードについて思うこと（1） | ツクロア - DESIGN LAB
あらためてなるほどな、と思えるいい記事でした。 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる | freshtrax | btrax スタッフブログ 自分にも重なる部分があると思って経験と雑感込みで書いてみた、毎週水曜更新のデザインラボbyツクロア、今週私のターンではデザイナーがコードを書く意味についてです。 一枚絵では通用しないアプリデザイン 某携帯電話メーカーからAndroidアプリデザインの依頼があったときの話です。 電話着信画面や起動直後の待受ロック解除のデザインを含め、使い心地や操作感から画面構成まで一緒に考えてもらえるデザイナーを探しているということでした。 担当者いわく「静止画だけではアプリデザインの良し悪しが決められないんですよ」という話から始まり、では「実際うごくデザインモックを作りながら一緒に考えましょう」という作業の流れを提案して検証からリリー
MAMPを使ってローカルで複数サイトのバーチャルホストを設定＆イントラ環境や仮想環境からもそのサイトを確認する設定方法
以前、『MAMPを使ってMacのローカルで複数サイトのバーチャルホストを設定する方法』というエントリーを書いたのですが、もっと具体的に書いておいて、今後に活用しようと思ったので改めて、ちょっと内容も加えて書いておきます。 ちなみに今回の内容は、先日行ったSaCSS Weekly の１週目ので行った内容と同じになっております。 今回の設定での各達成目標 バーチャルホスト：http://sacss/ でPC内の特定のディレクトリをルートとして表示する バーチャルホストを複数設定してみる イントラ環境と仮想環境からのアクセスでも特定のディレクトリをルートとして表示する htaccessをバーチャルホスト毎に使えるようにする 今回はより明確に、この４つをそれぞれ達成できるように設定方法についてを書いてきたいと思います。 バーチャルホスト：http://sacss/ でPC内の特定のディレクトリをル
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
gymnast colon （ジムナストコロン ）｜まくらのキタムラ
1 1 0 : 0 5 4 3 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 P . M . 1 1 : 3 2 1 0 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 P . M .
Googleアナリティクス活用：ページ内A/Bテストをする方法
こんにちは。Googleアナリティクスラブのカグア！です。 Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか？ なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位でA/Bテストする方法が書いてありましたので、ご紹介します。 実際試しましたけど、実装もすごい簡単でしたよ。 追記：2017年2月8日 GTM実装しているのならば、Googleオプティマイズとの組み合わせが、もはや最強かもしれません。 ＞＞Googleオプティマイズを使えたのでざっくり解説！時代はGGOP 関連記事 ＞＞A／Bテストの失敗事例、テストすること自体が有効という思い込み GoogleアナリティクスのA/Bテストとは 正式にはウェブテストという名称です。Googleアナリティクスのレポート内の行動＞ウェブテスト にあります。 ランデ
サイズ感とバランスが大事！ レスポンシブにおける分量とフォントサイズ
行間と可読性 これまで、私たちはレスポンシブデザインにおけるフォントサイズと分量の関係について注目してきました。しかし、行間もまたユーザーの閲覧に影響を与えます。 行間は水平方向の動作に影響する ユーザーは水平にも垂直にもコンテンツを閲覧するため、テキストの行は、織物のように縦横無尽ではなく、水平に見ることをを促すべきです。 行間が詰まりすぎると、ユーザーの目の水平方向の動きを衰えさせ、テキストの左端の流し読みを促してしまう恐れがあります。また、ユーザーに同じ行を繰り返し読むことを強要する可能性もあります。一方、行間が緩すぎると、テキストの行が視覚的に「浮遊している」ように見えてしまいます。行は一つのまとまりの単位ではなくなり、垂直方向による流し読みがより難しくなってしまいます。 完璧な行間は存在しませんが、大体フォントサイズの150％が最適な場合が多いです。
Pharrell Williams - Happy
HappyPharrell Williams* Concept & Direction We Are From L.A. Production Company *I am OTHER - General Manager Caron Veazey I am OTHER - Creative Director Mimi Valdés *Creative Director Yoann Lemoine / Woodkid *Iconoclast - Managing Director Charles-Marie Anthonioz Iconoclast - Executive Producer Kathleen Heffernan Iconoclast - Executive Producer Roman Pichon Herrera *Producer Jett Steiger Line Pro
背筋が凍る、Webデザインをpsdでやり取りする際の「超重要」なのに見過ごされがちな設定
寒くなってきたのに怪談タイトルでｻｰｾﾝ でも… カラー設定もお互い「WEB・インターネット用-日本」に合わせていたのに… デザインした時に見えていたもの（右）と、psdファイルを渡した先（左）でこう変わっていたとしたら… しかも無警告で変わっていたとしたら…？？？ どうだ怖いだろう…！ ？？何が起きた？？ まずこの現象の理由ですが、 「レイヤーで重なった塗りやテキスト」のフチの合成処理時に、レイヤー同士の重なり具合を変える設定があるのです。 こんなレイヤー構造にしていたとします。テキストのアンチエイリアスは鮮明。多角形には属性パネルでぼかしをかけました。 カラー設定プリセットを「WEB・インターネット用-日本」の完全なデフォルト値（というか期待している値）の状態にしていると、こう見えます。 CS6のカラー設定。Web・インターネット用 – 日本になってますね。 先方も同じカラー設定にして
ローディングGIF画像と便利な作成ツール16選
Webサービスを利用するユーザーに対して、読み込み中と分かりやすく伝えるローディングGIF画像は重要な存在です。コンテンツが読み込み中であることを伝えなければ、なんらかの不具合であると勘違い、あるいは気付かずに離脱してしまう可能性があるからです。 今回は、そのまま使えるローディングGIF画像、簡単に画像生成ができる便利ツールをまとめてご紹介します。今すぐ画像を使いたい方はもちろん、自作で画像を用意して使ってみたいと思っている方もぜひ参考にしてください。 ※素材数などの情報は2016年4月8日時点のものです。今後変更となる可能性がありますのでご了承ください。 フリーのローディングGIF画像 1.フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -｜PIXEL LAB http://www.pixelimage.jp/blog/2012/04/loading_icon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
table周りで便利なスニペットやプラグイン - NxWorld
ngrokを使ってローカルの開発環境を一時的に外部に公開する - Qiita
Flinto - The App Design App
オールインワン美容ドリンク フラワージュ(flowage)シリーズ｜コラーゲン・プラセンタ商品ならフラコラ