BinaryDevelop

  • htmlでvue-routerを使用するためのサンプルコード

    vueとvue-routerの紹介 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 完全な例 <!DOCTYPE

    2022-01-21 08:08:22

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

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

    2022-01-21 07:34:36

  • 404の実装で雪見だいふくをする方法CANVAS

    はじめに を、"li.li.li.li.li.li.li "と呼びます。パソコンもリトルキングにつないで、ゲーム、コントラ、スーパーマリオ、タンクバトルなどをよくやっていた。時代は白馬のごとく、技術はどんどん進歩し、今やネットワークテレビを持つものは二度とそんな状況は現れないだろうが、本当に懐かしい時代である。 私たちのテーマは、今日404ページの雪の画面のバージョンを行うことです、

    2022-01-21 07:34:27

  • html+cssでメニューバーのスロードロップダウン効果を実現するコード例

    目標：html+cssを使って、マウスをメニューバーに移動させるとメニューバーがゆっくり表示される効果を実現する。 この問題を解決するには、次の2つの方法があります。 方法1：遷移（トランジション） フォーラムをオンにする-1 Absolute positioning (絶対)であるため、内側の li を親要素の外に出すと、それ以降のコンテンツが右側に圧迫されるため、親

    2022-01-21 07:21:12

  • Html5 データストリームによる動画再生

    PC、Android、IOS環境に対応したH5ページで、サーバーサイドの動画ファイルをデータストリーミングで再生する方法を紹介します。 H5ページでは、以下の方法で動画を再生することができます。 <ビデオ タグを使用します。一般的な方法は以下の通りです。 \n src は、再生する動画の URL を、特定の動画ファイルへのパスとして指定します。アクセス リクエスト

    2022-01-21 06:59:58

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

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

    2022-01-21 06:44:18

  • ローカルファイルの読み書きを行うためのHTML5実装

    最近、htmlページ上にエクスポートするためのボタンがあり、クリックするとドキュメントを構築してローカルファイルシステムに保存するという要件がありました。また、クリックすると、ローカルファイルシステムからファイルを読み込んで、その内容を解析するボタンもあります。 はっきり言って、ローカルファイルシステムからファイルを読み書きする方法というのは、一つです。 このことは、html5以前は

    2022-01-21 06:18:20

  • フロントエンドのHtml5でスクリーンショットを共有する方法のサンプルコード

    プリアンブル この記事では、canvasを使用してスクリーンショットを共有する方法について説明します。 当初、canvasペイントで画像を共有するのは難しくないと思っていたのですが、実際に開発中に多くの落とし穴に遭遇しました 例えば、こんな感じです。 画像の背景が透明 画像なし、文字だけの画像を共有する。 画像クロスドメイン問題 以下の例をご覧ください。 共有画

    2022-01-21 06:18:18

  • Html階層型ボックスシャドウ効果サンプルコード

    まず最初に、今日はこのエフェクトをやってみよう！ということで、このエフェクトの使い方を紹介します。 本当に何でもないことなんですが、Webページを作っていると、ナビゲーションバーなどを作ることがよくありますが、そのナビゲーションバーがいつも立体的でないと感じることがあるので、今日は見てみましょう！ということでシェアします。 <!DOCTYPE html&

    2022-01-21 06:10:05

  • キャンバスは、マウスがまぶしい小さなボールの実装に従ってください。

    マウスのボールを追う <ブロッククオート キャンバスに負けず劣らず、とても楽しかったです。 エフェクトの実装 超クール 実装原理 ボールを作成する blobにランダムな色とランダムな半径を追加する マウスの動きをインスタンス化して新しいBlobを追加する プロトタイプに追加されたメソッドを呼び出して、ブロブをアニメートさせる

    2022-01-21 05:51:28

  • HTMLスケッチのためのEmmet構文ルールの実装

    フロントエンドの開発プロセスにおいて、最も時間を要する作業はHTMLとCSSのコードを書くことである。タグや属性、括弧などがたくさんあって、頭が痛くなる。ここでは、推奨されるEmmetの構文規則は、あなたが飛ぶように時間を書くことができ、大幅にコードを書くことを改善することができ、唯一のあなたが望む完全なHTML構造を生成するコードの行をノックする必要があり、以下は、使用する方法を紹介します。

    2022-01-21 05:20:55

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

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

    2022-01-21 05:19:44

  • html5でポップアップ画像のクリック機能を実装する

    以下のように、フォアグラウンドコードとjsコードに分かれて、html5のクリックからポップアップ画像までを共有します。 フォアグラウンドのコード <a href="javascript:;" onclick="repeat()"> <div id="modal_volume" style="position: fixed; text-align: center;

    2022-01-21 05:14:53

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

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

    2022-01-21 05:01:36

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

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

    2022-01-21 04:52:15

  • html5 モバイル 長押し禁止 画像保存 実装

    モバイルでH5ページにアクセスした際、画像の長押しで画像が保存されます。ユーザーエクスペリエンスを向上させるためには、長押ししても画像が保存されないようにする必要があります。どうすれば実現できるでしょうか。ここでは、3つの解決策を紹介します。 解決策1: ポインターイベント:なしを使用する img{ pointer-events:none; } 画像が開かれるWeCh

    2022-01-21 04:36:31

  • [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

最新

おすすめ

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