こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
25 Mountainbiken / badkleinkirchheim
今週の執筆者は岡田祐子さんです。
今回はショップできすぎくんカスタマイズでも重宝するHTML・CSSを習得する近道ついてです。
HTMLとCSSの習得は必須ではありませんが、ライバルと差別化したい時に自由にカスタマイズするにはある程度の知識が必要になります。
すでに売上が伸びてきている方や、検索エンジンからのアクセスが増えてきた方は次のステップに向けて参考にしてください。
ショップできすぎくんカスタマイズで重宝するHTML・CSSを習得する近道
皆さま、こんばんは。岡田です。
皆様はほとんどのWebページが「HTML」と「CSS」で書かれていることはご存知ですよね。
現在ではそれらを詳しく知らなくても、ショップできすぎくんはもとより、WordPressなどのCMSを使えば、誰でも簡単にWebページが作れるようになりましたが、自由にカスタマイズするにはある程度の「HTML」と「CSS」の知識が必要です。
基礎的な知識は市販の本やセミナー、Webコンテンツなどを利用すれば習得できます。
ただ、実際に「ちょっとカッコいいメニュー造りたいな」って思っても、どうすればいいのか応用が利かず、そこであきらめてしまう方も多いのではないでしょうか。
そのよう方に、HTML・CSSを習得する近道の一つをご紹介します。
ズバリ「コピペ」です。
画像や文章には著作権があり、勝手にコピペしてはいけませんが、HTMLソースコード・CSSコードには著作権はありません。
もちろん、ただコピペするだけではなく、真似して試してを繰り返すうち、だんだんと理解が深まっていきます。
◆まずは「ＨＴＭＬ」見てみよう
お気に入りのWebページをブラウザで表示させ、その画面上で右クリック。
表示されたメニューから「ソースの表示」をクリックしてみてください。
たくさんのテキストで書かれた画面が表示されます。
これがWebページの正体ソースコードです。
でも、このソースコードを見ても、どこをどうすればいいのか、わかりませんよね。
そこでおすすめのツールがあります。
◆便利なツールを利用しよう
最新の主なブラウザには、Web制作に便利な機能が付いています。
Internet Explorerでは開発者ツール、Google Chromeではデベロッパーツールがそれです。
Firefox、Safariにも同様のツールがあります。
これらを使うと、ソースコード、CSSがどのように書かれているかを確認できますし、試しに色を変えたり、文字サイズを変更したりして、どの表示状態がベストなのかを簡単に検証できるので便利です。
一般的にこれらのツールは、見たいWebページをブラウザで開いて、
Windowsでは［F12］キー
Macでは［Command］＋［Option］＋［I］キー
で表示されます。
◆もしものトップページを見てみる
もしものトップページの切り替わる大きな写真の下、黒い背景に白い文字のメニュー部分を見てみると<div>タグに 「navigation」というID名が付き
その中に<div><ul><li>タグを使っているのが分かります。
一般的に<ul><li>タグはリスト表示に使い、CSSを使わないと文頭に「●（黒丸）」が付き、並びの次のような表示になります。
●トップ
●無料会員登録
●利用者の紹介
そこでCSSを使い
<div>タグの「ID＝navigation」で背景を黒色にする。
<ul>タグに「list-style-type: none」で「●（黒丸）」を無くす。
<li>タグに「display: inline-block」で、横並びにする。
などなどが見えてきます。
このように、ひとつひとつを検証していくと理解も深まり、自分のWebページに応用することも簡単にできるようになるでしょう。
◆コピペする時に気をつけたいこと
ソースコード、CSSコードをコピペする時、注意したいのが必要なものを全部コピペすることです。
複雑な入れ子構造になっていて、それぞれのCSSが重なりあった関係が生じていることがあります。
部分的にコピペしてもうまくいかないときは、じっくりと読み解いていかなければなりません。
初めうちは手間取るかもしれませんが、じきに慣れてくるでしょう。
ツールの詳しい使い方は、長くなるのでまたの機会にすることにしますね。
興味のある方は検索して調べてください。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ぐるめ通販トライアルのブログ
———————————————————–
それでは、次号もお楽しみに。
※この記事は2016年10月6日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。
メルマガのご登録はこちら
ドロップシッピング十戒（pdf版）好評発売中！
どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。
上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。
