BinaryDevelop

  • [CSS3] CSS3リスト無限スクロール/回転効果

    効果プレビュー 感想 現在のリストを最後のアイテムまでスクロールし、瞬時に最初のアイテムに戻ります。 発行ポイント 1. 無限回転を実現するための最適な方法とは この質問は、リストが最後までスクロールしたときに、下の方にあるホワイトスペース（余分なスペース）をどのように処理するかということです。 で リストの末尾にある 追加 リストの先頭の

    2022-01-21 10:03:34

  • [css3]css3におけるtransformプロパティの4つの機能

    CSS3では、テキストや画像の回転、拡大縮小、傾き、移動の4種類の変形を行うことができます。 1. ブラウザ対応 今のところ Safari 3.1+, Chrome 8+, Firefox 4+, Opera 10+のブラウザがこの属性をサポートしています。　　 2. 回転させる rotateメソッドを使い、パラメータに角度値を、その後に角度単位を表す"deg"テキストを

    2022-01-21 09:54:22

  • フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"＜URL＞". css スタイルの失敗

    フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/html: ""で転送される。 エラーメッセージ：以下 今日、tomcatにデプロイしたWebプロジェクトを実行したところ、以前はまだCSSスタイルがきちんと表示されていたのに、今日実行したら突然表示されなくなりました。ブラウザのコンソールを開くと、上の画像のようなメッセージが表示

    2022-01-21 09:40:18

  • [CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る

    QQtabBarからのBEM まず、BEMとはどういう意味でしょうか？ BEMとは、ブロック、エレメント、モディファイアの意味で、CSSの命名規則としてYandexチームが提唱したフロントエンドの命名方法である Weui-primary_loading__dot: ライブラリ名-コンポーネント名-状態名-要素名 ライブラリ名：各社で一般的に合意されている。 コンポーネント

    2022-01-21 08:52:38

  • [CSSチュートリアル】CSSのシングルDivの描画スキル

    純粋なHTML＋CSSでドラえもんの絵を描くなど、CSSの描画に関する記事をよく見かけますね。この方法は、divを一つずつ積み重ねて、絵の一部を実現するものです。この手法に本質的な問題はないのですが、難易度が低く、忍耐力が必要なだけで、多くのグラフィックはまだまだゆっくり実現できます。 このようなCSSによる描画の必要性を踏まえて、新しい考え方としてシングルタググラフィックスというものがあ

    2022-01-21 08:37:02

  • [CSSチュートリアル】CSSのクラスとidの共通命名規則

    ウェブページの公開ネーミング #wrapper - - ページ周辺はレイアウト全体の幅を制御します。 #コンテナまたは#content - - 最外層のコンテナ。 #layout - - レイアウト #head, #header - - ヘッダーセクション #foot, #footer - - フッターセクション #nav - - メインナビゲーション

    2022-01-21 07:34:36

  • [CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド

    I. 2カラムレイアウトとは 2カラムレイアウトは、左側が固定幅、右側が適応幅のものと、2カラムが適応幅（つまり、子要素の幅の左側で残りのスペースの右側を決定して補う）のものに分かれる。これはcssの面接質問でもよくある質問で、フロントエンドの開発エンジニアが必ず習得しなければならないスキルなので、以下に紹介します。 第二に、固定幅の左側には、適応の右側はどのように達成するために？

    2022-01-21 06:44:18

  • [CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ

    今回は、Google Chromeのタブバーについて、以下のような特殊な丸みを帯びたナビゲーションバーを使ったレイアウトを見てみましょう。 このようなレイアウトは、どのように実装されるのでしょうか。いくつかの方法を紹介しましょう。 I. 擬似要素ステッチング 次のようなHTML構造があるとします。 <nav class="tab"> <a c

    2022-01-21 05:19:44

  • [CSSチュートリアル】検索ボックスの非表示機能を実現するCSS（アニメーションの順送り・逆戻りシーケンス）

    トップメニューバーは、検索ボックスに配置され、一般的なシナリオですが、検索機能が頻繁に使用されていない場合は、メニューバーの内容が既に混雑している間、その後、フル検索ボックスを置くことはとても美しく見えません。そこで、次の図のように、検索アイコンだけを置いて、必要なときに検索ボックス全体を表示させるというのもよくある方法です。 実装のアイデア 開始状態では検索ボックスが表示さ

    2022-01-21 05:01:36

  • [CSSチュートリアル]CSSで簡単！高周波な異形ボタンを実現する方法

    背景 グループ内の学生からは、CSSを使ってインナーカットボタンを実装する方法や、矢印のついたボタンを実装する方法などの質問がありました。 /{p この記事では、デザイン原稿によく登場するちょっと難しくて厄介なボタンを元に、CSSを使ってできるだけ多くのボタンを実装する方法を解説しています。 まずは、よく登場するボタンの形から見ていきましょう。 長方形と角丸のボタ

    2022-01-21 04:52:15

  • [css3]ピュアCSS3でdivのinとoutの効果を順番に実現する

    この記事では、ある参考値で、知ることに興味がある、順序の内と外のdivの効果を達成するために純粋なCSS3が導入されています 効果 ソースコードです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

    2022-01-21 04:08:57

  • [CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS

    フロントエンドのUIフレームワークは最後の手段として導入しないでください。HTML5とCSS3はすでにほとんどの仕事をこなしているので、前回の"CSS for the cleanest switchesのように、フロントエンドのUIフレームワークを導入しないでください。 そして、多くの人の思考はまだWeb2.0の時代から抜け出せず、UIに様々なライブラリを使い、結果的にページが肥大

    2022-01-21 03:52:19

  • [CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現

    実装する この効果をCSSで正確に再現するのは難しく、CSSでの光の影のシミュレーションは比較的少ないので、再現を試みるしかない。 各照明セットは基本的に同じものなので、どれか1つを実装するだけでほぼ全ての効果を得ることができます。 この効果を観察してください。 その核心は、まさに円錐グラデーション()であり、これを使うと、おおよそ次のような効果を得ることができ

    2022-01-21 02:55:10

  • [CSSチュートリアル】height:100%と書いても効かない理由

    height:100が機能しないのはなぜですか？ この知識は決して冷たいものではありませんが、それでも使っていてちょっと戸惑うことがありますし、うまくいかないときに検索すれば答えは出てきますが、本当に理解していますか？フルスクリーン要素を設定したいのに、なぜ高さが%で制御されないのか？ 1. 幅と高さのパーセンテージ設定 w3cのwidthとheightの属性に従うと、%で設定

    2022-01-21 02:49:16

  • [CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例

    今回は、CSS3 Animationで簡単な指のクリックアニメーションを作成した例を、以下のように共有で紹介します。 レンダリング <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"

    2022-01-21 02:39:59

  • [CSSチュートリアル]cssのbackgroundとborderタグの例 詳細

     I. cssの背景タグ 1, 背景色を設定する back-ground-color属性は、要素の背景色を指定します。 小さな例を次の画像に示します。 実行結果は以下の通りです。 セレクタでタグごとに異なる色を設定することができ、h1、div、pタグは異なる背景色になります。 例 実行結果は次の画像のようになります。

    2022-01-21 01:59:42

  • [css3]css3によるフレックスレイアウト幅の解決方法が有効でない件

    これは2カラムレイアウトの案件でよく使われるもので、いろいろなやり方があるのですが しかし、最も便利なのはやはりフレックスで、外側の親要素に display:flex を設定し、子要素（適応的な幅を持つ要素）に flex-grow:1;を設定し、もう一方は固定幅、もう一方はアダプティブ幅を設定して行っています。 具体的なコードは以下の通りです。 <!DOCTY

    2022-01-15 09:36:33

  • [CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS

    背景 前景要素から特定の色を継承したシャドウ効果を作成する方法をご存知ですか？この記事を読んで、その方法を見つけてください。 先日、ホームセンターの前を通りかかりました( Home Depot ホームデポは、世界有数の住宅建築用品の小売業者）そこで、彼らが販売しているスマートライトを大々的に展示していたのです。 ???? そのひとつが、テレビの後ろに設置する一連の電球

    2022-01-15 07:46:06

  • [CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。

    コアコード Das Laden der JavaHL-Bibliothek ist fehlgeschlagen. Die folgenden Fehler sind aufgetreten: no libsvnjavahl-1 in java.library.path kein svnjavahl-1 in java.library.path kein svnjavahl in java

    2022-01-15 07:38:29

  • [CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない

    前文 JavaScriptで書けるアプリケーションは、いずれはJavaScriptで書かれるようになる。-- アトウッドの法則 何でもかんでもJavaScriptにすればいいのですが、なぜかCSSの方が効率的に動作するので、筆者は「CSSで実装できるのなら、わざわざJavaScriptにする必要はない」と考えています。 どちらの言語も用途が異なる ブラウザーのバージョン

    2022-01-15 07:09:14

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します