ハッとしてグッとくるみたいなページにしたいんだ！新シリーズHTML・CSS超初級編やっちゃいます。

![](https://31.media.tumblr.com/fea2acf1188eea7e34fd5b1d338647bb/tumblr_inline_n7d5qhlsgv1s4017a.jpg)

カラーミーショップユーザー様やネットショップ運営者様で「テンプレートのね、ここを ちょこーっと変えたいだけなんだよ」、「なんか良いカンジにしたいんだけど、 ハッとしてグッとくるみたいなページにしたい。でも周りに聞ける人がいない！」とお困りの皆様…遂に 新シリーズやっちゃいます！

新シリーズ第１弾は HTML・CSS初級編 ！！

講座内容は、実際にカラーミーショップ内で提供している最新テンプレート「Bit」を使って、架空のキャンペーンページを作りながら基礎的な知識を学んでいく、実用的なワークショップです。…と言っても講座は初心者さん向けということで ゆる〜く進んで参ります。どれぐらいゆるいか？んん…福嶋氏(以下、ぷっちょむ)の パーマぐらいゆる〜い内容になっています。ご安心ください。

登壇者は以下の方々

メイン講師 GMOペパボ株式会社 EC事業部WEB開発チームカラーミーショップ　のデザイナー福嶋瞭氏(ぷっちょむ)
コメンテーター GMOペパボ株式会社運営支援グループマネージャー山下諭氏

あ、そうそう。ぷっちょむ氏、ペパボが誇る敏腕デザイナーの内の１人なんですが、なんとね、 23歳なんですって。驚きですよね。私も知ったとき、思わず 「うっそ、マジかよ！？」なんて知性の欠片も感じさせない叫びが出ましたよ。 23歳であのパーマか…（パーマ関係ない）。

それではECデザイン講座〜HTML・CSS初級編スタートです！

まず受講者さんから、講座へのリクエストや不安ごとを聞いてみましょう

HTML・CSS知識ゼロです。ショップオープン時にプロのデザイナーにデザインカスタマイズをしてもらったけど、自分では 写真の差し替えぐらいしかできません。
ショップは既に持っていますが、人に作ってもらったので自分では触れません。随時更新していきたい気持ちは山々なのですが、作ってくれた人は現在多忙でなかなかお願いできなくて…
カラーミーショップで既存のテンプレートを、アレンジしたりカスタマイズしたいんです。
HTML・CSS知識ゼロです。分からないことが分からなくて、何を質問したらいいのかすら分かりません。
前任者から引き継いだサイトなので、もう何をいじったらどこが変わっちゃうのか…ちょっとした修正も地雷を踏みそうで怖いです。 ブラックボックス状態です。

ご存知ですか？カラーミーショップサポートコミュニティ

カラーミーショップサポートコミュニティをご存知ですか？カラーミーショップに関する 情報交換の場です。カスタマイズで分からないことや、勉強する上でおススメの本はあるか、Facebookへのリンクの仕方など、サポートコミュニティに質問を投げかけると 常任のペパボデザイナーがお答えします。また、 他のカラーミーユーザーさんと交流・相談できるコミュニティもありますので是非ご活用ください！

◆HTML編…HTMLとは、家で言うなら設計図。

【ぷっちょむ】例えば家を１戸建てるとします。その場合、柱の位置や部屋のレイアウトを最初に決めますよね。リビングはここ、子供部屋はここ、キッチンはここ…という風に、Webページ上でキャンペーンの紹介はここ、事例はここ、ボタンはここに置こう、といった レイアウト決めて配置する言語のことをHTMLと言います。
【山下】なるほど、家でいう設計図みたいなものですね
【ぷっちょむ】そうですね、柱がどこにはまっているかを決めるイメージです。「壁をどんな色にしようか」と言っても、 そもそも柱がない状態では家が建てられないので。まずHTMLで柱をどこに置くか、どうレイアウトしていくかという事をはじめにしっかり決めていく必要があります。
【山下】設計図には基本的な情報しかないですもんね。この部屋の広さは、寸法は…みたいな感じで。
【ぷっちょむ】そうですね、そういう 図面的な基本情報を見せるのがHTMLです。今回は先にHTMLだけ先にガーッと書いちゃいます。そうすると本当に骨組しかないページが出来上がります。それを見ていただければ、「ああそういうことか」というのが理解できると思うので、実際にやってみましょう。

まずはHTMLについて。皆様カラーミーショップにログインを！

【ぷっちょむ】 HTMLについて説明していくにはまずは 「文書構造を意識する」ということが重要です。

例えば紙媒体で町内会のお知らせを作るなら

見出し…盆踊り開催のお知らせ
説明・内容…いつどこで開催します、他にもこんな催し物がありますよ
挿絵…盆踊ってるイラストがあれば尚良し

【ぷっちょむ】 HTMLでは上記の内容をホームページ上で実現するものだと思ってください

マークアップしてみよう（マークアップ＝HTMLの形式にすること）

今回はBitというデザインのテンプレートを使います。

1．カラーミーショップのページで ショップ作成→ デザイン設定を選択
2． フリーページ編集をクリックすると、フリーページ一覧が表示されます

【山下】これ、皆さんがご自身で持っているページのフリーページじゃダメですか？
【ぷっちょむ】今回はBitというテンプレートで一緒にやっていただきたいですね、出来上がりが変わってしまうので。ただ、この講座で書いたHTMLをあとで自分のページにコピペすると、反映されるのでご活用いただけたらなと思います。

3．フリーページ一覧の 新規作成ボタンをクリック
4．HTMLとCSSを書くためのフォームが表示される
5．https://github.com/pepabo-unchi/custom/issues/12にアクセスし、キャンペーン作成手順ページを表示する

【山下】あのこれ、URLに unchiって入ってますけど、「運営支援チーム」の略ですからね。 ふざけてませんからね。

いやでもunchiはunchiですから。ちなみにこのレポートの一番下にはTeam Project ECCという表記が毎回ついています。この講座に携わった会社や人の… 映画でいうところのエンドロールとでも言いましょうか。そこにもね、はい、 「Planning：運チ」。絶対ふざけてるじゃないですか。日本語入力なら「Planning：運営支援チーム」でいいじゃないですか。 確信犯じゃないですか。

【山下】マークアップって聞きなれない言葉ですけど、先ほど皆様からの質問で引き継ぎ云々ってあったじゃないですか。この マークアップがきちんとできていると、他の人が見てもサイトの構成が分かるんですよね。
【ぷっちょむ】そうなんですよ。だからこれがきちんとしてないとカタコトのHTMLなんですよ。だから引き継いでも 「チョと何言ッテるか分カリマセン」みたいなことが起こるんですね。今回はきちんとした順序のHTMLの書き方を皆様に是非覚えて帰っていただきたいんです。これがきちんと書けていれば、引き継いだときにも、次の担当者さんがスムーズに運営していけると思います。

HTMLの基本形をつくってみる

6．キャンペーン作成手順ページをスクロールし、「HTMLの基本形をつくってみる」を表示させる

【山下】このキャンペーン作成手順ページは今後も残しておこうと思うので、是非ブックマークして、困った時にはこのページをのぞいてみてください。

7．Windowsユーザーは メモ帳を、Macintoshユーザーは テキストエディットを起動します

【山下】なぜ、カラーミーショップのフォームに直接入力ではなく、エディタを使うんですか。
【ぷっちょむ】バックアップですね。カラーミーショップのフォームにはオンライン状態で入力するので、突然回線が遮断されたりするとそれまで入力していたものがすべて消えてしまうんです。なので、いったんエディタに入力・保存をしておくのが安全なんですね。
【山下】時間かけてブログの記事とか、商品説明とか長い文章を書いて、最後「更新」って押したらログアウトされちゃった…とかありますもんね。
【ぷっちょむ】いきなりの停電とかね。あと カラーミーショップのテンプレートもログイン時間が長いと、タイムアウトされちゃうんですね。だからやっぱりエディタを使った方が良いですね。

8．メモ帳もしくはテキストエディットにDOCTYPE（ドックタイプ）宣言を書く

【ぷっちょむ】DOCTYPE宣言というのは、エディタに対して 「これはHTMLの文章ですよ」と宣言するための文書です。これを書かないとHTMLの文書だということを認識してくれません。また、 入力はすべて半角英数です。

9．と入力
10.改行してと入力…はじまり
11.改行してと入力…おわり（/を閉じタグと言います）

HTMLはマトリョーシカ

【ぷっちょむ】 HTMLは外側から内側にどんどんどんどん書いていく言語なんですね。ロシアのマトリョーシカみたいに。この間に入れたいものは この中に書いていきます

12.2行目に書いたを改行し、とに挟まれる形でインデント（半角2つ分のスペース）を入力する

頭と体

【ぷっちょむ】 HTMLには人間と同じで
とというものがあります。というのは脳をつかさどる部分、にはこのHTMLはどういう設定で動きますというのを書きます。

13．ここまでで以下のコードが書けました

14．さらにを加えます

pre>

<meta charset="euc-jp"></code></pre>

`<meta charset="”euc-jp”">`ってなに

【ぷっちょむ】<meta charset="”euc-jp”">は"euc-jp"という文字コードの指定です。

15．さらにを加えます。今回は夏の準備キャンペーン！

pre>

<meta charset="euc-jp"><title>夏の準備キャンペーン</title></code></pre>

16．体（body）を加えます。で改行し、半角スペースを２つ入れ、もう一度改行します。

<meta charset="euc-jp"><title>夏の準備キャンペーン</title>

文書の形を意識してマークアップする（マークアップ＝HTMLの形式にすること）

【ぷっちょむ】キャンペーンページ作成手順を見ていただくと、「文書の形を意識してマークアップする」という項目があります。先ほど町内会（盆踊り）のチラシを作るという例を出しましたが、 HTMLも同じで先にマークアップしていないテキストを作っておきます。

つまり盆踊りの例でいうと

見出し…盆踊り開催のお知らせ
説明・内容…いつどこで開催します、他にもこんな催し物がありますよ
挿絵…盆踊ってるイラストがあれば尚良し
…なんかを、先にテキストで羅列しておくということですね。

【ぷっちょむ】今回はキャンペーンページ作成手順にある「文書の形を意識してマークアップする。」の項目にある文字を、夏の準備キャンペーン 今対象商品を購入すると抽選でiPad・Amazonギフトカードをプレゼント！〜 今すぐ対象商品をみるまでをテキストエディターにコピー＆ペーストして使います。

17．マークアップの作業に入ります

<meta charset="euc-jp"><title>夏の準備キャンペーン</title><h1>夏の準備キャンペーン</h1>

【ぷっちょむ】
というのは１番大きい見出しに使います。
hはヘッディングの略、つまり見出しという意味ですね。
くらいまでは使うと思うので、覚えておいてください。
【山下】タグって全部意味があるんですね。
【ぷっちょむ】そうなんですよ。外国人が考えたので英語がベースになっています。
【山下】じゃあ タグは意味も覚えると、頭に入りやすいかもしれませんね。

18．
夏の準備キャンペーン
の下に説明文を入れてみましょう。

<meta charset="euc-jp"><title>夏の準備キャンペーン</title><h1>夏の準備キャンペーン</h1>  
<p>今対象商品を購入すると抽選でiPad・Amazonギフトカードをプレゼント！</p>

【ぷっちょむ】から見て半角2つ分のスペースを空け
の下に、
と入力してみましょう。 文末には
も忘れずに。は作文でいうところの段落ですね。
【山下】は英語でパラグラフ、まさに段落
って意味ですよね。

19．「今すぐ対象商品をみる」は最終的にボタンになります。

<meta charset="euc-jp"><title>夏の準備キャンペーン</title><h1>夏の準備キャンペーン</h1>  
<p>今対象商品を購入すると抽選でiPad・Amazonギフトカードをプレゼント！</p>  
<a href="#">今すぐ対象商品をみる</a>

【ぷっちょむ】から見て半角2つ分のスペースを空け、と入力します。はこの「今すぐ対象商品をみる」ボタンを押したとき、どのページに飛ぶかを設定するところです。と入力してください。今回はではリンク先がないので “#”と入力します。 #を入れておくとボタンをクリックしてもどこにも遷移しません、仮の状態ですね。後々、どこに飛ぶか決まったら。

せっかくなので、ここまでのHTML入力がショップ上にどう反映されるのか見てみましょう！

【ぷっちょむ】カラーミーショップのテンプレートはまで、すでに出来上がっているものが多いので、今回は「
夏の準備キャンペーン
」から下をコピー＆ペーストしてみましょう。行でいうと
・
・の３行ですね。

20．カラーミーショップのフリーページを表示して、 ページタイトルのところに「夏のキャンペーン」と入力します。
21．左上にある ソースというボタンをクリックする。

【ぷっちょむ】このソースというボタンを押すことで、入力された文字がHTMLだということを認識してくれます。

22．
・
・の３行をコピー＆ペーストする
23．保存する
24． フリーページ確認ボタンをクリックでプレビュー確認。

いかがでしたか？HTMLってなんだか、文字化けみたいな呪文みたいな奇天烈な文字の羅列にしか見えていなかった…という方も、中を分解してみれば「そういうことか！」と、アレルギー反応が治まってくれたら、ぷっちょむ嬉しい。山ピーうれピー。この 軟膏的HTML/CSSゆるめ講座はこれからもシリーズとして続いていきます。すべて見終わったころには、もうHTML/CSSドンと来い！になっているはず。そしたらもう、ぷっちょむ嬉しい。山ピーうれピー。

このあと、講座は CSS編へと進みます

CSSとは、家で言うならデザイン。

*【ぷっちょむ】HTMLと同様にCSSを家で例えるなら、壁紙はどうするか、照明はどうしよう…といった デザインに関わってくる部分、それがCSSです。Web上でこのボタンは丸にしよう、背景はこの色にしよう、ここに画像を差し込もう、というのがCSSですね。今回は実際にCSSを書いてみます。