本「Web開発。 包括的なガイド»

実際、この本はサイトを作成するためのパーソナルトレーナーです。 まず、World Wide Webのすべてのページのベースとなる標準（これらはHTMLとCSS）を使用して、従来のWebページを作成する方法を学習します。 次に、Googleなどの企業のサービスに精通し、訪問者の数を数える方法を教え、サイトの普及を助け、さらにはお金を稼ぐことさえします。 JavaScriptプログラミング言語について簡単に学習します。このプログラミング言語は、World Wide Webのほぼすべてのインタラクティブページで使用されています。

要するに、この本は、現代のサイトに固有のすべてのチップを備えたサイトをゼロから独自に作成したい人々のための優れたガイドになります。 この出版物は、ウェブデザインの分野を掘り下げたい人々の出発点にもなります。 上記のカテゴリーのいずれかに属している場合は、歓迎します！

本の構造

この本は5つのパートに分かれており、各パートはいくつかの章で構成されています。



パートI.単純なWebページの作成。 このパートでは、サイト作成用の言語であるHTMLに関する基本的な情報を取得します（第1章と第2章）。 次に、CSS言語を理解します。これにより、色、フォント、境界線（第3章）、およびページ上の画像（第4章）を追加できます。 最後に、HTMLエディターを使用して生活を簡素化する方法を理解します（第5章）。



パートII Webページからサイトへ。 このパートでは、WebページをWebサイトに結合する方法について説明します。 ページをリンクする方法（第6章）、数ステップでサイト全体のスタイルを作成する方法（第7章）、スタイリッシュなレイアウトを課す方法に習熟する方法（第8章）を学習します。 最後に、ホスティング会社のサービスを使用して、World Wide Webにページを配置する方法を学習します（第9章）。



パートIII。 聴衆とのコミュニケーション。 このセクションでは、Googleなどの検索エンジンにサイトをアクセス可能にする方法を学習し（第10章）、訪問者を引き付ける方法を学習します（第11章）。 さらに、ブログが何であるかを学び、ブログを作成するためのフリーソフトウェアを知ることができます（第12章）。 最後に、広告を表示したり、製品を販売したりして、Webサイトで収益を上げる方法を学習します（13章）。



パートIV インタラクティブなマルチメディアコンテンツ。 プロのウェブサイトを作成する方法を学習したので、明るいボタンやポップアップメニューなどの元の要素を追加してみませんか？ 複雑なJavaScriptプログラミング手法を学ぶ必要はありませんが、Webサイトで無料のスクリプトを見つけて使用する方法を学びます（14章と15章）。 また、ビデオクリップとMP3プレーヤーをサイトに追加することもできます（16章）。



パートV.アプリケーション。 本の最後には2つのアプリケーションがあります。 1つ目は、スキルを向上させたい野心的なWebデザイナーに役立つWebリンクを提供します。 2番目の付録では、HTML言語のクイックリファレンスを提供します。 HTMLの基本的な要素について説明し、本書のさまざまな章のより詳細な説明へのリンクを提供します。

抜粋

div要素によるコード削減

スタイルの継承のおかげで（第3章の「スタイルのオーバーレイ」セクションの「継承メカニズム」セクションを参照）、 divコンテナ内の要素は、フォントサイズやマージン幅など、親div要素から多くのプロパティを継承します。 パブリケーションのテキストの段落を含むdiv要素でfont-sizeプロパティを構成すると、それらすべてがフォーマットされます。



パブリケーションにフレームを追加した後、独自の目的で継承を使用できます。 たとえば、16ピクセルのフォントサイズをp.reviewクラスとp.reviewEndクラスに割り当てる代わりに、 div.reviewクラスのフォントサイズをすぐに設定して、p.bylineクラスの対応するプロパティを置き換えることができます。



div.introクラスを追加し、ページの上部にある2つの導入パラグラフを組み合わせることにより、マークアップをさらに削減できます。 この方法で、テキストの色を設定できます

/*  . */ div.intro { color: #9C9C9C; margin-bottom: 40px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 p.introクラスはまったく必要ありません。 スタイルシートからそれを削除し、2つの導入段落からクラス属性を削除できます。



これらの変更が重要でないと思われる場合は、通常、スタイルシートに数十または数百のルールが含まれていることに注意してください。 先ほど確認したような小さな変更により、少し簡単になる場合があります。



div要素は、プロのWebデザイナーが常に使用しているページの読み込み時間を短縮する絶好の機会を提供します。 ただし、次の方法はマークアップをさらに改善するのに役立ちます。

コンテキストセレクターによるコード削減

クラスを各要素に追加することにより、オブジェクトを非常に迅速にフォーマットできます。 ただし、前の例では、各クラスの著者名の後に属性class =“ review”を追加する必要があります。 幸いなことに、 div要素とコンテキストセレクターと呼ばれる新しいタイプのセレクターは、多くの時間を節約できます。



コンテキストセレクタは、別の要素内の要素に対応します。 違いを理解するには、このタイプセレクターを見てください。

 b { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このセレクタは、すべての太字テキストを赤でフォーマットします。 しかし、箇条書きリスト内に表示される太字のテキストのみを使用したい場合はどうでしょうか？ これを行うには、次のコンテキストタイプセレクタを使用します。このセレクタは、箇条書きリストアイテム（ul）を検索し、その中の太字のアイテムを探します。 次の例では、太字のテキストは赤です。

 ul b { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテキストタイプセレクタを作成するには、2つの要素の間にスペースを入れます。

コンテキストセレクターは便利ですが、要素を結合するさまざまな可能性を熟考することで、頭がおかしくなります。 特定のクラス内の特定のタイプの要素をフォーマットするためにコンテキストセレクターを使用すると、コンテキストセレクターを使用することの本当の利点がわかります。 たとえば、次のスタイルシートルールを適用するとどうなるかを想像してください。

 h2.review {
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セレクターを次のように変更します。

 div.review h2 {
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このセレクターの最初の部分は、ページ上のすべてのdiv要素を見つけます。 2番目の部分は、クラス名reviewを持つdiv要素に対応するものを制限します 。 セレクタの3番目の部分は、 div要素内のh2ヘッダーを見つけます。 最終結果として、第2レベルの出版物の各見出しはそれに応じてフォーマットされ、残りのページ見出しは変更されません。



h2要素からclass属性を削除して、次の単純なマークアップを残すことができます。

 <div class="review"> <h2>...</h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このアクションを繰り返して、クラス名に頼らずにimgまたはパブリケーションの要素をフォーマットできます。 div要素内で通常の段落をフォーマットすることもできますが、この場合は注意が必要です。 これは、CSSがコンテキストセレクターをタイプセレクターまたはクラスよりも具体的に考慮するためです。



たとえば、次のコンテキストセレクタを使用して、段落をフォーマットするルールを作成するとします。

 div.review p {
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このルールは、最初の著者名と最後のリンクを除き、出版物のすべての段落に適用する必要があります。 パブリケーションマークアップでは、次の3つのクラスのみを使用するのが理想的です。

 <div class="review"> <h2>...</h2> <p class="byline">...</p> <p>...</p> <p>...</p> <p>...</p> <p class="reviewEnd">...</p> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザはbylineクラスとreviewEndクラスのフォーマットを無視するため、ここで問題が発生します。 これは、ブラウザがこれらのクラスルールがコンテキストセレクターを使用する新しい段落ルールよりも具体性が低いと判断するためです。



この問題を解決するには、bylineクラスとreviewEndクラスを変更する必要があります。 それらをより具体的にする最も簡単な方法は、コンテキストセレクタを使用して変更することです。 つまり、bylineクラスを使用する段落に適用するルールを作成する代わりに、bylineクラスを使用し、パブリケーション内にあるすべての段落に適用するルールを作成する必要があります。

 div.review p.byline {
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで問題が解決します。 まず、このソリューションを使用すると、マークアップを簡素化できます。 ここで、各パブリケーションにクラスを適用する必要があるのは、パブリケーションテキスト自体のコンテナdiv、作成者の名前、最後のリンクの3つの場所のみです。 通常の段落や見出しにクラスを追加する必要はなくなりました。



コンテキストセレクターは、ページのさまざまなセクションにさまざまな書式設定ルールを定義する非常に一般的な方法です。 他のユーザーが作成したスタイルシートを見ると（新しいメソッドに慣れてCSSスキルを向上させるためにこれを行うことをお勧めします）、多くのdiv要素とコンテキストセレクターが動作していることがわかります。



スタイルシートのルールについて混乱しており、どのルールが不要になったのかわからない場合は、次のリストをご覧ください。サイトのスタイルシートの新しいバージョンのすべてのルールと出版物がリストされています。

 /*        */ body { ... } /*     */ p { ... } /*        */ img { ... } /*    */ h1 { ... } /*      */ div.main { ... } /*   */ div.intro { ... } /*    */ div.review { ... } /*   */ .review h2 { ... } /*   */ .review p { ... } /*   */ .review .byline { ... } /*      */ .review .reviewEnd { ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

著者について

マシュー・マクドナルドは数十冊の本の科学的および技術的な著者です。 WordPress：The Missing ManualやHTML5：The Missing Manual1などの本を通じて、彼は多くの読者にWorld Wide Webの技術を紹介しました。 さらに、出版物Your Brain：The Missing Manual and Your Body：The Missing Manualで、彼は人々に彼らの脳と体の全力と能力を示しました。

クリエイティブチームについて

ピーターマッキー （編集）。 この本の以前のバージョンで作業する喜びがありました。 彼はニューヨークに住んでいます。そこでは、放棄された建物の歴史を研究し、時々それらの秩序を回復します。 メールアドレス：pmckie@gmail.com。



Kara Ebrahim（プロダクションエディター）。 ケンブリッジ在住。 彼女はグラフィックデザインに携わり、屋外で過ごすのが大好きです。 メールアドレス：kebrahim@oreilly.com。



Shelley Powers（テクニカルレビューアー）。 ミズーリ州セントルイスに住むウェブサイト開発者および技術書の著者。 彼女の関心には、HTML5、JavaScript、およびその他のWebテクノロジーが含まれます。



ジュリー・ヴァン・キューレン （訂正）。 彼女は2006年に新聞を退職し、モンタナ州に移り、フリーランスになるという夢を実現しました。 彼女と彼女の夫（小説を書いている）は2人の息子を育てています-デクスターとマイケル。 メールアドレス：little_media@yahoo.com。



Ron Strauss（元のサブジェクトインデックスのコンパイラ）。 彼は情報技術文献の主題索引付けを専門としています。 空き時間には彼はヴィオラを演奏します。 北カリフォルニアに彼の妻と、同時に同僚のアニーとドワーフピンシャーケンガと共に住んでいます。 メールアドレス：rstrauss@mchsi.com。



»本の詳細については、出版社のウェブサイトをご覧ください

» コンテンツ

» 抜粋



ホーカー向けクーポン25％オフ- ウェブサイトの作成



パートナーの「Netologiya」には、HTMLおよびCSS、JavaScript、Node、Python、PHPなどの分野のコースがあります。piter_progクーポンの場合、 11月20日まで5,000ルーブルの割引。