レンタルオフィス「METSオフィス」運営責任者のオバタです。
自作したホームページで「ここだけちょっといじりたいんだけどな～」と常々思ってる部分があるけどよくわからないし、それだけで外注するのも億劫だし……とお悩みの起業家は少なくないはず。
そんな方々に実践形式で手軽にホームページのカスタマイズ方法を学べる「TechDrill」を簡潔に紹介しようと思ったのですが、１ページにまとめるのが大変……。
ということで、私がかわりに実践して皆さまによりわかりやすく伝えるという連載企画モノとして始めることにしました。
「ちょっといじりたい」にも色々あると思いますが、「WIX」などのホームページ作成サービスを使っている方も、ワードプレスのテンプレートをちょっといじって使っている方も、とりあえず自分に必要な情報だけでも拾っていっていただければ幸いです。
目次
TechDRILLの概要
「TechDRILL」とは、未経験からサービスをつくれるエンジニアになるための短期集中プログラミング学習プログラム「TECH::CAMP」が提供している実践型プログラミング問題集。
ドリル形式で問題を解いていくことで、現在のスキルを確認するとともに課題を見つけることができる。
当記事作成時点では「HTML / CSS」「JavaScript」「Ruby」「Ruby on Rails」「Swift」の５つを取り扱っている。毎週新しい問題をアップデートしているので、最新のプログラミング情報を確認できる。
登録・ログイン
「TechDRILL」を利用するにはユーザー登録が必要です。
上記リンクからアクセスし、「新規登録」より進み、
「名前」「アドレス」「パスワード」を打ち込んでユーザー登録しましょう。
ログイン時はアドレスとパスワードのみでOKです。
カテゴリ選択
初回ログイン時はまずカテゴリ選択画面から。
「HTML / CSS」を選択し、新着問題一覧へ。
カテゴリは「マイページ」からも変更・追加可能です。
実践①は「指示書通りに実装してみよう！」を選択
第一回目は「指示書通りに実装してみよう！」にチャレンジ！
※定期的に新着問題がアップデートされるそうなので、基本的には上から順番に、または簡単そうなものを順にやっていきます。
ヘッダーの固定、clear: both;をして回り込みを防ぐなどの知識を得ることができるとのことで、全体のレイアウトをいじる際に必要な知識の一部が学べそうですね。
問題: 1 雛形のHTMLとCSSを用いて上記の指示書通りの実装をしてください。
【注意】
・ブラウザの幅が960px未満のとき、ヘッダーとフッターが960px以下にならないようにする
・ヘッダーはスクロールしても固定されるようにする
作業の流れとしては
①指示書を確認
②HTMLとCSS雛形を確認→それぞれファイル作成
③サーバー上へアップロード
④【注意】の内容になるようにCSSファイルをカスタマイズ
⑤ネット上で指示書通りの表示が確認できれば「実装」でクリア！
となるかと思います。さっそく進めていきましょう。
※作業環境は「Windows10」です。
Mac等をお使いの方は環境に合わせた作業を行ってください。
指示書の確認
つくったページが以下の通り表示されればOKということですね。
雛形（HTML）の確認
コードだけだとわかりづらいと思いますので、各行ごとの説明を入れてみました。
<!DOCTYPE html> （HTML5のDOCTYPE宣言）
<html lang="en" class=""> （文書がHTML文書であることを宣言、言語指定…日本語→ja、英語→en）
<head> （head要素開始タグ）
<meta charset="UTF-8"> （文字コード「UTF-8」）
<title>Document</title> （ページタイトル「Document」）
<link rel="stylesheet" href="sample.css"> （外部スタイルシート「sample.css」読み込み）
</head> （head終了タグ）
<body> （実際にブラウザに表示されるコードを記述開始）
<div class="wrapper"> （「.wrapper」要素ここから）
<header> （「header」要素ここから）
</header> （「header」終了タグ）
<div class="contents"> （「.contents」ここから）
<div class="left-content">（「.left-content」ここから）
</div> （「.left-content」終了タグ）
<div class="right-content"> （「.right-content」ここから）
</div> （「.right-content」終了タグ）
<div class="bottom-content"> （「bottom-content」ここから）
</div> （「.bottom-content」終了タグ）
</div> （「.contents」終了タグ）
<footer> （「footer」要素ここから）
</footer> （「footer」終了タグ）
</div> （「.wrapper」終了）
</body> （body終了タグ）
</html> （html終了タグ）雛形（HTML）ファイルの作成方法
「TechDRILL」のサイト上からHTMLコードをコピー。
それを新規テキストドキュメントに貼り付けます。
※デスクトップ上で右クリック→新規作成→テキストドキュメント
この中にHTMLコードをそのまま貼り付ける
貼り付けたら上部メニュー「ファイル」→「名前をつけて保存」
ファイルの種類を「HTMLファイル」、名前は「○○○.html」にして保存します。
実践ではファイル名を「index.html」にしました。
全く同じように作業したい方は同名のファイルを作成してください。
とりあえずこれでHTMLファイルの作成は完了したので、
次にこのHTMLを装飾するためのスタイルシートを作成します。
おまけ：HTMLファイルの作成方法がわからない方へ
HTMLファイルを新規作成し保存する方法がわからない方は、PCのメモ帳などにhtmlのコードをコピペして、メニュー「ファイル」→「名前を付けて保存」→「ファイルの種類…すべてのファイル」と選択し、「index.html」という名前と拡張子を付けて保存してください。
高度な機能が使えるテキストエディタで新規作成したい方は下記の記事を併せてお読みください。
■使いやすさ抜群の無料テキストエディタ「Atom」の使い方とhtml・CSSファイルを新規作成する方法
⇒ https://mets-office.com/web-tool/editor-atom/
雛形（CSS）の確認
html, body{ （html、body要素のスタイル指定）
height: 100%;
margin: 0;
padding: 0;
}
.wrapper{ （「.wrapper」要素のスタイル指定）
height: 100%;
}
header{ （「header」要素のスタイル指定）
background-color: #333;
height: 70px;
}
.contents{ （「.contents」要素のスタイル指定）
width: 960px;
background-color: #eee;
margin: 0 auto;
}
.left-content{ （「.left-content」要素のスタイル指定）
background-color: red;
width: 700px;
height: 400px;
}
.right-content{ （「.right-content」要素のスタイル指定）
background-color: yellow;
width: 260px;
height: 300px;
}
.bottom-content{ （「.bottom-content」要素のスタイル指定）
background-color: green;
height: 250px;
}
footer{（「footer」要素のスタイル指定）
height: 60px;
background-color: #333;
}雛形（CSS）ファイルの作成方法
「TechDRILL」のサイト上からCSSのコードをコピー。
それを新規テキストドキュメントに貼り付けます。
※デスクトップ上で右クリック→新規作成→テキストドキュメント
この中にHTMLコードをそのまま貼り付ける
貼り付けたら上部メニュー「ファイル」→「名前をつけて保存」
ファイルの種類を「CSSファイル」にして保存します。
実践ではファイル名を「sample.css」にしました。
全く同じように作業したい方は同名のファイルを作成してください。
HTMLとCSSのファイルが完成したので、
次はサーバー上にアップロードする作業に移ります。
HTMLファイルとCSSファイルをアップロード
FTPを使って各ファイルをアップロードしていきます。
今回、私は当サイト（mets-office.com）のトップページのひとつ下の階層に
「td」というディレクトリを新規作成。
さらにその下に「p001」というディレクトリを作成。
その中に「index.html」と「sample.css」をアップロードしました。
アップロードする際、htmlファイルとcssファイルを別々のフォルダに分ける場合は、
html内の「link rel="stylesheet" href="sample.css"」の部分を変える必要があります。
例：
○○○.com
└「test1」─「index.html」
└「test2」─「sample.css」
上記のような場合は、
「link rel="stylesheet" href="//○○○.com/test2/sample.css"」といったように
読み込む場所を正しく指定してください。
次に、指示書の注意部分に対応するために「sample.css」をカスタマイズしていきます。
【CSS編集１】ブラウザの幅が960px未満→ヘッダーとフッターが960px以下にならないように
ブラウザ表示部分を囲っている要素「.wrapper」の記述を変更します。
.wrapper{
min-width: 960px; /* 横幅の最小値を960pxに */
}「.wrapper」の横幅の最小値を960pxに設定することで、
「.wrapper」要素の中にあるヘッダーとフッターが960px以下にならないようにします。
【CSS編集２】スクロール時もヘッダー固定
スクロール時のヘッダーを固定するためには、
ヘッダー部分の要素「header」に追加記述します。
header{
width: 100%; /* ヘッダー横幅100％ */
position: fixed; /* スクロール時ヘッダー固定 */
background-color: #333;
height: 70px;
}「position: fixed」で要素を固定します。
「width（幅）」を指定しないとヘッダーが消えてしまうので要注意。
【CSS編集３】「.contents」内の要素の位置を修正
ここまでの作業により以下の状態まで仕上がりました。
……まだ作業が残っていたようです。
そういえば「.contents」内の要素の位置を修正していませんでした。
ということで、以下の要素に追加記述していきます。
.contents{
width: 960px;
background-color: #eee;
margin: 0 auto;
padding-top: 70px; /* ヘッダーが70pxで固定されているので70pxぶん↑に領域内スペースをつくる */
}
.left-content{
float: left; /* 要素を左に寄せる*/
background-color: red;
width: 700px;
height: 400px;
}
.right-content{
float: left; /* 要素を右に寄せる*/
background-color: yellow;
width: 260px;
height: 300px;
}
.bottom-content{
clear: both; /* 回り込み解除 */
background-color: green;
height: 250px;
}ヘッダーを固定したことにより、
「.contents」の上70px分が固定したヘッダーと被ってしまいます。
そのスペースを調節するために「padding-top」で70pxを指定します。
さらに「float」で左右の位置を指定。
「clear: both」で回り込みを解除し、指示書の通りの表示が出るよう修正します。
ここまで追加修正が終わったら、CSSファイルをアップロードして上書きします。
完成
ファイルをアップロードした場所の「index.html」へアクセス。
指示書通りの表示が確認できたので、完成です！
まとめ
ホームページは今や簡単に自作可能な時代となりましたが、手軽に作れるものは用意されたテンプレートにテキストや画像をはめ込んでいくタイプが多く、思い通りのカスタマイズをするとなるとどうしてもHTMLとCSSの知識が必要となってきますよね。
要素の一部だけでもいいのでちょっとした変更ができるようになれば、色々と応用が効くようになります。これを機に少しでもHTMLとCSSに触れてみようと思ってもらえたら嬉しいです。
それではまた次回の挑戦をお楽しみに！
