Web サイトの作成方法 パート V: 追加リソース

今週は、HTML と CSS を使用して Web サイトを作成する方法を説明しました... さて、どうなるでしょうか?さらに詳しく学ぶために使用できる追加のリソースと方法をいくつか紹介します。

まず最初に: すべてのレッスンのノートを PDF として保存したい場合は、次のことができます。ここからダウンロードしてください。

次に、HTML と CSS について新しいことを学ぶ最良の方法は、単純に他のサイトのソース コードを参照することだということを知っておく必要があります。基本的には、Web ブラウザの [表示] メニューから [ソースの表示] を選択し、HTML ソース コードを調べて必要なコードを見つけるだけですが、より詳細な内容については上のビデオをご覧ください。

さまざまな HTML 要素、CSS プロパティ、または説明方法を知っているクールなトリックについて詳しく知るには、選択した検索エンジンを遠慮なく使用してください。仲間の Web 開発者は、自分がどのようにして何かを達成したかについて詳細を喜んで共有することがよくあります。検索中に、W3Schools を示す結果に遭遇する可能性が非常に高くなります。のW3フールズWeb サイトは、W3Schools は悪いことだと (おそらく過剰に) 主張しています。ただし、完璧ではないので、話半分に聞いてください。みたいなサイトHTMLドッグは良い代替手段です。

HTML と CSS を学習した後の論理的な次のステップは、JavaScript を少し習得することです。幸いなことに、私たちはあなたをカバーしますレッスンのコーディングを学ぶ。これにより、オブジェクト指向プログラミングの基本と、JavaScript を使用していくつかの基本的なことを行う方法がわかります。将来的には、PHP と MySQL を使用したサーバーサイド プログラミングに取り組みたいと考えていますが、まだそこには達していません。いつものように、ライフハッカー ナイト スクールのページ私たちがまとめたすべてのレッスンをチェックしてください。

以上を踏まえて、CSS と HTML についてさらに学び、スキルを向上させるために使用できる他のリソースを見てみましょう。

(Adam Pash がここに参加します。) ソースの表示 (上のビデオで説明) よりもさらに良いのは、ブラウザーの最高の Web 開発ツールに慣れることです。 Chrome や Safari などの一部のブラウザには、非常に優れた開発者ツールが組み込まれています。Firefox などの他のブラウザでは、ファイアバグ拡張機能。

これらの Web 開発者ツールは、Web サイトをハッキングし始めるときに非常に貴重です。 HTML と CSS の初心者として、これらのツールで最も慣れておきたいのは要素インスペクターです。たとえば、ページ上の要素を見て、その派手なプレゼンテーションを定義する CSS がどのようなものかを確認したいとします。 Chrome での動作は次のとおりです。

検査する要素を右クリックし、「要素の検査」を選択します。 (当然ですよね?) これにより、以下のスクリーンショットに示すように、ブラウザーの下部に新しいペインが開きます。ペインの左側にページ ソースが表示され、検査対象として選択した要素が強調表示されます。右側に、検査している要素の CSS が表示されます。ページ上の他の要素を検査するには、要素を右クリックして再度「要素の検査」を選択するか、ソース ペインでその要素をクリックします。

一番いいところは？ページ上で CSS をライブで操作し、プロパティを追加したり、ピクセルをプッシュしたり、必要なものを微調整したりして、CSS がどのように機能するか、特定のプロパティが何をするかなどを確認できます。上のスクリーンショットでは、この投稿の見出しの色を変更し、フォント サイズを 50 ピクセルに拡大したことがわかります。これを追加リソースの投稿に埋め込んでいるようなものだとは思いますが、私の意見ではこれは Web 開発者向けキットの中で唯一最高のツールです。ページを探索したり、ソース コードを試したりするために、遠慮なくこれを使用してください。 (変更はブラウザ内でローカルに行われるだけです。次回ページを更新すると、すべてが通常に戻ります。)

より具体的なタスクを実行するブラウザベースの Web 開発者ツールは他にもありますが、これらは慣れておくべき最も重要なツールです。 （パッシュアウト。）

オンラインリソース

これらのオンライン リソースは、追加のスクリーンキャストから記事、開発をスピードアップするために使用できる CSS ツールまで多岐にわたります。

• リンダ.com- 私たちはほぼ常に Lynda を優れた学習リソースとして言及します。月額約 25 ドルかかりますが、コースの 1 つを受講するためだけにそこにいる場合は、1 か月で学びたいことを学び、戻ってきて別のことを学びたくなるまでアカウントを一時停止することができます。 。または、ライブラリが非常に素晴らしく無限にあるため、サブスクリプションを継続して毎月新しいスキルを習得することもできます。

• プライマリCSS- Primary は CSS フレームワークであり、常に適切に機能する事前にコード化されたレイアウトを多数提供します。レイアウトをまとめる時間を少し節約したい場合は、Primary が代わりに実行できます。

• 青写真- ブループリントも CSS フレームワークの 1 つで、おそらく Primary よりも若干柔軟性が高く、開発時間全体の短縮に重点を置いています。レイアウトに役立つだけでなく、ボタン、タブ、その他のページ要素を簡単に作成するのにも役立ちます。

• 学ぶべき 3 つの高度な CSS3 テクニック- これは単なる記事ですが、知っておきたい CSS3 の 3 つのテクニック、高度なセレクター、アニメーション、メディア クエリについて説明します。特にアニメーションはとても素晴らしいです。残りの2つは実用的です。

本

アダム パッシュも私も、HTML と CSS をコードを見て実験を通じて学んだので、個人的にお勧めできる本はありません。ただし、友人やライフハッカー読者からのおすすめをいくつか紹介します。

• CSS: 欠けているマニュアルデビッド・ソーヤー・マクファーランド著

• CSS: 決定版ガイドエリック・A・マイヤー著

• HTML と XHTML: 決定版ガイドチャック・ムシアーノとビル・ケネディ著

• CSS と XHTML を使用した Head First HTMLエリック・T・フリーマン、エリザベス・フリーマン著

• ダミーのための HTMLアンディ・ハリス著

HTML と CSS を学習するための他の優れたリソースはありますか?コメントでシェアしてください！

(function(){var w = window,amznAsin = (w.amznAsin && w.amznAsin.constructor === オブジェクト) ? w.amznAsin : {};amznAsin["0470537558"] = "0470537558";w.amznAsin = amznAsin;})();