Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@masayasviel

HTML・CSSハンズオン用

Last updated at Posted at 2018-10-24

はじめに

こちらの記事は拓殖大学ディジタルコンテンツ研究愛好会主催のハンズオン用の内部資料になります。

HTML, CSSの概要

HTMLとは

ハイパーテキスト・マークアップ・ランゲージ(HyperText Markup Language)の略。
Webページを作るためのマークアップ言語で、主にWebページの骨組み(文章や画像の構成・組み立てなど)部分をHTMLで書く。

マークアップとは

マークアップとは「目印をつける」という意味であり、文章の各部分の役割に名前を付けていくことである。
例えば、見出し・段落・表・リストなどがこれに該当する。

CSSとは

カスケーディング・スタイル・シート(Cascading Style Sheets)の略。
Webページを装飾ためのスタイルシート言語で、主にHTMLで書かれたWebページの骨組みを装飾する(文章の色やフォントの変更・位置の指定など)部分をCSSで書く。

実際に書いていこう！

メモ帳やテキストエディタに書き連ねていきます。
書いたコードは保存して、ファイルの中のHTMLファイルを右クリック。｢プログラムから開く｣でGoogle Chromeから開きましょう。

HTML

拡張子は｢.html｣です。
参照リンク
以下リファレンス
目的別
ABC順

基本のひな形

template.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>
    <body>
        <p>Hello world!</p>
    </body>
</html>

こんな感じで書いていきます。
そして、これがHTMLのHello Worldでもあります。

以下の二つは書かなくても動きます。が、書かないとエラーを吐かれるのでお作法として書くようにしましょう。

index.html
<!DOCTYPE html>

ブラウザにHTMLだということを分からせる宣言。だから*一番最初に書く。*めっちゃ大切。絶対書け。
参考

index.html
<meta charset="utf-8">

ブラウザにHTMLがどの文字コードで書かれているかを分からせる宣言。保存したHTMLファイルの文字コードによって変えていく必要はありますが、これを書かないと文字化けする場合もあるので、忘れずに書きましょう。
また、Webの世界では基本的にUTF-8という文字コードでHTMLやCSSが書かれています。間違えてもShift-JISなどで書かないようにしましょう。
文字コードに関して参考

タグ

<html>Webページ全体のHTML部分</html>
<head>ヘッダー部分</head>
<title>タイトル</title>
<body>ページの内容部分</body>
<p>段落</p>
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<b>太字になる</b>
<s>取り消し線</s>
<i>italic</i>
<em>強調</em>
<strong>強調(強)</strong>
<br><!-- 改行 -->
<ruby>青眼の白龍<rt>ブルーアイズホワイトドラゴン</rt></ruby><!-- ルビ -->
<meta charset="utf-8">
<!-- コメント -->

こんな感じで表示される(一部のみ)
太字になる
italic--(比較用)italic
強調
強調(強)
取り消し線
青眼の白龍ブルーアイズホワイトドラゴン

まだまだ沢山あるから自分で調べよう！
HTMLタグリファレンス
ABC順
目的別

画像

<img src="画像ファイルのURLを指定（必須属性）" alt="画像が利用できない環境向けのテキストを指定" title="補足情報(後述)">

属性については後述

srcは画像のURL、またはファイル・フォルダの在処を記述します。これは相対パスで指定します。

パスについて
ここでは詳しく解説しませんが、相対パスと絶対パスというものがあります。
参照リンク
例えば、以下のようなディレクトリ構造で、『index.htmlファイル』から『imageファイル』の中に入っている『kbtit.png』を参照したいとします。

project_inm
    |
    +- index.html
    +- style.css
    +- image
         |
         +- yaju_senpai.png
         +- syamu_game.png
         +- kbtit.png

その場合、src属性に渡すURLは以下のようになります。

src="./image/kbtit.png"

＊./はなくても大丈夫です。

属性

<p class="hoge">複数に名づけ出来る</p>
<p id="fuga">オンリーワンな名前を付けられる</p>
<p title="補足情報">ここにマウスカーソルを乗せると"title"部が表示される</p>

属性リファレンス
meta

URL

文章や画像にURLを組み込む場合にはaタグを使います。また、imgタグのように、

<a href="http://www.lovelive-anime.jp/">ラブライブオフィシャルウェブ</a>

と、『href属性』を用いてリンク先を指定します。
また、

<a>ここだけリンクとなる</a>

ため、

<p><a href="http://www.lovelive-anime.jp/">ラブライブ</a>はサンライズ制作のアニメです。</p>

『ラブライブはサンライズ制作のアニメです。』

このような使い方もできます。
画像にリンクを埋め込むときは

<a href="http://www.lovelive-anime.jp/otonokizaka/member/member09.html">
<img src="./image/yazawaniko.png" alt="矢澤にこ" title="矢澤にこのためなら死ねる">
</a>

これで『yazawaniko.png』からメンバー紹介/矢澤にこへ飛ぶことが出来ます。
ディレクトリ構造はさっきと同じで『index.html』から参照するものとします。

yazawaniko.png(画像はjpeg)(画像にはリンクを入れていません)(早口)(俊足)(コーナーで差をつけろ)
yazawa_zetubo.jpg
かわいいｗ

ページ内リンク

<p><a href="#link">#link</a>の部分へ飛びます</p>
・
・
・
<h1 id="link">#link</h1>

aタグについて書く上で参考にしました
参考

styleとscript

CSSをHTMLファイルに書き込むことが出来ますが、僕的には非推奨です。ファイルを分けるべきだと思います。(ファイルの分け方、CSSの書き方は後述)
一応埋め込み方。

<head>
    <style type="text/css">
        /* ここにCSSを書きます */
    </style>
</head>

また、JavaScriptを組み込むときは

<body>
    <script type="text/javascript">
        // ここにJavaScriptを書きます
    </script>
</body>

ファイルの分け方

ディレクトリ構造が

project_inm
    |
    +- index.html
    +- style.css
    +- index.js
    +- image
         |
         +- yaju_senpai.png
         +- syamu_game.png
         +- kbtit.png

の場合、CSSはヘッダー内に、JavaScriptはボディ内の一番最後に、以下のように追加します。

<head>
	<link rel="stylesheet" href="./style.css"><!--CSS-->
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>

これでHTMLファイルにstyle属性、script属性を書く必要がなくなり、HTMLファイルのコードがすっきりしました。
そして、style.cssにCSSを書いていきます。
参考
#CSS
タグ、または属性を指定して装飾していきます。雛形はありませんが、それぞれに名称があります。

セレクタ {プロパティ名:値;}

セレクタとはスタイルシートを適用する対象のことです。HTMLのタグや属性など、装飾したい部分を指定します。
ここではよく使うセレクタを解説します。

セレクタ 指定内容
* 全ての要素を指定します。つまり全てに適応されます。
html タグで指定します。この場合は<html></html>で囲まれた部分全てに適応されます。
p 上記同様、<p></p>で囲まれている部分全てに適応されます。他のタグも同様に指定できます。
.class .の後にクラス名を指定します。p.クラス名のように、特定タグにつけられたクラスのみの指定も可能です。
#id idを指定してCSSを適応します。また、classのようにp#idとすることもできますが、idはオンリーワンなので、#idだけでもいい気がします。(個人の見解)
div a タグの親子関係に基づいて指定します。この場合は<p></p>の中にある全ての<a></a>で囲まれた部分全てに適応されます。
input[type="text"] タグの属性に基づいて指定します。この場合は<input />の内、type属性がtextであるものを指定します。

詳しくは以下参照
セレクタの種類

プロパティとは適用するスタイルの種類のことです。
最低限のwebページを作成するために必要なプロパティを以下で解説していきます。

/* コメント */

また、拡張子は｢.css｣です。
参照リンク
以下プロパティのリファレンス
目的別
ABC順

色

colorプロパティを用います。
例えば、<p>あお</p>を青色に変えたい場合は、

p {
    color: blue;
}

となります。
blueの部分が”値”の部分です。
カラーコードでも指定可能です。

p {
    color: #0000ff;
}

上の二つの例はどちらも同じ結果となります。

カラーコード
参照

フォント

フォントのあれこれを指定します。
<p>フォント</p>の部分にあれこれ指定してみようと思います。

p {
    font-style: italic; 
    font-size: 12px;
    font-family: "ＭＳ ゴシック",sans-serif;
}

こんな感じで細かく指定していきます。また、一気に指定することもできます。
詳しくは以下参照。(以下のリンクは一括指定の方法。関連項目から細かいプロパティを見てください。)
フォント

サイズ

主に使うのはwidth(幅を指定)とheight(高さを指定)です。
これでサイズを決めます。何も指定していないとオートで決まります。このオートの裁量はカスなので自分で指定しましょう。
width
height

位置

マージンやポジション、パディングを用います。
この辺は解説が難しいので、リンクを見てください。
また、テキストに関してはtext-alignを使うと良いですよ。

背景

backgroundプロパティで指定します。フォント同様、一気に指定したり、細かく指定したりできます。
以下参照
background
ここで注意なのが、背景に画像を指定するときです。

background-image: url("画像URL")

このままでは画像がリピートしてしまいます。リピートさせたくない場合は、

background-image: url("画像URL")
background-repeat: no-repeat;

としましょう。
また、背景をグラデーションにすることもできます。
参照
カラーコード

ブロック

さて、ここでHTMLの解説へ戻ります。HTMLの複数タグをまとめてCSSで変更できたら便利じゃないでしょうか？
そこで登場するのが<div></div>です。これで複数部分を囲んで一つのブロックにすることが出来ます。
参考
また、<span></span> というのもあります。これはブロックではなくインラインブロックです。
参考

  • ブロック要素
    見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素。 一般的なブラウザでは前後に改行が入って表示される。
  • インラインブロック要素
    主に文章の一部として利用される要素であり、その前後は改行されない。

リスト

箇条書きのような形式でテキストを表示させる要素

要素名 意味
ul 箇条書きタイプのリスト
ol 番号付きタイプのリスト
li リスト内の一項目 
<ul>
    <li>番号なし１</li>
    <li>番号なし２</li>
    <li>番号なし３</li>
</ul>
  • 番号なし１
  • 番号なし２
  • 番号なし３
<ol>
    <li>番号あり１</li>
    <li>番号あり２</li>
    <li>番号あり３</li>
</ol>
  1. 番号あり１
  2. 番号あり２
  3. 番号あり３

組み合わせた場合

<ol>
    <li>番号あり１</li>
    <li>番号あり２
        <ul>
            <li>番号あり１</li>
            <li>番号あり２</li>
            <li>番号あり３</li>
        </ul>
    </li>
    <li>番号あり３</li>
</ol>
  1. 番号あり１
  2. 番号あり２
    • 番号あり１
    • 番号あり２
    • 番号あり３
  3. 番号あり３

また、`
    `では以下の属性を指定できます。
    • start="開始番号"
      番号を１以外から始めたいときに、その先頭の番号を指定
    • type="番号の種類"
      各項目に表示させる番号の種類を指定
    値 番号の種類 表示例
    1 整数 1. 2. 3.
    a アルファベット順(小文字) a. b. c.
    A アルファベット順(大文字) A. B. C.
    i ローマ数字(小文字) i. ii. iii.
    I ローマ数字(大文字) I. II. III.

    リストをCSSでデザインすることもできます。
    行頭記号の変更
    行頭記号を画像に
    行頭記号の表示位置

    ##　メニュー

    <select>
    <option>ラブライブ</option>
    <option>アイドル事変</option>
    <option>ゾンビランドサガ</option>
    <option>アイドルマスター</option>
</select>

    プルダウンメニューになります。
    また、プルダウンメニューのリンクメニューにしたい場合は、

    <select onChange="location.href=value;">
    <option value="http://www.lovelive-anime.jp/">ラブライブ</option>
    <option value="http://idoljihen.jp/">アイドル事変</option>
    <option value="https://zombielandsaga.com/">ゾンビランドサガ</option>
    <option value="https://idolmaster.jp/">アイドルマスター</option>
</select>

    こうします。
    詳しい解説・参考

    また、上記のリストを用いてメニューの作成もできます。

    ナビゲーション

    nav.html
    <nav>
    <ul>
        <li><a href="http://www.lovelive-anime.jp/">ラブライブ</a></li>
        <li><a href="http://idoljihen.jp/">アイドル事変</a></li>
        <li><a href="https://zombielandsaga.com/">ゾンビランドサガ</a></li>
        <li><a href="https://idolmaster.jp/">アイドルマスター</a></li>
    </ul>
</nav>
    nav.css
    nav li {
    display: block;
    width: 200px;
    float: left;
}
nav a {
    color: blue;
    background: silver;
    display: block;
    border-left: 1px solid white;
    text-align: center;
}

nav a:hover {
    color: red;
}

    良い感じのメニューになります。
    参考：よくわかるHTML5-CSS3の教科書【第2版】-大藤-幹

    テーブル

    参照

    発展

    CSSアニメーション... JavaScriptを書かずに動的なページがつくれるCSSの機能。
    bootstrap ... いい感じのCSSスタイルがまとまったもの。モダンなデザイニングのお供にどうぞ。
    JavaScript ... Webページに動きをつけたり、アプリケーションを作ったりできるスクリプト言語。
    jquery ... Webページの動きをいい感じにできるJavaScriptのライブラリ。リッチなインタラクション設計のお供にどうぞ。

    サンプルページを作ろう

    index.html
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html・css勉強会用</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>これはサンプルページです</h1>
            <p title="オタクキモ……"><small><s>オタクの布教用ページになりかけてるってマジ？</s></small></p>
            <nav>
                <ul>
                    <li><a href="#tyuni">画像にリンク</a></li>
                    <li><a href="#anime">プルダウンメニュー</a></li>
                    <li><a href="#games">テーブル</a></li>
                    <li><a href="#hayakuti">ブロック</a></li>
                </ul>
            </nav>
        </header>
        <br>

        <!-- 画像にリンクを入れる -->
        <h1 id="tyuni">画像にリンク</h1>
        <a href="https://sao-alicization.net/character/">
            <img src="./image/ikirito.jpg" alt="イキリト" title="アスナは俺が守る" width="500" height="270">
        </a>
        <a href="http://www.anime-chu-2.com/tv/character/yuta/">
            <img src="./image/togashi_yuta.jpg" alt="富樫雄太" title="ダークフレイムマスター" width="500" height="270">
        </a>
        <a href="http://g-tekketsu.com/2nd/story/48.php">
            <img src="./image/marushou.jpg" alt="スマホ太郎" title="スマホの力を過信したな" width="500" height="270">
        </a>

        <!-- プルダウンメニュー -->
        <h1 id="anime">プルダウンメニュー</h1>
        <p class="hoge">アイドルアニメ選択してください。<br>選択したアニメのホームページへ<em>"飛びます"</em>。</p>
        <select onChange="location.href=value;">
            <option value="#">-----</option>
            <option value="http://www.lovelive-anime.jp/">ラブライブ</option>
            <option value="http://idoljihen.jp/">アイドル事変</option>
            <option value="https://zombielandsaga.com/">ゾンビランドサガ</option>
            <option value="http://ongaku-shoujo.jp/">音楽少女</option>
            <option value="http://www.tbs.co.jp/anime/locodol/">普通の女子校生が【ろこどる】やってみた。</option>
            <option value="https://wug-portal.jp/">Wake Up,Girls!</option>
            <option value="https://idolmaster.jp/">アイドルマスター</option>
        </select>

        <!-- テーブル -->
        <h1 id="games">テーブル</h1>
        <table border="1">
            <tr><th colspan="3">オススメゲーム</th></tr>
            <tr><th>タイトル</th><th>ジャンル</th><th>備考</th></tr>
            <tr><th>オトメドメイン</th><td>ギャルゲ</td><td>18歳未満は購入できない</td></tr>
            <tr><th>ポケモン不思議のダンジョン</th><td>シナリオゲー</td><td>時闇が最高！</td></tr>
            <tr><th>けいおん!放課後ライブ!!</th><td>音ゲー</td><td>けいおん!!で五億回泣いたので</td></tr>
        </table>

        <!-- DIV -->
        <h1 id="hayakuti">ブロック</h1>
        <div class="osusume_anime">
            <h2>アニメ10作品</h2>
            <ol>
                <li>響け！ユーフォニアム</li>
                <li>リトルウィッチアカデミア</li>
                <li>四畳半神話大系</li>
                <li>宇宙よりも遠い場所</li>
                <li>少女歌劇　レビュースタァライト</li>
                <li>ヤマノススメ</li>
                <li>宇宙パトロールルル子</li>
                <li>クロスアンジュ　天使と竜の輪舞</li>
                <li>君の膵臓をたべたい</li>
                <li>たまこまーけっと</li>
            </ol>
        </div>
        <div class="seisaku">
            <h2>アニメ制作会社10社</h2>
            <ol>
                <li>京都アニメーション</li>
                <li>P.A.Works</li>
                <li>マッドハウス</li>
                <li>ボンズ</li>
                <li>ＴＲＩＧＧＥＲ</li>
                <li>ＭＡＰＰＡ</li>
                <li>サンライズ</li>
                <li>ライデンフィルム</li>
                <li>A-1 Pictures</li>
                <li>WHITE FOX</li>
            </ol>
        </div>
        <footer>
            <p><small>ホームページ：<a href="https://masayasviel.github.io/">masayasviel</a></small></p>
        </footer>
    </body>
</html>
    style.css
    html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0 auto;
    width: 900px;
    background: linear-gradient(#CEF6CE, #40FF00);
}

header h1 {
    color: red;
    text-align: center;
}

header p {
    text-align: center;
}

nav li {
    display: block;
    width: 200px;
    float: left;
}
nav a {
    color: blue;
    background: gold;
    display: block;
    border-left: 1px solid white;
    text-align: center;
}

nav a:hover {
    color: red;
}

p.hoge {
    font-size: medium;
    font-family: "ＭＳ 明朝";
}

.osusume_anime {
    float: left;
    width: 450px;
    text-align: center;
}

.seisaku {
    float: right;
    width: 450px;
    text-align: center;
}

footer {
    text-align: center;
}

    完成ページ
    ソースコード

    終わりに

    GitHub
    おわり。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?