webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

2カラムの演習課題|コーポレートサイト

f:id:yachin29:20181005181137j:plain



作例
http://yachin29.com/school/Stylesheet_Company/




使用テキスト

サンプルスタイルシートカンパニー

トップページ
ソリューション
実績紹介
パートナー
カスタマー
会社概要
お問い合わせ


あなたにとっての最高のパートナーであるために

サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。

ソリューションへ


ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。
100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。

実績紹介へ


2018年10月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2018年10月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2018年10月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2018年10月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2018年10月1日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。



Sample Stylesheet Company All Rights Reserved.

トップページ
ソリューション
実績紹介
パートナー
カスタマー
会社概要
お問い合わせ

使用画像


メイン画像は自身で用意する事


f:id:yachin29:20181005181739p:plain



f:id:yachin29:20181005181638p:plain



f:id:yachin29:20181005181746p:plain



f:id:yachin29:20181005181831p:plain



f:id:yachin29:20181005181844p:plain





index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルスタイルシートカンパニー</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1><img src="img/logo.png" alt="サンプルスタイルシートカンパニー"></h1>
</div>
<nav class="g-nav">
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="inner">
<p class="main-img"><img src="img/top.jpg" alt="あなたにとっての最高のパートナーであるために"></p>
</div>
<div class="wrapper">
<div class="main">
<h2><img src="img/about1.png" alt=""></h2>
<h3><img src="img/midashi1.png" alt=""></h3>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="moji"><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>ソリューションへ</a></p>

<h3><img src="img/midashi2.png" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h3>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="moji"><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>実績紹介へ</a></p>
</div>
<div class="sidebar">
<h2><img src="img/news1.png" alt=""></h2>
<dl>
<dt>2018年10月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2018年10月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2018年10月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2018年10月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt>2018年10月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div>
</div>

<footer>
<p><small>&copy; Sample Stylesheet Company All Rights Reserved.</small></p>
<nav class="footer-nav">
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/*reset*/
html, body, h1, h2, h3, p, ul,li,span,dl,dt,dd,small{
  margin: 0;
  padding: 0;
	line-height: 1.0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
  color:#222;;
}
/*reset end*/
body{
  background: #e5edf6;
  font-size: 16px;
  position: relative;
}
.inner {
width: 980px;
margin: 0 auto;
background: #FFF;
}

/*header*/
header{
  width:100%;
  margin: 0 auto;
  background:#87b8ec;
}
h1{
padding: 10px 0 10px 10px;
}
.g-nav {
width: 100%;
background: #c1dcf8;
}
.g-nav ul{
  width: 980px;
	margin: 0 auto;
  overflow: hidden;
}
.g-nav li{
  width: 140px;
  height: 50px;
  float: left;
  text-align: center;
  background: #fff;
}
.g-nav li a{
  display: block;
  line-height: 48px;
  border-top: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  color: #444;
}
.g-nav li:last-child a{
  border-right: none;
}
.g-nav li a:hover {
background: #E8F7F7;
}
.main-img {
padding: 20px;
}

.wrapper{
  width: 940px;
	padding: 20px;
  margin: 0 auto 40px;
  overflow: hidden;
	background: #FFF;
}
.wrapper h2{
  margin-bottom: 20px;
}

/*main*/
.main{
  float: left;
  width: 630px;
	padding-right: 30px;
	box-sizing: border-box;
}

h3{
  margin-bottom: 20px;
}
.main p{
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.main .moji{
  padding-bottom: 10px;
  border-bottom: 1px solid #c0c0c0;
}
.main .moji a {
text-decoration: underline;
}
.main .moji a:hover {
color: #4D62E9;
}
.main i {
margin-right: 8px;
font-size: 16px;
}


.sidebar {
  float:right;
    width: 295px;
}
.sidebar h2{
  margin-bottom: 20px;
}
dt{
  padding-left: 15px;
  color: #e12006;
  font-weight: bold;
	margin-bottom: 6px;
}
dd{
  padding-left: 25px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/*footer*/
footer{
  width: 100%;
  margin: 0 auto;
  background: #333333;
  padding-bottom: 20px;
}
footer p{
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  padding-top: 20px;
}


footer ul{
  overflow: hidden;
  width: 840px;
  margin: 0 auto;
}
footer li{
  width: 120px;
  float: left;
}

footer li a{
  display: block;
  text-align: center;
  height: 1.5em;
  border-right: 1px solid #fff;
  color: #fff;
  font-size: 13px;
}
footer li:last-child a{
  border-right: none;
}
footer li a:hover {
text-decoration: underline;
}