読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

レスポンシブWebデザイン

レスポンシブWebデザイン

  • 画面サイズに応じたレイアウト
  • 画面サイズに応じてブロック配置を変更するように指定をしておくと、あらゆる画面サイズに対応できるWebサイトを作成できます。


《PC表示》


スマートフォン表示》

<!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>グリッドシステム</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">        <!-- 全体を囲むコンテナ -->
<h1>世界の城</h1>
<div class="row">
<div class="col-xs-6" style="padding:0;">
<img src="photo/castle-01.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="padding:0;">
<img src="photo/castle-02.jpg" class="img-responsive">
<img src="photo/castle-04.jpg" class="img-responsive">
</div>
<div class="col-xs-3" style="padding:0;">
<img src="photo/castle-03.jpg" class="img-responsive">
<img src="photo/castle-05.jpg" class="img-responsive">
</div>
</div>
</div>        <!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


《PC表示》


スマートフォン表示》

<!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>グリッドシステム</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>世界の城</h1>
<div class="row">
<div class="col-sm-6" style="padding:0;">
<img src="photo/castle-01.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-3" style="border-right:dashed 1px #666">
<div class="visible-xs" style="height:15px;"></div>
<h3 style="margin-top:0">西洋の城</h3>
<p>軍事的な要塞もしくは貴族の住家として、中世に建てられた城が今でも数多く現存しています。その中にはホテルとして利用されている城もあり、場内を見学するだけでなく、宿泊や食事を楽しめる場合もあります。</p>
</div>
<div class="col-xs-6 col-sm-3">
<div class="visible-xs" style="height:15px;"></div>
<h3 style="margin-top:0">日本の城</h3>
<p>大名や藩主の住居であり、政治的、軍事的な拠点としての役割を果たしてきた日本の城は、その多くが戦争、火災、天災により失われています。天守閣が当時のまま現存している城は数えるほどしかありません。</p>
</div>
</div>
</div>        <!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>