コーディングを学ぶ必要がある理由（少し）：HTMLとCSSの概要

公開: 2021-08-15
注：ストアのコードに変更を加える前に、必ずサイトをバックアップしてください。

オンラインストアを始めるのがこれまでになく簡単になりました。 Shopifyのようなプラットフォームのおかげで、テーマを購入し、製品をアップロードして、数時間で顧客に販売することができます！ 参入障壁は非常に低いため、ほとんどの人がそれを行うことができます。

始めるのはとても簡単ですが、その単純さを当然のことと考えるのも同じくらい簡単です。 最終的には、ストアに何かを追加または変更したいと思うでしょう。そして、テーマがそれをサポートしていないことに気付くでしょう。 開発者は安くはありません、そしてあなたがしたい最後のことはあなたがあなた自身でしたかもしれない何かのために誰かにお金を払わなければならないことです。

ウェブサイトの仕組みの基本を学ぶために少し時間を前もって費やすことができ、将来的に時間とお金を節約できると言ったらどうでしょうか。

この記事の終わりまでに、HTMLとCSSの基本を理解し、自分のストアでいじり始めるのに十分な知識を身に付けているはずです。

準備が整うまで数分かかります。始めましょう。

HTMLとCSSとは何ですか？

HTMLはハイパーテキストマークアップ言語の略です。 これは、Webの最も古くて最も重要な基本言語の1つです。 このページのコンテンツを構造化して表示する責任があります。

CSSはCascadingStyleSheetsの略です。 HTMLのスタイルとフォーマットを提供する責任があります。

一緒に、これらはあらゆるウェブサイトの必要な構成要素です。 この記事では、基本を説明し、最初のWebページをコーディングおよびスタイル設定する方法を示します。

私はビル・マーレイ（そうではない）の大ファンなので、ビルにウェブ上に独自の神社を作成します。

ただし、最初に、HTMLとCSSをさらに深く掘り下げて、それらの能力と能力を十分に理解してみましょう。

ウェブサイトの構造

HTMLとCSSが家の構造部分と比較することで、それらがどのように連携するかを簡単に理解できます。

すべての家の壁の後ろには、その構造を担当するフレームがあります。 HTMLを家のフレームのように考えてください。 それはウェブサイトの構造に責任があります。

私たちの家のアナロジーに固執して、CSSは、ペイントの色、ダイニングルームの寸法、木の床の色、ダイニングルームのテーブルの形状とスタイルなどを担当します。

基本的なHTMLマークアップをいくつか見て、1行ずつ見ていきましょう。

HTMLマークアップの例

Doctype

<！DOCTYPE html>タグは、操作するドキュメントタイプがHTMLであることをブラウザが認識できるようにします。

頭

<head>タグ内には、ドキュメントのすべてのメタデータが格納されています。 このデータには、タイトル、スタイル（CSS）、説明などが含まれます。 このデータはエンドユーザーには表示されませんが、ブラウザーはこのデータを使用して、ドキュメントにタイトルを付けるか、エンドユーザーに表示するときに使用するスタイルを決定します。

広告

HTMLページの<head>にある他の要素には、作成者情報、ページの説明、またはファビコン（ブラウザタブの小さなアイコン）に使用される画像へのリンクが含まれる場合があります。

ファビコンの例

体

<body>タグには、Webサイトのすべてのマークアップ（コード）が含まれています。 これは、エンドユーザーが当社のサイトを表示したときに表示される唯一のコードです。

ウェブサイトを構築するために必要なツール

HTMLの作成を開始するには、豪華で高価なソフトウェアが必要だと思うかもしれませんが、そうではありません。 実際、あなたはすでにあなたが必要とするものを持っています。

PCを使用している場合は、メモ帳プログラムを開きます。 Apple Macを使用している場合は、テキストエディットを開きます。

テキスト編集プログラムを開いたので、上記の基本的なHTMLマークアップについて詳しく説明します。 次のコードをコピーして（Windowsの場合はCtrl + C / Macの場合はCmd + C）、テキストエディタに貼り付けます（Windowsの場合はCtrl + p / Macの場合はCmd + P）。

<！DOCTYPE html>
<html>
<頭>
<title>ページのタイトル</ title>
</ head>
<ボディ>
<h1> Hello World！</ h1>
<p>これが最初の段落です。</ p>
</ body>
</ html>

このファイルをデスクトップに保存し、Webブラウザで開きます。 これで、コードがブラウザによって翻訳またはレンダリングされ、次のように表示されるはずです。

コードレンダリングの例

見出し要素（<h1>）

<h1>タグは、特定のテキストに注意と定義をもたらしたい場合に使用されます。 この例では、「HelloWorld！」というテキストが必要です。 後続のテキストよりも大きく、目立つようにします。

すぐに使用できるHTMLには、h1、h2、h3、h4、h5、およびh6の6つの異なる見出しタグがあります。

HTML見出しの例
フォントサイズは、「ステップダウン」するたびに小さくなります。 H1が最大になり、H6が最小になります。 デフォルトでは、ページ上の他の要素からそれらを分離し、ユーザーに視覚的な階層を与えるために、ある程度のマージン（またはそれらの周囲の間隔）があります。

タイトル、見出し、段落タグを変更してみてください。 変更を加えたら、それを保存してから、ブラウザを更新します。 おめでとうございます。HTMLを初めて編集しました。

でも退屈そうですね。

私たちのページにいくつかのスタイルを追加して、CSSの真の力についてもっと学びましょう。

これらのHTML要素に独自のスタイルを追加するには、ドキュメントの<head>内に<style>タグを追加する必要があります。

このタグは、すべてのCSSをラップします。 <style>タグの内容をブラウザのスタイルガイドと考えてください。

新しい行の<title>タグの下に、次のようなスタイルタグを追加します。

<title>ページのタイトル</ title>

広告

<スタイル>

 </ style>

スタイルタグの中には、すべての宣言を入力できる場所があります。 CSS宣言は、プロパティとそれに続く値で構成されます。

CSS宣言

<h1>の色を他のテキストとは異なるものにします。これが最も重要であり、目立たせたいからです。 <style>タグの間に以下を追加し、ファイルを保存して、ブラウザを再度更新します。

<スタイル>
h1 {色：青; }
</ style>

これで、このようなものが表示されるはずです。 「HelloWorld！」に気付くでしょう。 テキストが青色になりました。 簡単ですよね？

HタグへのCSSの変更

そこに、あなたはそれをしました！ CSSを使用してHTML要素のスタイルを正常に変更しました。 もう楽しんでいますか？

私たちのページに画像を追加する

ページに含めることができる要素は他にもたくさんありますが、どのWebサイトでも最も目立つ要素の1つは、全能の画像です。 を含めることで簡単に画像を追加できますそのようなタグ：

<img src = “ https://www.fillmurray.com/400/500 " >

注：デモンストレーションのために、www.fillmurray.comという画像プレースホルダーサービスを使用しています。 必要に応じて、ローカルコンピューター上の画像を使用できます。

Webサイトから画像を取得する別の（プロのヒント）方法：使用するWebサイトで画像を見つけて、右クリックします。 [画像アドレスのコピー]をクリックすると、その画像のURLがクリップボードに表示されます。 お使いのブラウザによっては、文言が若干異なる場合があります。 私はGoogleChromeを使用しています。 ホットリンクの使いすぎはお勧めしませんが、このデモでは大したことではありません。

ウェブサイトから画像を保存する方法

この画像要素をコピーして貼り付け、段落タグの下に配置して、完全なコードブロックが私のように見えるようにします。

<！DOCTYPE html>
 <html>
 <頭>
 <title>ページのタイトル</ title>
 <スタイル>
 h1 {色：青;}
 </ style>
 </ head>
 <ボディ>
 <h1> Hello World！ </ h1>
 <p>これが最初の段落です。 </ p>
 <img src = “ https://www.fillmurray.com/400/500 ” alt =”ビル・マーレイの画像” >
 </ body>
 </ html>

ファイルを保存してブラウザをリロードすると、次のように表示されます。

最初のウェブサイトのコーディングを開始する方法

注意を払っていると、 <img>タグの別の属性であるalt =” Bill Murrayの画像”に気づきました。 ブラウザはコードを解読し、あなたや私のようにレンダリングされた出力を見ることができないため、表示されているもののコンテキストを知るための何らかの方法が必要です。

広告

画像にALTタグ（代替テキスト）を追加することで、画像の主題が何であるかをブラウザに伝えることができます。

これはSEO（検索エンジン最適化）にとっても非常に重要であり、さらに重要なことに、このテキストはスクリーンリーダーを使用して目の不自由なユーザーのために読み上げられます。

しかし、リンクはどうですか？

リンクをカバーせずにHTML / CSSの紹介を完了することはできません！ Webサイトを構築するときは、外部ソースにリンクするか、自分のWebサイト内の他の内部ページにリンクするかを問わず、リンクする機能が必要になります。

アンカー要素について話しましょう。 アンカー要素の本当の魔法は、実際にはそのhref属性です。 ビルのウィキペディアページへのリンクを追加して、アンカータグの構造を示しましょう。

<a href= "www.google.com">彼のWikipediaのエントリ</a>を読みます

このコードは、ユーザーが「ウィキペディアのエントリを読んでください」というテキストをクリックすると、www.google.comに移動することをブラウザに通知します。

このコードをheading要素のすぐ下に追加して、コードブロックが次のようになるようにします。

<！DOCTYPE html>
 <html>
 <頭>
 <title>ページのタイトル</ title>
 <スタイル>
 h1 {色：青;}
 </ style>
 </ head>
 <ボディ>
 <h1> Hello World！ </ h1>
 <a href= "https://en.wikipedia.org/wiki/Bill_Murray">彼のWikipediaのエントリ</a>を読みます
 <p>これが最初の段落です。 </ p>
 <img src = “ https://www.fillmurray.com/400/500” alt = “ビル・マーレイの画像” >
 </ body>
 </ html>

保存を押してブラウザを更新すると、うまくいけば、あなたは私のように見えます。

コーディングの基本

フィニッシュラインを越えてそれを取る

私は先に進んで、ビル・マーレイへの小さなオマージュをスタイリングしました。これが私の最終結果です。 以下に追加されたスタイルのいくつかを見ていきます。

ロールロールしてください…

HTMLとCSSの基本

さて、これは何も書いてはいけないことがわかりますが、それは仕様によるものです。 それは、このページでは見ることができるか、スタイルする方法に出たとき、これは氷山の一角です。 以下の各スタイリング方法が何をするのかを理解できるように、物事をシンプルに保ちたいと思いました。

広告

ここまで到達するために追加しなければならなかった小さなCSSに飛び込みましょう。

ボディのスタイリング：

まず、ページの本文に次のように追加しました。

体 {
 背景色：#eee;
 font-family：Helvetica、Arial、sans-serif;
 text-align：center;
 マージン：25px;
 }

背景色
16進数の色の値#eeeを使用して、ページの背景色を非常に明るい灰色に設定しました。 これらの詳細については、MOZでいくつかの例をご覧ください。

フォントファミリー
フォントを、Times NewRomanブラウザが使用するデフォルトのTimesから変更したかったのです。 このため、最初の選択肢としてHelveticaを選択し（ユーザーがそのフォントをコンピューターにインストールしている場合）、2番目の選択肢としてArialを選択し（ユーザーがHelveticaを持っていない場合は、デフォルトでArialになります）、最後のバックアップとして選択しました。 、基本的なサンセリフフォント。

text-align
ページのすべてのテキストを中央揃えにすることを選択しました。 左と右のような値には他にもいくつかのオプションがありますが、これについては中央に配置するのが最適だと思いました。

マージン
ドキュメントの本文に少し余裕を持たせて、余裕を持たせました。

画像のスタイリング：

最後に、ビルの美しい顔をスタイリングしました。つまり、画像要素です。

img {
 ボーダー：10px実線＃41bcd6;
 ボックスシャドウ：2px 5px 5px＃999;
 パディング：10px;
 border-radius：5px;
 }

私はあまり何もしませんでしたが、ビルの写真をページ上で存在感のあるものにしたかったのです。

国境
画像の周囲に10pxの境界線を追加しました。 ＃41bcd6は、水色をレンダリングするもう1つの16進カラー値です（私の秘密のサブリミナルSteve Zissouカラーテーマの一部）。

ボックスシャドウ
画像に立体感を持たせたかったので、明るい影を付けました。 box-shadowプロパティは、影の長さ、ぼかし、色を決定するピクセル値と色値を受け入れます。 ボックスシャドウ宣言の詳細については、Mozがここで適切に分析します。

パディング
画像を額縁のように見せるために、画像と境界線の間に10pxのパディングを追加しました。

ボーダー半径
CSSの優れた機能の1つを説明するために、border-radiusを使用して画像の角を丸くしました。 私がウェブサイトを構築し始めたとき、それのようなものは存在しませんでした、そしてウェブ上で丸い角を作ることは実際にはかなり挑戦的でした。 それ以来、私たちは長い道のりを歩んできましたが、今ではかなり簡単になっています。 pxやemsのような値を受け入れます。ここでは、値を5pxに設定して、気付くように丸めることを選択しました。

結論

この記事全体を通して、私たちはWebサイトの基本的な構造を学ぶために協力しました。 また、いくつかの単純なHTMLとCSSを学びました。これは、最終的には、世代の史上最高の俳優の1人への非常に驚くべき小さな1ページの賛辞になりました。

真面目な話ですが、私と一緒にフォローして、最初の基本的なWebサイトを構築できたと思います。 ビル・マーレイがあなたの好きな俳優ではない場合、私はあなたにこのコードを編集して、あなたの好きな俳優、バンド、またはあなたが望むものを紹介するように挑戦します。

このコードをいつでも参照する必要がある場合は、戻ってこの記事を読むか、便宜上、ここのCodePenに掲載しました。

HTML + CSSだけでできる楽しいことがたくさんあります。 学習を拡大するための優れたリソースをいくつか紹介します。

広告

  • コードアカデミー：HTML / CSSコースの100％無料入門
  • CSS Zen Garden：私にとって本当に「クリック」したWebの最初の例。これは、すべて同じHTMLマークアップを使用する100の異なる外観のWebサイトを持つことができることを理解するのに役立ちます。
  • CSSアニメーション
  • CSSのみを使用したモナリザ
  • CSSのみを使用したハスキー犬のアニメーション
  • CodePen：CodePenは、HTML、CSS、およびJavaScriptコードをライブテストして紹介するためのオンラインツールです。

この記事では表面をかじっただけなので、もっと読んで、いくつかのオンラインコースを受講し、知識をプッシュし続けることをお勧めします。