WEBサイトを作ろう!HTMLとCSS入門 #2

 

目次
はじめに
Sublime Textのプラグイン
HTMLの主要な要素

はじめに

前回の記事ではWEBサイトの基本のマークアップ言語であるHTMLとCSSの基本文法を学びました。これらはWEBサイトを作るときの必須の知識になります。今回は基本文法を使用して実際に自己紹介ページを制作できるまでを学習したいと思います。

Sublime Textのプラグイン

その前に前回の事前準備でインストールしたSublime Textというエディタにはよりコードを書きやすくするような機能(プラグイン)を追加することができます。プラグインは他のプログラマーが作成しており誰でも簡単にインストールすることが可能です。Sublime TextではPackage Controlというプラグインをインスールするためのプラグインが存在しており、はじめにそれをインストールしましょう。

これからご紹介するパッケージは初心者の方はこの記事を読み進めるために最低限に必要なものです。

Package Control

https://packagecontrol.io/installation

上記のリンクに行き、下記のようなコードをコピーしましょう。

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

View > Console を押しそこのコピーしたコードを貼り付けましょう

All Autocomplete

HTMLとCSSのコードを予測変換してくれるものです。

パッケージをインストールするには以下の手順に従ってください。

まず、以下をしてください。

Windows: Ctrl + Shift + P

Mac: Cmd + Shift + P

そしたら、入力欄が出てくると思いますので

install

を入力すれば、

Package Control: Install Packages

と予測変換に出ると思うので、それを選択しましょう。

そこにパッケージ名を入力することで、好きなパッケージをインスールすることができます。

All Autocomplete

を検索してそれを選択しましょう。

自己紹介ページを作成してみる

プログラミングはスキルです!

どんどん練習をしてどんどん上達していきましょう。

今回は実際にHTMLとCSSを使用してご自身を紹介するWEBページを作っていきましょう。

実際に見てみないとイメージがわかないので、私のサンプルをお見せします。

そっけないページですが、HTMLとCSSの基礎の練習にはもってこいです。それでは実際にやっていきましょう。

フォルダとファイルの作成

前回の記事で作成「はじめてのHTMLとCSS」の中に「#2」というフォルダを作成して

前回と同じように「index.html」と「style.css」を作成しましょう。

まずは「index.html」にテンプレートを以下のように書きましょう

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <!-- ここに内容を書く -->
</body>
</html>

HTMLの主要な要素

セクション(section)

私は習慣としてページをセクションでわけることにしています。

今回は一つしかないですが、他にも色んな情報を追加したいときのことを考えてセクションの中に

コードを書いていきましょう。

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <section class='basic-info'>
    <!-- ここに内容を書いていく -->
  </section>
</body>
</html>

<section>を作成する際はどのような情報を書くかclassを書くのは良い習慣です。

今回は基本的な情報を保存したいので「basic-info」というクラス名にしました。

見出し(h1)

自己紹介をするときはまず名前から教えますので、見出しとしてご自身の名前を書きましょう!

見出しを作成するには<h1>タグを使用します。

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <section class='basic-info'>
   <h1>五石凪</h1>
 </section>
</body>
</html>

ここまでは前回したことと変わりませんね。

段落(p)

基本的に文章を書く際は<p>を使用します。

<p>を使用して自己紹介文を書いていきましょう。

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <section class='basic-info'>
    <h1>五石凪</h1>
    <p>自己紹介:<br>
      こんにちは。カリフォルニア在住のエンジニアです。
      ぜひ気軽にご連絡ください。
    </p>
  </section>
</body>
</html>

途中にある<br>は改行を表します。

HTMLでは普通に改行しても表示されたページ上では改行されません。

リスト(ul, li)

リストを作成したいときはulとliを使用します。

ul は unordered list

li は list item

を表します。順番がないリスト(unordered list)の中にアイテムを入れるという構造になります。

実際に見てみたほうがわかりやすいかもしれません。

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <section class='basic-info'>
    <h1>五石 凪</h1>
    <p>自己紹介:<br>
      こんにちは。カリフォルニア在住のエンジニアです。
      ぜひ気軽にご連絡ください。
    </p>
    <ul>
      <li>仕事: ソフトウェアエンジニア</li>
      <li>性別: 男</li>
    </ul>
</body>
</html>

 

テーブル(table)

テーブルを作成するときはtable, tr, th, tdを使用します

大きな枠としてtable

テーブルの行としてtr

セルとしてthやtdを使用します。(thはヘッダー、tdは普通のセルとして使います)

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <section class='basic-info'>
    <h1>五石 凪</h1>
    <p>自己紹介:<br>
      こんにちは。カリフォルニア在住のエンジニアです。
      ぜひ気軽にご連絡ください。
    </p>
    <ul>
      <li>仕事: ソフトウェアエンジニア</li>
      <li>性別: 男</li>
    </ul>

    <table>
      <tr><th>趣味</th><td>プログラミング</td></tr>
      <tr><th>会社</th><td>KAKAXI</td></tr>
      <tr><th>国</th><td>アメリカ</td></tr>
      <tr><th>出身</th><td>大阪やで</td></tr>
    </table>
  </section>
</body>
</html>

HTMLは以上で終了です。

これにCSSを加えることで、はじめのサンプルのようなサイトが出来上がります。

section {
  margin-top: 30px;
  margin: auto;
  width: 1000px;
}

table {
  border-collapse: collapse;
  width: 300px;
}

table, td, th {
  border: 1px solid #000;
}

th {
  background-color: #dcdcdc;
}

 

これを別途CSSファイルに書き込み、既存のHTMLサイトで読み込みをすると完成します。

ご自身でHTMLやCSSを追記して、よりよい自己紹介ページを作成することをオススメします。

 


 

Naggi Clubではプログラミング学習をサポートしております。

私、現役のシリコンバレーエンジニアの五石が様々なプログラミングに関する技術的な質問から

スケジュール管理やモチベーション維持まで目標を持って精一杯サポートさせていただきます。

詳しい情報はこちらから

大阪桐蔭高校中退。TECH::CAMP梅田でプログラミングを学習する。 同じくTECH::CAMPでメンターを経験する。 その後、渡米しカリフォルニアの大学に行きながら シリコンバレーで現役のエンジニアとして働いている。 同時にTECHACADEMYのメンターをしている
投稿を作成しました 9

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る
%d人のブロガーが「いいね」をつけました。