htmlcss 表現の幅を広げてみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

表現の幅を広げてみよう

HTML×CSS|2018年10月16日

2018年10月16日
  • このエントリーをはてなブックマークに追加

少しずつ、コーディングの基本を実践できてきましたか?

今度は、少し表現の幅を広げてみましょう。
前回作ったファイルを引き続き編集していくことも出来ます。
もちろん、復習をかねてゼロから作っても構いません。

今回は、下記のページを自分自身で再現してみてください。

必要なタグは、次の項目でご説明させて頂きます。
参考にしながら進めてみましょう。

もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
出来るだけ解答ファイルを見ること無く、MISSION2を再現してみてください。
できたら次に進んでみてください。

■ 解答ファイルのダウンロード
https://base91.net/mission/cording/2/mission2.zip

※ zipファイルって何? どうやって開くの?
http://base91.net/zip-how-to-open/

今回活用しているHTMLとCSSは下記の通りです。
それぞれ、意味を考えながら、使ってみましょう。

今回必要なHTMLタグ

<img src="img/common/luca-bravo-217276-unsplash.jpg" alt="">

画像を表示させることができます。
ダブルクオーテーション( ” ” )の中は「パス」と言い、画像の位置を示します。
CSSファイルの呼び出し方と一緒です。

位置の意味は、今の「htmlファイルから見て」どこに画像があるかです。
index.htmlと同じ階層から見て、どこに画像があるかを指し示します。

例えば「 img/common/unsplash.jpg 」について考えてみましょう。
まず、htmlファイルと同じ階層にimgフォルダがあります。
imgフォルダの中には、commonフォルダがあります。
そのcommonフォルダの中にあるunsplash.jpgを呼びだす、という意味です。

実際にフォルダ構造は下記のようになります。

imgやcommonはフォルダ名を意味します。
間に / がありますが、/ を挟むことで1つ下の階層に下がります。
1つ上の「親」の階層を示したい場合は ../ となります。

理解しにくい部分かと思いますので、説明動画をご用意いたしました。

何度も出てくる使い方ですので、しっかり覚えておいてください。

<figure></figure>

画像の要素を囲んで「ここは画像ですよ」と意味付けします。

<ol>
<li></li>
<li></li>
<ol> 

連番のリストを意味します。

箇条書きに、数字をつけたい時ってありますよね。
リストの頭に1,2,3,4と順番に数字がつきます。

olの中にliが入り、liがそれぞれのナンバーをもった行を意味します。
liは何個でも置くことができます。

各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/

今回必要なCSSプロパティ

width:900px;

横幅を設定できます。※ 値は仮のものです。

margin-left:auto;
margin-right:auto;

横幅(width)を指定した上で、margin左右をautoにすると、要素自体が中央に寄ります。
なお、本来marginとは、隣接する要素との間に隙間を空けるためのものです。
今回は隙間を空ける効果としてではなく、中央寄せの効果として使います。

border:1px solid #000;

線をつけます。
値は左から「線の太さ(1px)」「線の形(solid)」「線の色(#000)」となります。
また、border-rightというように方向をつけることで、片面だけに線をつけられます。
※ 値は仮のものです。

box-sizing:border-box;

例えば900px横幅を指定したとします。
そこにpaddingで周囲30px余白をつけたとします。
すると、横幅は960pxになります。
ただ、横幅900px固定のまま、30pxの余白を内側に空けたいときありますね。
box-sizingを使えば、padding分は計算されず、合計横幅900pxのまま余白があけられます。
※ 値は仮のものです。

各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/

CSSの詳細度について

またcssの書き方として、もう1つ学ぶべきことがあります。
例えば、下記のようなhtmlがあったとします。

<section class="main">
<div class="sub">
今日はいい天気だなあ。
</div>
</section>

上記内容において、.mainの中に書いた.subをCSSで指定したい時。
実はこの2つを繋げて書くことができるのです。

.main .sub{ 〜〜〜 }

こうして繋げて書くことができます。
上記の場合は、.subに対してcssで指定した効果が適応されます。
ただ、それだったら「.sub単体で書けばいいじゃん」と思うかもしれません。

単体で書いた時と、繋げて書いた時の大きな違いは「優先度」です。
.sub単体で書いたcssと .main .sub と親要素から書いたcssが重なった場合。
親要素(.main)から書くCSSが優先されます。

.sub{
color:#000;
}
.main .sub{
color:#fff;
}

上記の場合、.main .subで書いた#fff(白)が優先されます。
ぜひ、試してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら