Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数を使用して、スペースのシステムを設定する方法 すべてのコンポーネントにデフォルトのpaddingを設定する方法 marginのユーティリティ スペース値を追加する場合 固定のスペース値が必要な場合 スペースを定義したSCSSファイル はじめに 元々は、近日公開予定の「Web Comp
[レベル: 上級] この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 のセッションをレポートします。 今年の Chrome Dev Summit で Google が特に力を入れていたテーマはウェブのパフォーマンス改善でした。 モバイルウェブ高速化の成功事例のセッションと高速化のための最新テクニックのセッションを先週はこのブログでレポートしています。 この記事で紹介するセッションのトピックは、パフォーマンス改善に役立つツールです。 ウェブサイトの高速化にはどんなツールが利用できるのでしょうか? 一緒に見ていきましょう。 Metrics 何かを改善しようとするなら、計測することが重要。まず何を計測するかのMetrics(指標)を決める。ユーザーにかかわる指標を計測する。 ウェブページでは、次の 3 つを指標にするといい。
資料作成でよく使うスクリーンショット機能が、最新版「Windows 10 October 2018 Update」で進化。画面上の領域を好きな形に切り抜き、すぐにアプリで加工できるようになりました。 [Win]+[Shift]+[S]で領域を選ぶ パソコンのスクリーンショットを撮影(画面キャプチャー)するには[PrintScreen]キーを押すのが定番ですが、Windows 10では[Win]+[Shift]+[S]キーで領域を選択しての撮影も可能です。 Windows 10の最新版「October 2018 Update」では、この領域を選択してのスクリーンショットがさらに強化されました。従来から可能だった四角形の領域だけでなく自由な形に領域を設定でき、シームレスに「切り取り&スケッチ」(切り取り領域とスケッチ)アプリを使った編集も可能になっています。 領域を選択してスクリーンショットを
シンプルで長く愛用できる書体から、トレンドの手書きやブラシをつかったレトロモダン書体、人気の高い筆記体やナチュラル系などデザインの幅が広がる最新フリーフォント素材を集めています。 高品質な素材のみを厳選しているので、入力した文字にフォントを適用するだけで、ガラリと雰囲気を変え、デザインを魅力的に仕上げることができます。デザインアイデアに困ったときにも、参考として目を通してみると良いでしょう。 商用可能な無料フォント限定!2018年上半期公開のフリーフォント厳選80個まとめ これは使える!実用性の高い筆記体フリーフォント97選 2018年版 【 2018年版】デザインの腕があがる!すごい無料サンセリフ系フォント厳選50個まとめ 無料ダウンロードし放題!すごい最新フリーフォントまとめ 2018年11月度 Modular Font Family 滑らかな曲線カーブで描いた大文字アルファベットで、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く