HTMLとCSSを使ったバースデーカードの作り方

ページ名：HTMLとCSSを使ったバースデーカードの作り方

バースデーカードを作るのは一般的だ。しかし、もしかしたら、本籍を知らない人にバースデーカードを送りたいかもしれないし、本当にITが好きな人に送りたいかもしれない。または、単にデジタルバースデーカードを作ってみたいですか？それなら、あなたは正しい場所にいる！

パート1

ファイルを作る

  1. テキストエディタを開く。お使いのシステムにプリインストールされているエディタなら何でも使えます：Windowsではメモ帳、Macではテキストエディット、LinuxではNano。Windowsのメモ帳、Macのテキストエディット、LinuxのNanoなど。
  2. ドキュメントタイプを宣言する。これは、ブラウザがこれがHTMLファイルであることを認識するために重要です。テキストエディタに書き込んでください：
      <!DOCTYPE html>
  3. 開閉htmlタグを追加します。ここにHTMLコードが入ります。文書タイプ宣言はhtmlタグの間には入りません。あなたのコードは次のようになるはずです：
    <!DOCTYPE html> <html> </html>
パート2

HTMLを使ってコンテンツを追加する

  1. headを追加します。headに入れる項目のほとんどは、ページ上では見えないものです。開始と終了のheadタグを記述してheadを追加します。
    • タイトルを入れる。タイトルはブラウザのタブに表示されるテキストです。開閉するtitleタグの間に記述します。タイトルは短くしましょう。バースデーカードには「Happy Birthday!
    • エンコーディングを宣言します。これは、バースデーカードのテキストが正しく表示されるようにするためです。UTF-8は非常に一般的で、ラテン文字、数字、句読点以外の文字もサポートしています。テキストエディタに異なるエンコーディングで保存するオプションがある場合は、必ず宣言したものを選んでください。閉じメタタグを書く代わりに、>の前に/を書くことに注意してください。
    • これでHTMLファイルは次のようになります（スペースやインデントは必須ではありませんが、より読みやすくなります）：
        <!DOCTYPE html> <html> <head> <title>誕生日おめでとう</title> <meta charset="utf-8" /> </head> </html
  2. ウェブ・ブラウザでファイルを開き、ここまでですべてが正しいかどうかチェックしてください。最初に保存する必要があります。例えばbirthday.htmlのように、わかりやすい名前と.htmlという拡張子を使います。ウェブブラウザで新しいタブを開きます。そのタブでファイルを開きます。これは通常、ファイル → ファイルを開く...をクリックするか、Ctrl+Oを押して行います。
    • タイトルが "Happy Birthday "の空のページが表示されます。
  3. 本文を追加します。これはheadの下に属します。本文は目に見えるコンテンツがある場所です。bodyは、開始タグと終了タグを使って作ります。
      <!DOCTYPE html> <html> <head> <title>ハッピーバースデー</title> <meta charset="utf-8" /> </head> </html>
  4. 本文に内容を書きます。これはバースデーカードに書きたいことなら何でもいい。今のところ、単なるテキストのように見えるでしょう。後で高度な書式を追加します。
    • 見出しをつけるにはhタグを使います。見出しには1から6までのレベルがあり、レベル1が最も大きく、レベル6が最も小さくなります。レベル1の見出しはh1タグで、レベル2はh2タグで、といったように宣言します。
    • テキストの各段落は、開始と終了のpタグで挟みます。
    • strongタグで囲まれたテキストは、デフォルトでは太字で表示され、emタグで斜体になります。
    • 段落の中にあるテキストで、特別なスタイル、たとえば別の色やフォント、サイズにしたいものは、spanに入れます。例えば、テキストの色を赤にしたい場合は "redText "などです。段落全体にクラスを割り当てることもできます。
    • HTMLの例を以下に示します：
      <!DOCTYPE html> <html> <head> <title>誕生日おめでとう</title> <meta charset="utf-8" /> </head> <body> <h1>誕生日おめでとう、<span >カール</span>！</h1> <p>あなたはもう<span >15</span>歳です。</p> <p>あなたのこれからの人生における<strong>成功</strong>と<strong>幸福</strong>を心からお祈りしています。</p> <p>あなたは素晴らしい人です！</p> <p >-あなたの友人、ダニエラ</p> </body> </html> <h1> <p>お誕生日おめでとうございます。
  5. コンテンツをdivに入れます。こうすることで、divの周りに枠線を引いたり、幅を設定したりすることができます。枠線を引く前は、div自体は表示されません。divにIDを付けます。例えば "birthdayCard "です。クラスと違ってIDは一意なので、このページでは誕生日カードを一枚だけ作ることになります。
      <!DOCTYPE html> <html> <head> <title>誕生日おめでとう</title> <meta charset="utf-8" /> </head> <body> <div > <h1>誕生日おめでとう、<span >カール</span>さん！</h1> <p>あなたはもう<span >15</span>歳です。</p> <p>これからの人生での<strong>成功</strong>と<strong>幸福</strong>を心から祈っています。</p> <p>あなたは素晴らしい人です！</p> <p>-あなたの友人、ダニエラ</p> </div> </body> </html>
  6. ブラウザでファイルをリロードしてプレビューしてください。最初にテキストエディタで内容を保存することを忘れないでください。これでコンテンツが表示されるはずですが、色や異なるフォントなどのフォーマットはありません。span要素は今のところ見えないはずです。
パート3

CSSを使ってフォーマットを追加する

  1. テキストエディタで新しいファイルを開きます。調整が必要な場合に備えて、HTMLコンテンツは開いたままにしておいてください。この新しいファイルにはCSSスタイルが含まれるので、.cssという拡張子をつけて保存してください。
  2. 背景色とデフォルトの文字色を設定します。コンテンツを配置した div を指す ID "birthdayCard" に対してこれらを指定すると、明示的に指定された場合を除き、div 内のすべてに設定されます。CSSでは、IDのスタイルを指定するには、#記号を入力し、次に要素名を入力し、中かっこでスタイルを指定します。
    • RGBカラーとカラーワードの両方を使用できます。たとえば、「#FF0000」と「red」の両方を使用して、鮮やかな赤を作成できます。カラー・ワードと対応するコードの完全なリストは.
    • 可能な組み合わせは次のとおりです：
        #birthdayCard { background: darkorange; color：#111111; }
    • HTMLとCSSをつなげます。CSSファイルを保存します。HTMLファイルのheadに入り、以下の行を追加する：
        <link rel="stylesheet" href="birthday.css" />を追加します。
    • "birthday.css "をあなたのCSSファイルの名前に置き換えてください。その後、ページを保存してリロードしてください。
  3. divの幅を設定します。今のままでは、divがウィンドウ幅いっぱいに広がってしまいます。これは見た目がよくありません。幅を画面サイズの何分の一かに設定し、小さな画面で小さくなりすぎないように最小サイズを指定する必要があります。
      #birthdayCard { background: darkorange; color：#幅: 25%; 最小幅: 300px; }.
  4. 枠線を引く。こうすることで、画面の他の部分からカードを視覚的に引き離し、見栄えを良くします。ボーダーの幅、色、スタイルをすべてのボーダーに指定することも、いくつかのボーダーを異なるものにすることもできます。
    • ソリッドは特別な外観を持たない通常のボーダーです。その他のボーダースタイルには、点線、破線、二重、溝、尾根、はめ込み、アウトセットなどがあります。
      • #birthdayCard { background: darkorange; color：#width: 25%; min-width: 300px; border：border: 8px solid orange; border-left: 10px solid #DD0000; }.
  5. パディングとマージンを追加する。現在、テキストはdivのボーダーに近すぎ、divのボーダーはページのボーダーに近すぎます。これは見た目がよくありません。これを修正するには、パディングとマージンを使います。
    • パディングは、div内の要素をdivの境界線から離すために使用します。
    • マージンは、divの外側にあるもの（この場合はページの境界線）からdivを離すために使用します。
    • マージンもパディングも、1つまたは4つの値を指定できます。4つの値を指定した場合、それぞれが異なる辺に対応します。1つの値を指定した場合は、それが4辺すべてに使われます。
      • #birthdayCard { background: darkorange; color：#width: 25%; min-width: 300px; border：border: 8px solid orange; border-left: 10px solid #DD0000; margin: 10px; padding：20px; }.
  6. クラスと要素のスタイルを追加します。前のステップで、段落とスパンに異なるクラスを割り当てました。今までは、これは見えませんでしたが、今度は、これらのクラスが持つべきスタイルを実際に追加してください。クラスのスタイルを定義するには、.記号、クラス名、スタイルの中括弧を使用します。要素のスタイルは、要素の名前を書いてから中カッコで囲みます。
      #birthdayCard { background: darkorange; color：#width: 25%; min-width: 300px; border：border: 8px solid orange; border-left: 10px solid #DD0000; margin: 10px; padding：20px; } .redText { color：#.signature { text-align: right; } strong { font-size: large; color：color: #CC0000; } } strong { font size: large; color: #CC0000; }
  7. すべてのファイルを保存し、タブをリロードする。最終結果を見てください。満足できなければ、スタイルとコンテンツを調整してください。そうでなければ、テキストエディタとタブを閉じます。
  8. バースデーカードを送る。USBメモリに入れて渡したり（必要な材料や道具があればできます）、ソーシャルネットワークにアップロードしたり、その他あなたが実用的だと思う方法で送ることができます。2つのファイルがあり、どちらもバースデーカードを正しく表示するために必要なので、（すべての主要なプラットフォームで動作する）または（Windowsでこれらを開くのは難しいので、受信者がMacまたはLinuxを使用している場合のみ）を作成することができます。
この記事は、CC BY-NC-SAの下で公開されている「 HTMLとCSSでバースデーカードを作る方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧