1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 おそらく過去にはこのような HTML 非終了タグを許容できたかもしれませんが、今日の基準ではこれは非常に望ましくないことであり、100% 回避する必要があります。必ず HTML タグを閉じてください。閉じないと検証に合格せず、予期しない問題が発生する可能性があります。 この形式を使用することをお勧めします: 2. 正しいドキュメントタイプ(DocType)を宣言する私はかつて多くの CSS フォーラムのメンバーでしたが、そこではユーザーが問題に遭遇した場合、まず次の 2 つのことを実行することを推奨していました。
選択できる一般的なドキュメント タイプは 4 つあります。 どのようなドキュメントタイプ宣言を使用するかについてはさまざまな意見があります。一般的には、最も厳密な宣言を使用するのが最善の選択肢であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を通常の方法で解析するため、多くの人が HTML 4.01 標準を使用することを選択しています。ステートメントを選択する際の肝心な点は、それが本当に自分に適しているかどうかです。そのため、総合的に検討して、プロジェクトに適したステートメントを選択する必要があります。 3. 埋め込みCSSスタイルを使用しないコードを書いているときに忙しいと、次のように、埋め込み CSS コードを都合よく、または面倒くさがって追加することがよくあります。 これは便利で問題がないように思えるかもしれませんが、コードに問題が発生する可能性があります。 コードの記述を開始するときは、コンテンツ構造が確定してからスタイル コードの追加を開始するのが最適です。
より良い方法は、スタイルシート ファイルでこの P のスタイルを定義することです。 4. ページのヘッドタグにすべてのスタイルシートファイルをインポートします。理論的には、CSS スタイルシートはどこにでもインポートできますが、HTML 仕様では、ページのレンダリングを高速化するために、Web ページの head タグにインポートすることを推奨しています。
5. ページの下部にJavaScriptファイルをインポートする覚えておくべき原則の 1 つは、できるだけ早くページをユーザーに提示することです。スクリプトを読み込む場合、スクリプトが完全に読み込まれるまでページの読み込みは一時停止されます。そのため、ユーザーの時間がさらに無駄になります。 JS ファイルが特定の機能(ボタンのクリック イベントなど)を実装するだけの場合は、本文の下部に自由に導入できます。これは間違いなく最良の方法です。 例: 6. 埋め込み JavaScript を使用しないでください。今は 21 世紀ですから!何年も前までは、HTML タグに JS コードを直接追加する方法がありました。これは特にシンプルなフォトアルバムでよく見られます。基本的に、タグには「onclick」イベントが添付されており、一部の JS コードと同じ効果があります。あまり詳しく説明しませんが、このアプローチは使用しないでください。代わりに、コードを外部の JS ファイルに移動し、「 addEventListener / attachmentEvent 」を使用してイベント リスナーを追加する必要があります。または、jQuery のようなフレームワークを使用します。このフレームワークでは、「clock」メソッドのみを使用する必要があります。 7. 開発中いつでも標準検証を実行する多くの人は、標準検証の意味と価値を本当に理解していません。著者はブログでこの問題を詳細に分析しました。一言で言えば、標準検証はあなたに迷惑をかけるものではなく、あなたに役立つものなのです。 Web デザインを始めたばかりの場合は、このWeb 開発ツールをダウンロードし、コーディング プロセスの任意の時点で「HTML 標準検証ツール」と「CSS 標準検証ツール」を使用することを強くお勧めします。 CSS は習得が非常に簡単な言語だと考えているなら、それは間違いです。ずさんなコードにより、ページは抜け穴や問題だらけになります。検証、検証、そして再度検証することが良い方法です。 8. FirebugをダウンロードするFirebug は間違いなく Web 開発に最適なプラグインです。JavaScript をデバッグできるだけでなく、ページ タグのプロパティと位置を直感的に理解することもできます。さっそくダウンロードしてみましょう! 9. Firebug を使いましょう。著者の観察によると、ほとんどのユーザーは Firebug の機能の 20% しか使用しておらず、これは非常に無駄です。数時間かけてこのツールを体系的に学習したほうがよいでしょう。半分の労力で 2 倍の結果が得られると信じています。 Firebug チュートリアル:
10. 小文字のタグを使用する理論的には、次のように任意のマークアップを記述できます。 このように書かない方が良いです。大きな文字を入力しても意味がなく、コードが醜くなります。次のように書く方が良いです。 11. H1~H6タグを使用する著者は、Web ページでこれら 6 つのタグすべてを使用することをお勧めします。ほとんどの人は最初の 4 つだけを使用しますが、H タグを最大限使用すると、デバイス フレンドリー、検索エンジン フレンドリーなど、多くの利点があります。すべての P タグを H6 に置き換えてもよいでしょう。 12. ブログの場合は、H1を記事のタイトル用に保存する今日、私はTwitterで議論を始めました。H1 はロゴで定義するべきか、それとも記事のタイトルで定義するべきか? 80% の人が後者を選択しました。 もちろん、どのように使用するかはニーズによって異なりますが、ブログを作成するときに記事のタイトルを H1 に設定することをお勧めします。これは、検索エンジン最適化 (SEO) に非常に役立ちます。 13. ySlowをダウンロードする過去数年間、Yahoo のチームはフロントエンド開発の分野で多くの素晴らしい成果を上げてきました。少し前に、ySlow という Firebug 拡張機能がリリースされました。これは、Web ページを分析し、ページのあらゆる側面の詳細と改善点を提案する「レポート カード」を返します。少し厳しいですが、間違いなく役立つので、強くお勧めします - ySlow! 14. UL リストを使用してナビゲーション メニューをレイアウトする通常、Web サイトにはナビゲーション メニューがあり、次のように定義できます。 美しいコードを書きたい場合は、この方法を使用しないのが最善です。
次のように定義する方が良いでしょう。 15. IEの対処方法を学ぶIE はフロントエンド開発者にとって常に悪夢でした。 CSS スタイルシートが基本的に完成している場合は、IE 用に別のスタイルシートを作成すると、IE でのみ有効になります。 これらのコードの意味は、ユーザーのブラウザが IE6 以下の場合、このコードが有効になるということです。 IE7も含める場合は、「[if lt IE 7]」を「[if lte IE 7]」に変更します。 16. 良いコードエディタを使うWindows ユーザーでも Mac ユーザーでも、選択できる優れたエディターが多数あります。 Macユーザー
PCユーザー
17. フロントエンドコードを圧縮します。Javascript 圧縮サービス
CSS 圧縮サービス
18. 削減、削減、削減私たちの多くが書いた最初のページを振り返ってみると、深刻な「DIV 中毒」(divitis) に間違いなく気づくでしょう。通常、初心者の本能は、段落を DIV で囲み、さらに DIV を配置して位置を制御することです。 —— 実際、これは非効率的で有害な習慣です。
記事を書くための鍵が「減らす、減らす、減らす」であるのと同じように、ページを書く場合にも同じ原則が当てはまります。 19. すべての画像にAlt属性を追加する画像に alt 属性を追加することの利点は明らかです。これにより、画像を無効にしたり、特別なデバイスを使用したりしているユーザーでも、障害なく情報を理解できるようになり、画像検索エンジンにとっても使いやすくなります。 Firefox は画像の Alt 属性の表示をサポートしていないため、title 属性を追加できます。 20. 夜更かしすることを学ぶいつの間にか朝方まで勉強したり仕事をしたりしていることが多いのですが、これは良いことだと思います。 私の「A-HA」の瞬間は、JavaScript の「クロージャ」の概念を完全に理解したときのように、夜遅くに起こります。この魔法のような瞬間をまだ体験したことがないなら、今すぐお試しください! 21. ソースコードを表示アイドルを真似することほど HTML を早く学ぶのに役立つものはありません。最初は私たち全員がコピー者になる必要がありましたが、その後ゆっくりと独自のスタイルを開発していきました。お気に入りの Web サイトのページのコードを調べて、コンテンツがどのように実装されているかを確認します。これは専門家のための唯一の方法ですので、ぜひ試してみてください。注意: コピー&ペーストではなく、コーディング スタイルを学んで真似してください。 インターネット上のさまざまなクールな JavaScript エフェクトに注目してください。プラグインが使用されているように見える場合は、ソース コードの head タグ内のファイル名に基づいてプラグインの名前を見つけることができ、それを自分の利益のために使用する方法を学習できます。 22. すべての要素のスタイルを定義するこれは、他の会社の Web サイトを作成する場合に特に必要です。あなた自身はblockquoteタグを使用していませんか?では、ユーザーは使うかもしれないけど、あなた自身はOLを使わないんですか?ユーザーも同様かもしれません。時間をかけて、ul、ol、p、h1-h6、blockquote などの要素のスタイルを示すページを作成し、何かが欠けているかどうかを確認してください。 23. 第三者サービスの利用翻訳者注: 元の英語のタイトルは「Twitter の使い方」です インターネット上には、Web ページに無料で追加できる人気の API が数多くあります。これらのツールは非常に強力です。それは多くの巧妙な機能を実現するのに役立ち、さらに重要なことに、Web サイトの宣伝にも役立ちます。 24. Photoshopを学ぶPhotoshop はフロントエンドエンジニアにとって重要なツールです。すでに HTML と CSS に精通している場合は、Photoshop についてさらに学習することをお勧めします。
25. HTMLタグをすべて学ぶいくつかの HTML タグはほとんど使用されませんが、それでも知っておく必要があります。たとえば、「abbr」、「cite」などです。必要になった場合に備えて、これらを学習する必要があります。 26. コミュニティのディスカッションに参加するインターネット上には優れたリソースが数多く存在し、コミュニティには多くの専門家が潜んでいます。ここでは、自分で学習したり、経験豊富な開発者に相談したりすることができます。 27. CSSリセットを使用するCss Reset は Reset Css も意味し、一部の HTML タグ スタイルまたは既定のスタイルをリセットします。 CSS Reset を使用するべきかどうかについても、オンラインで白熱した議論が行われています。著者はこれを使用することを推奨しています。まず、成熟した CSS リセットをいくつか選択し、それをゆっくりと自分に合ったものに進化させていきます。 28. 要素を揃えるつまり、Web ページの要素をできるだけ近づけて配置する必要があります。お気に入りの Web サイトを観察すると、ロゴ、タイトル、グラフ、段落が非常にきれいに整列していることが分かります。そうしないと、雑然としてプロフェッショナルに見えなくなります。 29. PSDスライスについてHTML、CSS、Photoshop をマスターしたら、PSD を Web ページの画像や背景に変換する方法も学ぶ必要があります。ここでは 2 つの優れたチュートリアルを紹介します。
30. フレームワークを恣意的に使用しないJavascript と CSS の両方に優れたフレームワークが多数ありますが、初心者の場合は急いで使用しないでください。まだ CSS に精通していない場合、フレームワークを使用すると知識体系が混乱します。 CSS フレームワークは経験豊富な開発者向けに設計されており、多くの時間を節約します。 |
<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...
最近、社内に Hadoop テスト クラスターを構築したいので、docker を使用して Hadoo...
最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
目次レンダリングAPIの変更レンダリング関数のパラメータレンダリング関数のシグネチャの変更VNode...
データベースのパフォーマンス最適化には、一般的にクラスタリングが採用されています。Oracle クラ...
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...
1. はじめにWeb プロジェクトを Linux サーバーで公開する場合、SSL 証明書を構成する必...
<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...
この記事では、Web ページ制作を学ぶ過程で習得すべきテクニックの一部を詳しく紹介します。これらの内...
Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...
今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...