• 知っておきたいHTML最適化のコツ

    多くの開発者は、JavaScript、画像の最適化、サーバー設定、ファイル圧縮、CSSの調整など、ウェブページのパフォーマンスを向上させるために複数の分野に注目しています。 Webインタフェースの開発に必要なコア言語であるにもかかわらず、HTMLがボトルネックになっていることは明らかで、HTMLページがますます重くなってきていることも事実です。ほとんどのページが平均40Kの容量を必要とし、

    2022-01-26 17:06:19
  • HTML初心者のための15のベストプラクティス

    HTML初心者のためのベストプラクティス30選を、参考までに以下の通り共有します。 1. タグを閉じておく 以前は、以下のようなコードをよく見かけました(訳注:何年前の話だ)。 XML/HTMLコード 内容をクリップボードにコピーする <スパン < li > ここにいくつかのテキストがあります。 &nb

    2022-01-26 16:33:05
  • htmlタグの表示モード(ブロックタグ、インラインタグ、インラインブロックタグ)

    今日の講義では、htmlタグの表示モードについてお話しましたが、大きく分けるとブロックレベルタグとインラインタグに分かれます。そのため、初心者の方は、幅、高さ、水平方向の中央揃えなど、初めて使うときには、一部のタグで機能しない属性があることに気がつくと思います。実は、この属性の使用は、ブロックレベルのタグに使用した場合のみ機能するのです。個人的には、ここも初心者が見落としやすいところだと思うので

    2022-01-26 15:19:26
  • HTMLでのLiタグの使用例

     タイトルを左に、日付を右に配置したいのですが、どうすればいいですか?日付のspanに直接float:rightをつけると、IE8とFFはOKですが、IE6/7は改行されてしまうので、簡単で効果的な解決策を紹介します。 <スパン XML/HTMLコード 内容をクリップボードにコピーする <スパン <!DOCTYPE html PUBLI

    2022-01-26 14:47:54
  • AmazeUIのダウンロード設定とHelloworldの実装について

    クロスプラットフォームブラウザ対応を謳っていますが、IE8以下には対応していないため、PCでのWeb開発には使用しないことをお勧めします。AmazeUIはモバイルウェブページにのみ適しており、そのHTML5機能はモバイルブラウザと非常に親和性が高いです。PCと携帯の両方に対応したWebページが書けると思っていないで、レイアウトを分けるべきでしょう。多くのモバイルページには、ページの下に "Mob

    2022-01-26 14:16:17
  • [CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)

    マウスの位置をマッピングしたり、ドラッグアンドドロップ効果を実現するために JavaScript をJavaScriptの/codeで作成します。しかし、実はこれをCSSで行うにはもっとすっきりした方法があり、それを使うことなく JavaScript で、同じ機能を実現することができます。 CSS だけでマウスの "click and drag" 効果を模倣するには、

    2022-01-26 13:36:29
  • [css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード

    CSS3ってこんなにいいものだったのか...」と、今更ながら知りました。  CSS3ボックスモデル CSS3 では、ボックスモデルを box-sizing で指定することができる。box-sizing には 2 つの値、すなわち content-box と border-box があり、ボックスサイズの計算方法を変更することができる。 box-sizing: con

    2022-01-26 13:13:22
  • [CSSチュートリアル]モバイルにおけるviewportの具体的な使い方

    PCでは、ビューポートとはブラウザの表示領域のことで、ブラウザのウィンドウと同じ幅のことを指します。CSSの標準文書では、ビューポートは初期包含ブロックとも呼ばれ、CSSレイアウトを最大幅に制限する、すべてのCSSパーセント幅予測の元となるものである。 モバイルはより複雑で、レイアウトビューポート、ビジュアルビューポート、理想的なビューポートの3つのビューポートが関係します。 今回は

    2022-01-26 12:58:18
  • [CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する

    最終的な効果は次のようになります。 アニメーションは2つのステップに分かれています 軌跡を描く DOMを作成し、軌跡に合わせてアニメートする ランタイムの軌跡を開発する まず、エネルギーの流れの導管として、下部に水色の半透明のパスを描きます。 これは、SVGパス(実際にはここで背景画像を使うだけでよい)を使って、以下のコードで行います。

    2022-01-26 12:46:26
  • HTMLコードのスペースと空白行について簡単に紹介します。

    HTMLコード中の連続したスペースや空白行(改行)は、すべて1つのスペースとして表示されます。 <フォント 例1:(テキストコンテンツに連続したスペースがある場合) コード XML/HTMLコード 内容をクリップボードにコピーする <スパン < p > このテキストは、約10個の連続したスペースで入力さ

    2022-01-26 11:52:52
  • モバイルウェブサイズ適応手法の実装

    ようやく手元のプロジェクトが終了し、行方不明者が戻ってきた!?プロジェクトを行う過程で、いろいろと考えさせられるポイントに遭遇したので、さっそくその話をしましょう。まず1つ目は、Webのリサイズ問題です。 現在よく使われている方法としては - まず、ページサイズが画面上に広がり、はみ出さないようにすることです。html<head>タグに、ページ幅=画面幅、最大・最

    2022-01-26 09:49:07
  • XHTMLにおけるtitleタグとparagraphタグの使い方を説明する。

    XHTMLタイトルの概要 私たちがWord文書を書くとき、"Chapter 1"、"1.2.1"などの見出しをよく使用します。XHTMLの構文にも見出しの概念はあります。XHTMLでは、<h1>から<h6>までの6段階の見出しが定義されています。 XML/HTMLコード 内容をクリップボードにコピーする <スパン <

    2022-01-26 09:34:54
  • HTMLのtitle属性を正しく使用するためのいくつかの提案

    携帯電話やタブレット端末、支援技術を使うユーザーには特定のコンテンツを隠し、キーボードを使うユーザーにだけ表示したい場合は、title属性を使用します。 詳細 HTMLのtitle属性自体に問題がある。14年以上の歴史があるにもかかわらず、いくつかの重要な点でパフォーマンスが低下していることが問題なのです。タッチデバイスの台頭により、この属性の有用性はさらに低下しています。ブラウザのサポート

    2022-01-26 09:28:15
  • 簡単なhtmlとcssの使い方を解説

    htmlとcssを含む神宮のホームページの静的ページ効果を3日間使って完成させる予定です。 <フォント 1. sublime webstorm vscode Hbuilder atomなどの開発ソフトをインストールする必要があるので、どれかひとつを選んでください。私が使っているのはwebstormです。 2. メインフォルダー内に関連プロジェクトのフォルダー

    2022-01-26 09:07:48
  • HTMLページのスタイルの内側!?-- -- 何のために

    主に下位バージョンのブラウザ向け <! -- -- >はhtmlのコメントタグで、上位バージョンのブラウザでは <style> タグをスタイルシートとして認識し、以下のように表示します。 で、中のhtmlコメントタグは無視され、解析されます。 バージョンが低いブラウザでは、<style>タグを認識せず、スタイルシートの内容をページ上に表示するものがありま

    2022-01-26 08:47:32
  • spanタグのスタイルにwidth属性を設定する方法

    spanタグのスタイルに直接width属性を設定しても、結果は出ません。 display:blockにすると、widthプロパティが有効になりますが、spanはdivと同じになりました。 display:inline-blockを設定すると、スパンは横並びになり、width属性が有効になります。 要素のdisplay属性に共通する値の説明。 1) block: ブロックオブジェクトのデフォ

    2022-01-26 07:28:57
  • metaタグ詳細説明(metaタグの役割)

    あなたの個人的なウェブサイトは、あなたが素晴らしい仕事を行う場合でも、サイバースペースの"広大な海で、だけでなく、フラットボートのように人々が見つけるのは簡単ではありません、どのように個人のウェブサイトを促進するために、人々は最初に次のメソッドを考えた。 検索エンジンへの個人サイトの登録 有名なWebサイトに個人サイトへのリンクを貼る フォーラムに投稿して個人サイトを

    2022-01-26 07:19:16
  • HTML 9ボックスレイアウトの実装方法

    ウェブサイトのレイアウトの多様性は、私たちフロントエンドの得意とするところです 最近、UCブラウザのデフォルトのタブページが9ボックスレイアウトを採用しているのを見かけました。次の勉強で、ここで、私は一緒に学ぶためにコードを共有します 効果は次のとおりです。 XML/HTMLコード 内容をクリップボードにコピーする <スパン <スパン &gt

    2022-01-26 06:54:15
  • HTML5レイアウトとHTML5タグの説明

    I. 新しい文書型宣言(DTD) 文書型宣言 HTML 5のDTD宣言は、:     <!doctype html>     HTMLの構文は大文字と小文字を区別しないので、<!DOCTYPE html >なども正しいです。 HTML5文書を記述する場合、ブラウザがHTML5の標準

    2022-01-26 06:15:29
  • [css3]本のページをめくるような効果を実現するcss3サンプルコード

    キーポイント 1.css3 3dアニメーションマスター 2. 反転後にページ内容が変わる場合の対処法 3. 常に本の中心を保つ方法 コードの概要 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

    2022-01-26 05:23:09