HTML/CSS入門編3:画像とリンクを載せよう

<!-- 画像とリンク-->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script>https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <h1>吾輩は猫である。</h1>
            <p class="lead">名前はまだない。</p>
            <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
            </p>
            <a class="btn btn-primary" href="#">OK</a>
        </div>
    </div>
    <!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!-- 画像とリンク-->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script>https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <h1>吾輩は猫である。</h1>
            <p class="lead">名前はまだない。</p>
            <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
            </p>
            <a class="btn btn-primary" href="#">OK</a>
        </div>
    </div>
    <!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

演習1
演習2

問題ログインすると模範解答や入力を見ることができます

演習課題「画像を表示する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
この見出し下にイメージタグを追加して、以下のアドレスの画像を表示してください。この時、src属性以外は指定しないでください。

画像のアドレス： (https://paiza-webapp.s3.amazonaws.com/files/learning/img/kirishima.jpg)
※サーバーにアップしたアドレスに置き換えてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

問題ログインすると模範解答や入力を見ることができます

演習課題「リンクを表示する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
この見出しにアンカータグを追加して、以下のアドレスにリンクしてください。この時、リンク先を別のウィンドウで開くようにします。

https://paiza.jp/

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

Tips

動画へ戻る

次のチャプターへ

＃01:画像とリンクを載せよう

ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。

作成したコード

<!-- 画像とリンク-->
<!DOCTYPE html>
<html lang="ja">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<title>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank"><img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg"></a>
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
    			<a class="btn btn-primary" href="http://paiza.jp/" target="_blank">OK</a>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank">夏目漱石</a>
    		</div>
    	</div>
    	<!-- /.container -->

    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
</html>

主なタグの役割

・imgタグ
<img>タグのsrc属性で指定した画像を表示します。単独で使うタグです。

・アンカータグ
　<a>タグのhref属性で指定したアドレスにリンクを張ります。<a>と</a>の間のテキストや画像が、リンクとして表示されます。

target属性は、リンク先を同じウィンドウで開くか、別ウィンドウで開くかを指定できます。「_blank」とすると別ウィンドウで開くことになります。省略すると、同じウィンドウで表示します。_

リンクアドレス

・ネコ画像のアドレス
https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg
https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_500.jpg
https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_240.jpg
https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_75.jpg

・夏目漱石 - Wikipedia
https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3

・paiza
http://paiza.jp/

参考になるWebサイト

[Bootstrap] IMG関連のスタイルおよびカスタマイズのまとめ | きほんのき
http://kihon-no-ki.com/bootstrap-img-usage

Bootstrap を使って画像をレスポンシブに表示する - CrossBridge Lab
http://crossbridge-lab.hatenablog.com/entry/2015/11/26/232526

写真について

Photo by bartlettbee　CC BY 2.0
8726415925_0e733f1c84_k.jpg
Cat | Flickr - Photo Sharing!
https://www.flickr.com/photos/88534689@N08/8726415925/in/photostream/

※これをそのまま記載ください。画像を使用するための条件になっています。

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編3: HTML要素を学ぼう > 画像とリンクを載せよう

ログインすると採点できます

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：