すべての記事 - ページ 1687

フロントエンド開発者は彼らが得ることができるすべての最高のリソースを必要とします。通常これは フレームワークの上で作業する Bootstrapのように、基本的にすべてが詰まっています。. しかし、たくさんの選択肢があります。 Shoelace.css あなたが精通しているべきであるそのような例です. この 無料のCSSキット 完全なフレームワークではありません。その代わりに、 開発者向けスターターキット 何十ものカスタムCSSスタイルを一から構築したくない人. いつでもCSSリセットを使用できますが、それは各ブラウザを同じようにフォーマットするだけです。リセットは より複雑なタスクを処理するための包括的な方法ではありません。, それがまさにShoelaceのポイントです. それは ノードでCLIが実行されているパッケージ どのプロジェクトにもインストールできます。しかし、それも CDNバージョンがあります npmを使いたくない場合. これをすべて設定するには、 インストールガイド 公式文書にあります。これはCSSライブラリとして分類されていますが、 JavaScriptコンポーネントが付属していますか, も。が それらのほとんどはjQueryで動作します, だからあなたは依存関係としてそれを含める必要があります. ドキュメントを詳しく調べると、 カスタマイズページ あなたを示しています CSSで変数を編集する方法....

ショートハンドとロングハンド - 一つは簡潔でもう一つは正確です。 1つは簡潔さへの欲求から生まれましたが、もう1つは明快さを保つためにしっかりしています。いずれにせよ、彼らは彼らの目的、長所と短所を持っています、いわば. この記事ではCSSの速記表記と速記表記の両方にいくつかの光を当てます。. 速記プロパティとは? 速記プロパティ CSSプロパティの他のセットの値をとるプロパティです。たとえば、次の値を割り当てることができます。 ボーダー幅, ボーダースタイル そして ボーダの色 を使用して 境界 財産だけ. 基本的に, ボーダー：1px純青色。 と同じです。 ボーダー幅：1px。ボーダースタイル：ソリッド。ボーダーカラー：青。 CodePenでPreethiによるPen zGNKex（@rpsthecoder）を参照してください。. これにより、個々のプロパティ値を別々に宣言する必要がなくなります（冗長で、時間とスペースがかかります）。また、宣言内で除外されているプロパティもリセットされます。. どのように動作しますか? 前述のように、他のプロパティ値のセットを速記で記述します。短縮形のすべてのプロパティ値がその順番に関係なくても問題ありません。 種類が違う のように 境界. のプロパティの 同種の値 余白のように,...

ほんの数例を挙げると、CSSプリプロセッサ、LESS、Sass、Stylus、およびSwith CSSがいくつかあります。. CSSプリプロセッサ, 前にも述べたように、これは主にCSSのオーサリングをより動的に、組織的にそして生産的にすることを目的としています。しかし, 問題は、それらのうちどれが最もうまくいくかです。? もちろん、それらすべてを見ているわけではありません。代わりに、最も人気のあるものを2つだけ比較します。 セスとレス. 決定するために、7つの要因のうち2つを比較します。同点の場合は、両方に1ポイントが与えられます. さぁ、始めよう. インストール 非常に基本的なステップから始めましょう, インストール. SassとLESSはどちらも異なるプラットフォーム上に構築されており、SassはRuby上で実行されていますが、LESSはJavaScriptライブラリです。 だった 実際にもRuby上に構築されています 最初は）. Sass： Sassが動作するためにはRubyが必要です。Macではこれがプレインストールされていますが、WindowsではSassを使い始める前にインストールする必要があるでしょう。さらに、Sassはターミナルまたはコマンドプロンプトからインストールする必要があります。あなたが代わりに使うことができるいくつかのGUIアプリケーションがありますが、それらは無料ではありません. もっと少なく： LESSはJavaScriptに基づいて構築されているので、LESSのインストールはJavaScriptライブラリをHTMLドキュメントにリンクするのと同じくらい簡単です。 LESSをCSSにコンパイルするのに役立ついくつかのGUIアプリケーションもあり、それらのほとんどは無料で非常によく機能しています（例えばWinLessおよびLESS.app）。. 結論：LESSが明らかにリードしている. 拡張機能 SassとLESSの両方とも、より速くより簡単なWeb開発のための拡張を持っています. Sass：前回の投稿で、現在および人気のあるSassベースの拡張であるCompassについて説明しました。コンパスには、短時間でCSS3構文を書くためのMixinがいくつかあります。. しかし、コンパスは単にCSS3ミックスインを超えて、ヘルパー、レイアウト、タイポグラフィ、グリッドレイアウト、そしてスプライト画像のような他の非常に便利な機能を追加しました。それはまた持っています config.rb CSSの出力やその他の設定を制御できるファイルです。つまり、要するに、コンパスはSassでWeb開発を行うためのオールインワンパッケージです。. もっと少なくLESSにもいくつかの拡張機能がありますが、必要なものがすべて1か所にまとめられているCompassとは異なり、それらは別々の開発者によって構築されています。これは熟練したユーザーにとっては問題にならないでしょうが、LESSを始めたばかりのユーザーにとっては、ワークフローに合った適切な拡張子を選択するために時間がかかる必要があります。. あなたのプロジェクトに含める必要があるかもしれないいくつかのLESS拡張があります：...

CSSの前処理 これは、ほとんどのWeb開発者がすでに学んだ、または読んだことのある概念です。開発者がこの普及しているテクノロジを理解できるように、CSSの前処理について詳しく説明しました。しかし、どうですか ポストプロセッサ? これらの比較的新しいツールは、次の点で似ています。 Web開発ワークフローに影響を与える, しかしそれらは作動します CSS開発の反対側 （“役職” 開発）. この記事では、私が紹介したいのですが 後処理の基本, それがどのように動作するのか、なぜあなたがそれを使うのか、そして後処理でCSSゲームを立ち上げるために使えるいくつかのライブラリ/ツールを共有する. 後処理と前処理 の 前処理革命 ときに起こった Sass / LESSが大ヒット. これらのツールを使用すると、開発者はCSS内で変数、ループ、関数、およびミックスインを使用できます。これはほとんど基本的なCSSの開発になります プログラミング言語に似ています 拡張機能付き. 後処理 プレーンなCSSをすでに作成した後に発生します。 さらに拡張する 自動化を通じて。これは含めることができます クラスセレクタの拡張, または 自動追加プレフィックス 特定のCSSプロパティについて....

の CSSグリッドレイアウトモジュール を導入することで、レスポンシブデザインを次のレベルに引き上げます。 新しい種類の柔軟性 それは今まで見たことがなかった。今、私たちだけができない カスタムグリッドを定義する 純粋なCSSだけで非常に高速ですが、CSSグリッドにもあります。 多くの隠された宝石 これにより、グリッドをさらに調整して複雑なレイアウトを実現できます。. の minmax（） 関数 あまり知られていないこれらの機能の1つです。グリッドトラックのサイズを定義することを可能にします 最小から最大の範囲として グリッドが各ユーザーのビューポートに最善の方法で適応できるように. 構文 の構文 minmax（） 機能は比較的単純です、それはかかります 二つの引数最小値と最大値 minmax（最小、最大） の 分 値 小さくする必要があります より 最大, さもないと 最大 ブラウザに無視される....

CSSの "Floats"（フローティング要素）は使い方が簡単ですが、一度使われると、周りの要素に与える影響が予測できないことがあります。あなたがこれまでに親指の痛みのように突き出て近くの要素や浮遊物を消すという問題に遭遇したことがあれば、もう心配しないでください. この記事では、浮遊要素の専門家になるのに役立つ5つの基本的な質問について説明します。. どの要素が浮かばない? 浮いたときに要素に何が起こるか? "Floats"の兄弟はどうなりますか? フロートの親に何が起こるか? どのように "フロート"をクリアするのですか? TL; drへのアプローチを採用した読者のために、投稿の終わり近くにまとめがあります. 1.浮遊しない要素? あ 絶対の または 固定配置要素 浮かぶことはありません。それで、次に動かないフロートに遭遇したら、それが入っているかどうかチェックしてください。 位置：絶対 または 位置：固定 それに応じて変更を適用する. それが浮かぶとき要素に何が起こるか? 要素が "float"とタグ付けされているとき、それは基本的にそれが出るまで左か右のどちらかに走ります そのコンテナ要素の壁に当たる. あるいは、それはそれまで実行されます すでに同じ壁に当たっている別の浮遊要素に当たる. それらはスペースがなくなるまで並んで積み重なり続け、そしてより新しい入って来るものは下に移動されます. 浮遊要素も 要素の上に行かない...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. CSSまたはCascading Stylesheetsは、Webのデザインルールの定義言語を完成させます。世界中のアーティストが日常的にCSSを使用して、基本的なWebサイトのレイアウト用のルールセットを作成、整理、およびエンコードしています。これはフロントエンド設計のための最も普及した言語になり、CSS3の最近のリリースで驚くべき能力を提供します。しかし、このコードすべてが実際に何を意味するのか? 言語自体は、ここ数年で完全に開発されました。混乱は、主に誤解と同様の用語の誤用が原因で発生する可能性があります。 CSSはテーブルに多くの新しい概念をもたらします。 CSSの達人として習得するための最も一般的な用語をいくつか取り上げます。. CSSに特化する理由? この問題は以前に提起されており、2011年に入っても同じ結果が出ているのがわかります。 CSSは、スクリプトやプログラミングには適していない堅牢な言語です。これはスタイル言語です。具体的には、Webページの動作を説明するためのコードです。. CSSを使用して、個々のHTML要素から直接属性を操作することができます。すべてのブロック、段落、リンク、および画像はCSSルールによって影響を受ける可能性があります。 Web用のプレゼンテーションセマンティクスを改良することは、常に大きなステップでした。これが、CSSが依然としてデザイナーのトッププレーヤーである主な理由です。! プロパティと値 これはCSSに侵入する最も簡単な方法です。すべてのコードは、デザインを適用する要素と適用する要素を選択するという2つのアクションに分類されます。後者は、プロパティと値のペアによって作成されます。. 例として 赤色; 非常に単純なプロパティと値のペアです。私たちが使用したプロパティは 色 許容できるものを渡すことができます 値 テキストの色を変更します。これは16進コードまたはRGB（赤 -...

を使う マージン：自動 ブロック要素を水平方向に中央揃えすることは、よく知られた手法です。しかし、なぜそれがどのように機能するのか疑問に思ったことはありますか？これに答えるために、まず最初にmargin：autoがどのように機能するのかを見てみる必要があります。ミックスでも何が 自動 垂直方向の中央揃え、およびその他のいくつかの問題に対して機能する場合は、マージンが大きくなる可能性があります。. でもまず, なにが 自動 実際に行う? の定義 自動 と異なります 要素, 要素タイプ そして コンテキスト. 余白に, 自動 2つのうちの1つを意味することができます：利用可能なスペースを取るか0 px。この二つの意志 要素に異なるレイアウトを定義する. "auto"利用可能なスペースをとる これがマージンの最も一般的な使い方です 自動 私たちはよく遭遇します。割り当てることによって 自動 要素の左右の余白に合わせて、要素のコンテナ内の使用可能な水平方向のスペースを均等に占めます。したがって、要素は中央に配置されます。. ペンの余白を見る：CodePenのPreethi（@rpsthecoder）によるauto. ただし、これは横方向の余白にのみ有効です（詳細 なぜ...