コーディング - ページ 19

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

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

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

CSS3を使用したコーディングは、フロントエンドWeb開発の状況を劇的に変えました。グラデーション、ドロップシャドウ、丸みを帯びた角を持つユニークなインターフェイスを構築する機会はもっとあります。これらすべての効果は、すべての主要Webブラウザで徐々に採用されつつあります。. このチュートリアルでは、これらの素晴らしいCSS3効果の多くを紹介します。私はいくつかの新しいHTML5入力タイプを使って簡単なWebフォームを作りました。レイアウト また敏感です;ウィンドウサイズが縮小されると適応します。この状況は、スマートフォンユーザーをサポートするWebフォームを構築するのに最適です。. ソースコードをチェックして、ファイル構造を順守できるかどうかを確認してください。また、これらの要素を自由にカスタマイズして自分のWebサイトにコピーしてください。. デモ ソースコードをダウンロードする フォーム構造を構築する はじめにメインファイルを作成しました index.html 2つの別々のスタイルシートと共に. style.css すべてのデフォルトセレクタを含みます。 respond.css さまざまなウィンドウサイズを処理します。私のDOCTYPEはHTML5で、フォーム全体をコンテナに包みました . この例は、CSS 3でコーディングしたときに現れる可能性がある効果のみを示しています。したがって、投稿用のスクリプトやユーザーをリダイレクトするための送信先はありません。以下の私のコードは最初のいくつかのフォーム要素のための開始入力タグを含みます. 最初のブロック領域はセクションタグで囲まれているので、レイアウトを並べて浮かべることができます。左側の列には、テキスト、電子メール、URL、電話番号のすべての入力が含まれています。携帯電話をタブで移動すると、モバイルキーボードの表示は入力タイプに応じて変わります。最近誰もが外出先で仕事をしているので、モバイル向けにこれらの機能をサポートするには十分な理由があります。. textarea要素はpageloadで定義されたプレースホルダーテキストを持つこともできます。これは、ユーザーがフィールドにテキストを入力すると消えるラベルと似ています。持ち越されていない属性は オートコンプリート テキストエリアは通常関連コンテンツを埋めないため. サイドバーコントロール ウィンドウ表示のサイズ変更に適切に対応できるようにこのフォームを作成したいと思いました。ウィンドウが一杯になると、両方の入力列が隣同士に移動します。しかし、幅を少し小さくすると、右側のサイドバーはメインコンテンツの下に落ちます。. これが私のサイドバー領域のHTMLです。 受取人： サイトスタッフ 編集長 技術部 広報 一般的なサポート...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. 今日は見てみるつもりです “マーキー” もう一度。我々は実際にそれについての話をした前回の記事でそれについてカバーしてきました。 -ウェブキットマーキー しかし、今回はこの話題をもう少し詳しく説明します。. この記事では、 マーキー風 CSS3アニメーションを使用した効果。そのようにして私たちは、それだけでは達成できなかったより多くの機能を追加することができるでしょう。 -ウェブキットマーキー. CSS3 Animationモジュールに慣れていない限り、このドキュメントを読む前に次の参考文献を見ておくことをお勧めします。 CSS3アニメーション - W3School CSSアニメーション - Mozilla Dev。ネットワーク また、現時点では、CSS3アニメーションはFirefox 8以降、Chrome...

あなたが景品ハンターなら、あなたはPSDユーザーインターフェース（UI）をたくさんダウンロードしている可能性があります。そのうちのいくつかは本当に素晴らしいですし、私たちが取り組んでいたデザインをプロトタイピングすることによって私たちの時間を節約することができます. この記事では、PSD UIをコーディングして、それをより機能的なものにします。次のPSD UI SliderをjQuery UI Sliderテーマとして適用するようにコーディングします。. しかしながら, 注意してください このチュートリアルは 中級 経験のそうは言っても、CSSとjQueryにかなり慣れている限り、それはまだ比較的従うのが簡単です。. それでは始めましょう. ステップ1：jQueryのUI 私たちは明らかにjQueryとjQuery UI Libraryを必要としており、それらを利用するには2つの選択肢があります。まず、Google Ajax API CDN、Microsoft CDN、およびjQuery CDNの2つのCDNからjQueryとjQuery UIを直接リンクできます。サイトをオンラインにするときにホスト型CDNファイルを使用することには多くの利点があります。. しかし、オフラインで作業するだけなので、 二番目 代わりに道. 公式ダウンロードページからjQuery UIライブラリをダウンロードしてカスタマイズします。 Sliderプラグインだけが必要なので、Sliderライブラリとその依存関係だけを選択し、他のものは残します。そうすれば、私たちが使用するファイルはずっとスリムになり、より速くロードすることができます。その後、できればページの一番下か、閉じる前に、それらすべてのライブラリをHTMLドキュメントにリンクしてください。 正確にタグ付け....

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. ログインフォームは、あらゆる動的Webサイトに不可欠な要素です。それらは、Webサイトユーザーが制限されたコンテンツにアクセスするためのメカニズムを提供します。このチュートリアルでは、テキストシャドウ、ボックスシャドウ、線形グラデーション、トランジションなど、CSS3の機能の多くを調べて、積み重ねた紙を使ったシンプルでエレガントなログインフォームを作成します。. 上の画像は、これから作成するログインフォームのプレビューを示しています。に飛び込む準備はできましたか？始めましょう! 1.基本的なHTMLマークアップ 使用するHTMLマークアップは非常に単純です。HTML5Doctype宣言の後、次のようになります。 そして タグ以内 タグ、我々は持っています 'stacked'のクラスを持つタグ。この tagは、コンテンツボックスの幅を定義し、それをページの中央に揃えるために使用されます。また、CSSを使用してこのタグをターゲットとするためにこのタグのクラス名を使用します。 A タグが続きます タグ。 formタグはデモンストレーションの目的でのみ使用されるため、 'action'属性には有効な値がありません。フォームフィールド内には、電子メールとパスワードのラベルの宣言と入力フィールドがあり、その後に送信ボタンが続きます。ここで注意すべき重要な点は、 'email'というタイプの入力フィールドを使用したということです。これはHTML5宣言によって私たちに提供されており、古いブラウザでは通常のテキスト入力フィールドに適切に低下します。. これがHTMLマークアップ全体です。 簡単なログインフォーム ログイン Eメール パスワード...

A CSSのみの画像は効果を明らかにする さまざまな方法で解決することができます。実際にデザインをコーディングするのはとても簡単です。 画像が目立つ （によってオーバーフロー） その無地の背景 -あなただけ 画像を配置する 無地の背景を持つ小さな要素上. 使用しても同じ結果が得られます。 透明な境界線, あなたが保つ場所 背景要素のサイズは同じ 前景のそれと同様に透明な境界線を追加する 空のスペースを作る 前景がオーバーフローする. がある 後者の方法を使用する利点. 前景がオーバーフローする領域を提供するのは透明な境界線なので、 オーバーフローの方向を制御する 左、右、上、下の境界線の間。また、前景と背景の両方のサイズが同じである 両方の要素を同時に動かすのが簡単になります ページ全体. 一言で言えば、我々は方法を見るつもりです CSSのみの画像を作成する を使って 小さな無地の背景 とともに 透明な境界線を持つ前景画像. あなたはチェックアウトすることができます...