flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
最新CSSハック IE10・IE11・EDGE・Chrome・Firefox・Safari｜ホームページ制作 印刷物作成 デザイン事務所｜エイビッツ
〒360-0854 埼玉県熊谷市 玉井南1丁目 TEL：048-594-8880 （平日10:00～18:00 土日祝祭休） E-Mail info@aveit.biz 2016/11/13 相も変わらずmicrosoft系は問題がありますね。期待していたEdgeも最新CSS記述ではプロパティによっていろいろあるようです。 すでに「モバイルファースト」とか「レスポンシブデザイン」などという言葉も、発するのが恥ずかしくなるくらいモバイル全盛期を迎えておりますが、制作のやり取りの中での確認作業はPC中心という、なんとも矛盾な制作現場ではあります。 それでも憎っくきそして愛らしいIE6も過去のものとなり、IE7、IE8そしてIE10もサポート終了！順番がなんだかおかしいですが、Vista搭載のIE9がかろうじてサポート中でありますがこれはね！？！？もういいかなというレベル。それでも頑なにWind
2018年に使いたい！今後の定番にもなりそうなデザインツール5選【デザイナー必見！】
デザイン業界の動きは速く、日々新たなツールが登場しています。他のデザイナーに差をつけるためには、ツール選びも重要です。常に新しいツールを探求し、可能性に心を開いておきましょう。 今回は2018年にぜひ使ってほしい、優れたデザインツールをご紹介します。新年を、新たなツールで新鮮に始めましょう。 1.Adobe XD Adobeがリリースする、最新ツールがこちらです。特にプロトタイピングとモックアップに関して、Photoshopの代替になることを目指して開発されました。PhotoshopとIllustratorの中間を求めるデザイナーに、パワフルな機能を提供してくれます。 2.Sketch App Adobe製品の最大のライバルとなっているのが、このSketchです。デザイナーは何年も、モックアップの作成にPhotoshopを使ってきました。しかしSketchは次第に存在感を増し、Adobe製
Webクリエイターボックスの2017年を振り返る
2017年12月27日 Web関連記事, お知らせ 今年も残りあとわずか！一年間お世話になりました！Webクリエイターボックスも間もなく8周年です！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3 ↑私が10年以上利用している会計ソフト！ 2017年ハイライト 今年あった出来事をまとめました。今年もイベントにちょこちょこ参加して、勉強会等で登壇しています。次はあなたの街に出現…するかも……よ？ 6月30日 Webクリエイターボックス、常時SSLに対応 7月20日 Webデザインギャラリー開始 9月27日 INTERVIEW A GO GO #009に出演 10月14日 CSS Nite in HIR
.htaccessでファイル（拡張子単位）の有効期限を設定する方法
ブラウザのキャッシュを活用する GoogleのPageSpeed Insightの適用可能な最適化に「ブラウザのキャッシュを活用する」という項目に対応する方法をメモ。 <Files ~ ".(gif|jpe?g|png|svg|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=604800, public" </Files> Cache-Control max-age 最低7日間（604,800秒）以上にしないといけないようです。画像やWebフォント系は変更はそうそうないので、30日間に設定。CSS/HTML/JavaScriptファイルは、最
【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方
Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。 jQyeryなどの外部ファイルは一切不要で、単体で動作するスグレモノ。 実装方法は以下より。 プラグイン［Macy.js］の使い方 早速ですが、まずは公式サイトから、必要なファイルをダウンロードしてきます。 Macy.js : 公式サイト 最低限必要なファイルは「macy.js」または１つだけ。あらかじめ圧縮されているのでダウンロードしたものをそのまま使いましょう。 htmlファイルの適当な個所で読み込んでおきます。 <body> <script src="macy.js"></script> </body> 続いて［Macy.j
WordPress カスタム投稿タイプのラベルやスラッグの表示方法 - by Takumi Hirashima
WordPress でカスタム投稿タイプのラベルやスラッグを取得して表示する方法を紹介します。 例えば、アーカイブページでカスタム投稿のラベルを表示したい時に便利な方法です。 カスタム投稿タイプのラベルを表示する方法 カスタム投稿タイプの名前（スラッグ）を表示する方法 カスタム投稿タイプのディスクリプションを表示する方法 カスタム投稿タイプのラベルやスラッグを使った条件分岐の方法 投稿タイプのラベルを見て投稿タイプを判別する方法 投稿タイプのスラッグを見て投稿タイプを判別する方法 カスタム投稿タイプのラベルを表示する方法 カスタム投稿タイプのラベルを表示する場合、次のコードをカスタム投稿を表示するテンプレートに追加します。 <?php echo esc_html(get_post_type_object(get_post_type())->label); ?> カスタム投稿タイプの名前（ス
WordPress リンク付きターム一覧の表示方法 - by Takumi Hirashima
WordPress でリンク付きタームの一覧を表示する方法を紹介します。 例えば、サイドバーなどでリンク付きターム一覧を表示したい時に便利方法です。 タームの一覧を表示する方法 タクソノミーのタームの一覧を表示したい場合は wp_list_categories を使用します。 例えば、タクソノミーのスラッグが product-cat のターム一覧を表示したい場合は、 次のコードをテンプレートに追加します。 <ul> <?php // タームの一覧を表示 $catlist = wp_list_categories(array( 'taxonomy' => 'product-cat', // タクソノミーの指定 'title_li' => '', // リストの外側に表示されるタイトルを非表示 )); echo $catlist; // タームの一覧を表示 ?> </ul> タームと合わせて、
注目を集めたい！高品質なインフォグラフィック作成で役立つツール7選
*インフォグラフィック（Infographic）*とは、データや情報を視覚的に整理し、誰もが素早く情報を理解できるようにまとめたクリエイティブのことです。 文字で情報を伝えようとしても、情報量が多過ぎて冗長的になってしまいがちです。しかし、インフォグラフィックを使えば、直感的に要点を整理することができます。 今回は、高品質なインフォグラフィックを作成するのに役立つ便利ツール7選をご紹介します。 シンプルなのに説得力のあるグラフィックを作成するのに、労力もコストも必要ありません。ぜひ、これらのツールを使いこなしてみてください。 高品質なインフォグラフィック作成で役立つツール7選 1. Visme Vismeは、シンプルで直感的なインフォグラフィックを作成するのに役立つオンラインサービスです。 作成する手順は非常にシンプルです。まず、数百種類のテンプレートの中から、自分の気に入ったものを1つ選
商用可で完全無料！2017年公開のフリーフォント素材129個総まとめ
2017年は、特にたくさんのフリーフォントが公開され、当サイトで紹介した素材も637個にのぼります。 今回は2017年に公開された素材の中から、商用利用可能で無料ダウンロードできるフリーフォントのみを、カテゴリ毎に分けてまとめています。 コンテンツ目次 1. 日本語フォント 2. 万能フォント 3. 筆記体フォント 4. サンセリフ書体 5. セリフ書体 6. 手書きナチュラル系フォント 7. 筆ブラシ・フォント 8. ビンテージ・フォント 9. デコレーション・フォント 01. 日本語フォント 無料で商用利用できる日本語フリーフォント、18書体をまとめています。 【2017年保存版】デザインが良くなる！最新の日本語、和文フリーフォント35個まとめ 日本語フリーフォント、これだけは持っておきたい厳選22個まとめ しっぽり明朝 流 源流明朝の漢字としっぽり明朝の仮名を合成したコラボレーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
