中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

Instagramに使用されているCSSのテクニックを紹介します。 世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？ Inspect Element As A Way To Feed Your Curiosity by Ahmad Shadeed はじめに Instagramに使用されているCSSのテクニック レイアウトにCSS GridやFlexboxを使用していない Instagramのアンケートに使用されているCSSのテクニック 終わりに はじめに フロントエンドのデベロッパーにとっての最高の贈り物のひとつは、Webページを調べるだけで何がどのように実装されているのか、CSSが裏でどのように機能しているのか確認できることです。Webページを見ている時に気になるレイアウトやエフェクトがあり、どのように実

画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー

minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive Into CSS Grid minmax() by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Gridにおけるminmax()関数 minmax()のバリデーション minmax()をシンプルなグリッドに使用する auto-fitとauto-fillの相違点 minmax()の便利な使い方 考えなしに、auto-fitを使うことの弊害 終わりに

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。 CSSだけで、クリック可能な範囲を広げるスタイルシートのテクニックを紹介します。 下記のようなa要素がボタンだけでも、クリック可能な範囲がカード全体に広がります。

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。 Line-height Crop by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 先頭行だけを上に揃えるスタイルシート テクニックの解説 免責事項 はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとし

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。 Breaking Out With CSS Grid Layout by Tyler Sticka CSSのレイアウトでありがちなバグ・仕様？ 実装のゴール CSS Grid Layoutを使った実装 新しいテクニックの使い方 実装の注意点 CSSのレイアウトでありがちなバグ・仕様？ 固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。 参考: Breaking Out With Viewport Units and Calc

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)

Copyright © 2010-17 MdN Corporation, an Impress Group company. All rights reserved. デザインってオモシロイ -MdN Design Interactive-