Web制作 - BinaryDevelop

HTML5の再適応スキームとビューポート適応の問題点を解説

H5 remの適応スキームとビューポート適応レム remはCSS3で新たに追加された相対単位（ルートem、ルートem）現在のページのHTMLページのフォントサイズに応じてのみ設定、ルートのフォントサイズが18pxの場合、1rem=18pxとなるメディアクエリの設定 @media screen and (min-width: 320px) { html {

2022-01-21 12:52:42
HTMLの外部スタイルシートにCSSスタイルを導入する方法

リンクインとは、すべてのスタイルを拡張子cssで名付けられた1つ以上の外部スタイルシートファイルに入れ、外部スタイルシート（css名外部スタイルファイル）をリンクタグでhtml文書にリンクすることで、スタイルや構造をより明確に編集できるように構造とスタイルを2つのファイルに分割することです。基本的な構文は The type of the props object definitio

2022-01-21 12:24:02
html+css 実装サイバーパンク風ボタン

最初に効果を見る序文このアイデアは、私がアップ所有者スティーブンのBサイトを見て、それは非常に良いと思うし、自分で1つを取得することです。(純粋なCSS）、以下は、詳細なプロセスです。最後に完全なコードがあります。実装を行います。 1. まず、divタグをボタンとして定義し、クラス名を.anniuとします。 data a;   

2022-01-21 11:16:56
cssで背景色の半透明化を実現する2つの方法

ページレイアウトにおいて、ユーザーに異なる視覚効果を与えるために、divの背景色を半透明の状態にする必要がありますが、その設定方法をご存知ですか？次に、divの背景色を半透明にする方法について、2つの方法と、そのメリット・デメリットを説明します。もし興味があれば、見に来てください、参考になれば幸いです。まず、おなじみのCSSプロパティopacityを使って、divの背景色を変更し

2022-01-21 11:04:28
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題（原理から実装まで）

テキストのオーバーフローをどのように表示するか、またそのニーズは何ですか？一行か複数行か？切り捨て、省略、カスタムスタイル、適応的な高さ？ここに答えがあります。複数行の省略を明らかにするために、原理から実装まで順を追って説明します。まずは、最もシンプルな1行のはみ出し省略であるウォームアップ、一行抜けこれは、あまり魔法を使わない宇宙規模の統一解です /* Principle

2022-01-21 10:56:07
html5で複数ページ通信を行うsharedWorkerのコード例

今日、githubで遊んでいて、ログインせずにいくつかのページを閲覧し、あるページでログインした。別のページに切り替えたところ、以下のようなプロンプトが表示されました。では、これはどのように機能するのでしょうか。一つの方法として考えられるのは、ページがログインしたときにlocalStorageの状態を変更し、他のページは表示されたときに最新の状態を読み、プロンプトを表示して

2022-01-21 10:44:20
sublime / vscodeショートカットHTMLコード生成の実装

htmlの基本構造入力 ! +Enter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2022-01-21 10:22:19
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法

キーポイント CSSのresizeプロパティで、要素のリサイズを制御することができますリサイズと連動して、子要素の幅をダイナミックに変更することができます。 HTMLです。 <div class='picA'> <div class='picB'> <div readonly class='resizeEleme

2022-01-21 10:19:44
HTML+cssのボックスモデル例（円、半円など）「border-radius」使いやすい

フロントエンドを学習していると、ボックスのモデルがデフォルトで正方形であることに気づく人が多いようです。どうすれば箱を希望するモデルに変えることができるでしょうか。まず、デフォルトの ---- を見てみましょう。 @property(nonatomic,retain)NSString *str ; @property(nonatomic,copy)NSString *str2 ;

2022-01-21 10:11:38
[CSSチュートリアル】波動効果を生み出すCSSのアイデア

前回、純粋なCSSを使って波動効果を実装する方法をいくつか紹介しましたが、それについて関連する記事が2つあります。ピュアCSSで波動効果を実現! CSSで作るクールな充電アニメーション今回は、CSSを使った波動効果の面白いアイデアをもう一つ取り上げます。曲がった三角形の面積の定積分から始める本題に入る前に、これを見てください。高等数学では、二次曲線グ

2022-01-21 10:09:41
[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
Html5は、エンタープライズWeChatの実装を呼び出す

プリアンブル H5ベースのページチューニング Enterprise WeChat API (チューニングデモ) I. 環境エンタープライズWeChatの管理者は、アプリケーションを追加し、アドレスは、H5プログラムのアドレスにポイントします。(エンタープライズWeChatは、内部ツアーを介して、モバイルプロジェクトのWeb側のうち、独自の公開にアクセスするには、この記事の焦点

2022-01-21 09:53:17
キャンバス三動的円描画法の説明（要約）

前置き canvasはHTML5から生まれた描画APIコンテナで、グラフィックを扱うのに非常に強力です。ここでは、JavaScriptでcanvasを使った動的な円形エフェクトを紹介します。これを利用して、円形のプログレスバーを作って使ってみてください。ここでは、個人的に3つの実装方法をまとめてみました。方法1：arc()で円を描くコード <!DOCT

2022-01-21 09:35:14
トップナビゲーションバーメニュー作成用HTML+CSS

でナビゲーションバーが作成されます。技術的要件  CSS HTML各種タグ実装の目的。ナビゲーションバーメニューを作るコード解析  基本スタイルのクリアシーケンス原点削除なしアンダースコア削除デフォルトでテキストを中央揃えにするタグはブロックレベル要素を設定します。ステートモディフ

2022-01-21 09:25:03
html のリストボックス、テキストフィールド、ファイルフィールドのコード例

ドロップダウン・ボックス、テキスト・フィールド、ファイル・フィールド上記はデモ効果で、下記はコードです。 <form method="get" action="result.html"> <! --input:Input box tag, default is text, text box name: a name for the input box,

2022-01-21 09:20:38
キャンバスマルチシャドウグロー効果

プリアンブルあるプロジェクトで、クライアントが次のようなレンダリングで光り輝く効果を挙げていました。シャドウズ実はこれ、影で実現できるんです、という人もいるかもしれませんね。しかし、図からわかるように、かなり強い光り方の効果です。実際には、単純なシャドウパラメータでこれほど強い光輝効果を実現するのは難しいと思われます。例えば renderAllRows

2022-01-21 09:10:52
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る

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

2022-01-21 08:52:38
ピュアhtml+cssでの要素読み込み効果

Element UIのローディングコンポーネントのイメージです。カッコイイですね！実現させましょう。分析アニメーションは2つのパートで構成されています。青い円弧は、点から円に伸び、円から点に縮む。円の親ノードが円と一緒に回転するコード html <svg viewBox="25 25 50 50" class="box"&g

2022-01-21 08:43:14
[CSSチュートリアル】CSSのシングルDivの描画スキル

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

2022-01-21 08:37:02

最新

おすすめ