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>

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要素を学ぼう > 画像とリンクを載せよう

1
2
<!DOCTYPE html>
<html lang="ja">
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

コードの実行

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

出力タイプ：

HTML/CSS入門編3: HTML要素を学ぼう

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

期待する出力値

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

期待する出力値

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

作成したコード

主なタグの役割

リンクアドレス

参考になるWebサイト

写真について

注意