tuki0918のブックマーク - はてなブックマーク

たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。上下中央揃え: place-it ems: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-it ems: centerを使えば、思ったよりに簡単に実現できます。まず、display: gridを記述したら、一緒にplace-it ems: centerを同じ要素に追加します。place-it emsは、align-it emsとjustify-it emsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-it emsとjustify-it emsの両方がcenterとして設定されます。 .paren

tuki0918 2020/08/19

リンク

Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

tuki0918 2020/07/08

リンク

動画がアツい！After Effectsで使える無料テンプレート厳選65個カテゴリ別まとめ【完全版】

これまでAdobe After Effects（アフターエフェクト）と言えば、プロの動画クリエイター向きツールというイメージでしたが、動画をつかったコミュニケーションが普及したことで、After Effectsを活用するシーンがますます増えています。最先端のビジュアルエフェクトとモーショングラフィックスを実現でき、柔軟にカスタマイズできますが、ゼロから制作すると時間がかかることもしばしば。そんなときは、After Effectsのテンプレートを利用して、作業を効率化してみましょう。ここでは、無料ダウンロードできるAfter Effects用テンプレート素材厳選65個を、カテゴリーに分けてご紹介します。コンテンツ目次 0. After Effectsとは？ 1. タイポグラフィー用テンプレート（6個） 2. ローワーサード用テンプレート（7個） 3. イントロ用テンプレート（7個） 4

tuki0918 2019/03/24

リンク

【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめコンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

tuki0918 2017/01/26

リンク

ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ

ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。）幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニューもしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す

tuki0918 2016/11/17

リンク

2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ

アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行