CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的なテクニックについても解説されています。 Inside the mind of a frontend developer: Hero section by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装するヒーローコンポーネント HTMLの構造を考える グラデーションの背景 疑似要素 スマホでの表示を考える ヒーローの最小高さ 配置のためのCSS Gridとその際の課題 コン
[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル
CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。 下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh
パフォーマンス改善やセキュリティに役立つ.htaccessの設定 | コリス
ウェブサイトのパフォーマンスの改善やSEO、セキュリティに役立つ.htaccessの設定を紹介します。 17 Useful Htaccess Tricks and Tips 備考：Apache チュートリアル: .htaccess ファイル、Apache コア機能 [ad#ad-2] .htaccessの設定：パフォーマンスやSEO関連 .htaccessの設定：セキュリティ関連 .htaccessの設定：パフォーマンスやSEO関連 .htaccessでタイムゾーンを設定 .htaccessでタイムゾーンを設定します。 例：東京 SetEnv TZ JST-9 もしくは、 SetEnv TZ Asia/Tokyo .htaccessで301リダイレクトを設定 .htaccessで301リダイレクト（永続的なリダイレクト）を設定します。 例：旧ファイル（old.html）、新ファイル（new
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、国内のフリーイラスト素材の総まとめ