html/css「見出しと本文を入れてホームページを完成させよう！」

ホームページ制作第6回目、一応今回で最終となります。

前回は共通フレームの作成まで実施しました。↓

https://denkenmusic.com/htmlのコピーで「各ページの共通フレームを作成」

ホームページ作成の第5回目です。前回はナビゲーションを追加しました。↓今回は、index.html(home)以外の項目を作成します。ナビゲーションで作成した各項目のhtmlになります。前回までの記述内容は、全て共通のフレームになりますので、それを複製して少し手を加える作業になります。共通フレームの複製index.htmlのコピー前回のナビゲーション記述時に、５つの項目を作成しました。各項目には内部リンクを指定しているので、そのリンク名のhtmlがなければもちろん選択した項目に移動する事が出来ません。index.htmlを除くと４つの項...

今回は、各ページのmain要素に見出しや本文を入れて、WEBサイトを完成させたいと思います。

1 各ページのhtml
- 1.1 index.html（home）
- 1.2 style.cssの追加
2 WEBサーバーにアップロード
- 2.1 無料レンタルサーバー「xdomain」
3 html/css「見出しと本文を入れてホームページを完成させよう！」まとめ

各ページのhtml

５つ項目があるので、5ページの記述が必要ですが、今回はだいたい全てのページが同じような記述になりますので、代表して「index.html」のページだけ抜粋して説明します。

index.html（home）

 <div class="main">
        <ul class="breadcrumb">
          <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="index.html" itemprop="url">
              <span itemprop="title">home</span>
            </a>
          </li>
        </ul>
        <div class="one">
        <h1>めめめめめめめめめめめめめ</h1>
        <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            <br><br>
        <h2>のののののののののの</h2><br>
            <h3>えええええええ</h3><br>
            <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            <br><br>
                    <h3>ままままままままま</h3><br>
            <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            </div>
            </div>
    <div class="side">
        <div class="sticky"><div class="aside">

</a>

</li>

</ul>

<h1>めめめめめめめめめめめめめ</h1>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

<h2>のののののののののの</h2><br>

<h3>えええええええ</h3><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

<h3>ままままままままま</h3><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

</div>

main要素に9～31行目を追加します。

div class=oneの中に、見出し、画像、段落、文章がはいります。

また、最下部のaside classの前に、「sticky class」を追加します。

これは、のちのcssを記述することで、下スクロールした時にside画面が指定した場所で固定され、ついてくる感じになります。

style.cssの追加

.one {
    padding: 10px 10px 100px 10px;
}
.one img {
    display: block;
    margin: 0 auto;
}
.sticky {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:0; /* 縦スクロールに追従 */
    z-index: 100; /* z-indexで最前面に持ってくる */
}

.one {

padding: 10px 10px 100px 10px;

}

.one img {

display: block;

margin: 0 auto;

}

.sticky {

position: -webkit-sticky; /* Safari用 */

position:sticky; /* 要素をスクロールに応じて固定 */

top:0; /* 縦スクロールに追従 */

z-index: 100; /* z-indexで最前面に持ってくる */

}

全て共通CSSに追加します。

one class要素でパディングを設定し、上下左右に隙間を設定します。見栄えがかなり良くなりますね。

また、one img classで画像を中央寄せします。

imgはテキスト要素になるので、display: block;を使うとブロック要素になり、marginなどで位置調整しやすいです。

sticky classの記述は、前途したsideメニューの固定に必要です。

完成したWEBサイトはコチラになります（クリックで再生）↓

WEBサーバーにアップロード

無料レンタルサーバー「xdomain」

出来上がったWEBサイトのデータは、WEBサーバーに格納する事で誰でもアクセスできるようになります。

とりあえずテスト的にやってみたい方は、無料のレンタルサーバーに登録するとよいです。

「xdomain」などの無料レンタルサーバーがあるので、そちらで無料登録すればドメイン（専用URL）が貰えます。

登録したレンタルサーバーのFTPサーバーに作成したファイルをアップロードすれば、晴れて自分が作成したホームページの公開となります。

html/css「見出しと本文を入れてホームページを完成させよう！」まとめ

html/cssのみでのWEBサイト作成について、6回にわたりまとめましたが、意外と簡単に出来るもんだとお分かりいただけたかと思います。

細かいタグの説明などはかなり端折りましたが、なんとなくは理解できたんではないでしょうか。

とにかく、html/cssについては、手を動かしていれば自ずと知識や仕組みが身についてくると思います。

よくプログラミングは、「手を動かせ」といいますが、この６回分のwebサイト作りを体験して頂ければ、その意味を実感できるはずです。是非チャレンジしてみて下さい。

html/cssのwebサイト作りは一旦終了しますが、細かいタグの内容とかは別途記事にしてまとめたいと思います。

あと、phpやjavaスクリプトなど、本格的なWEBサイト作成についても後日まとめたいと思います。

最後に、ここまでのindex.htmlとcssをのせておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Webサイトのタイトル</title>
    <meta name="description" content="ページの紹介文">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
 
  
  <body>
 
    <div class="wrapper">
 
  <header>
          <div class="header-logo-menu">
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
          <ul>
                <li><a href="index.html">home</a></li>
                <li><a href="b.html">あああああ</a></li>
                <li><a href="c.html">いいいいい</a></li>
                <li><a href="d.html">ううううう</a></li>
                <li><a href="e.html">えええええ</a></li>
            </ul>
      </div>
  </div>
  <div class="top">header</div>
  </div>
      <div class="nav">
            <ul>
                <li><a href="index.html">home</a></li>
                <li><a href="b.html">あああああ</a></li>
                <li><a href="c.html">いいいいい</a></li>
                <li><a href="d.html">ううううう</a></li>
                <li><a href="e.html">えええええ</a></li>
            </ul>      
      </div>
        
 </header>
 
  <div class="container">
    <div class="main">
        <ul class="breadcrumb">
          <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="index.html" itemprop="url">
              <span itemprop="title">home</span>
            </a>
          </li>
        </ul>
        <div class="one">
        <h1>めめめめめめめめめめめめめ</h1>
        <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            <br><br>
        <h2>のののののののののの</h2><br>
            <h3>えええええええ</h3><br>
            <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            <br><br>
                    <h3>ままままままままま</h3><br>
            <img src="img/animal_chara_computer_penguin.png">
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>
            <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            <br>
            <p>ああああああああああああああああああああああああああああああ</p>
            
        
            </div></div>
    <div class="side">
        <div class="sticky"><div class="aside"><h1>外部リンク</h1>
      <a href="http://robio.html.xdomain.jp"target="_blank"><img src="img/animal_chara_computer_penguin.png"></a>
      <p>あああああああああああああああああああああああああああああああああああああああああ</p></div>
      <div class="bside"><h1>プロフィール</h1>
      <img src="img/animal_chara_computer_penguin.png">
          <p>あああああああああああああああああああああああああああああああああああああああああ</p></div>
        </div></div>
  </div>
 
  <footer>footer</footer>
 
</div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Webサイトのタイトル</title>

</head>

<body>

<ul>

<li><a href="b.html">あああああ</a></li>

<li><a href="c.html">いいいいい</a></li>

<li><a href="d.html">ううううう</a></li>

<li><a href="e.html">えええええ</a></li>

</ul>

</div>

<div class="top">header</div>

</div>

<ul>

<li><a href="b.html">あああああ</a></li>

<li><a href="c.html">いいいいい</a></li>

<li><a href="d.html">ううううう</a></li>

<li><a href="e.html">えええええ</a></li>

</ul>

</div>

</header>

</a>

</li>

</ul>

<h1>めめめめめめめめめめめめめ</h1>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

<h2>のののののののののの</h2><br>

<h3>えええええええ</h3><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

<h3>ままままままままま</h3><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><br>

<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

<br>

<p>ああああああああああああああああああああああああああああああ</p>

</div></div>

<div class="sticky"><div class="aside"><h1>外部リンク</h1>

<p>あああああああああああああああああああああああああああああああああああああああああ</p></div>

<div class="bside"><h1>プロフィール</h1>

<p>あああああああああああああああああああああああああああああああああああああああああ</p></div>

</div></div>

</div>

<footer>footer</footer>

</div>

</body>

</html>

h1 {
  padding: 13px 30px 10px 20px;
  font-size: 26px;
  color: #716961;
  border-bottom: solid 3px #716961;
}
h2 {
    font-size: 22px;
  border: 1px solid #b7a077;
  padding: 11px 22px;
  border-radius: 5px;
    background: #808080;    
}
h3 {
  font-size: 18px;
  border-left: solid 3px black;
  padding: 4px 9px 4px 14px;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
p {
  margin-top: 0;
  line-height: 1.6;
}
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
    width: 100%;
}
header {
  background: black;
    text-align: center;
    color: white;
}
.container {
  display: flex;
}
.main {
  background: white;
  width: 70%;
}
.side {
  background: #EEEEEE;
  width: 30%;
  text-align: center;
}
.side p {
    text-align: left;
}
footer {
  background: black;
    font-size:18px;
    text-align: center;
    padding: 10px 0 ;
    color: white;
}
.top {
    font-size: 26px;
    padding: 10px 0;
}
.aside {
    padding: 50px 10px;
}
.aside a:hover { 
    opacity: 0.7; 
}

.bside {
    padding: 0 10px 50px 10px;
}
.nav ul {
    font-size:0;
}
.nav ul li {
    display: inline-block;
    width: 20%;
    font-size:16px;
    border:solid 1px;
    box-sizing: border-box;
    }
.nav ul li a {
    color: white;
    text-decoration: none; 
    display: block;
    padding: 5px 0;
}
.nav ul li a:hover {
  color: orange;
    background: #EEEEEE;
  font-weight: bold;
}
.breadcrumb {
  padding:5px 5px;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 3px;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #52b5ee;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}
#nav-drawer {
    display: none;
}
.one {
    padding: 10px 10px 100px 10px;
}
.one img {
    display: block;
    margin: 0 auto;
}
.sticky {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:0; /* 縦スクロールに追従 */
    z-index: 100; /* z-indexで最前面に持ってくる */
}
.enji1 {
    float: left;
    margin-left: 30px;
}
.enji2 {
    float: right;
    margin-right: 30px;
}
.enji3 li {
width: 30%;
    display: inline-block;
    text-align: center;
}

@media (max-width: 600px){
  .container {
    flex-direction: column;
  }
  .main,
  .side {
    width: 100%;
  }
    .nav {
        display: none;
    }
    #nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
padding: 10px 0 0 10px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: white;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 220px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: black;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
    padding: 50px 0;
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.top{
    text-align:center;
    margin: auto;
    }
    #nav-drawer {
    display: inline-block;
    }

    #nav-content ul li {
                text-align: left;
                    }
    #nav-content ul li a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 5px 0 5px 50px;
    }
    #nav-content li a:hover {
        color: orange;
        background: #a8a8a8;
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

h1 {

padding: 13px 30px 10px 20px;

font-size: 26px;

color: #716961;

border-bottom: solid 3px #716961;

}

h2 {

font-size: 22px;

border: 1px solid #b7a077;

padding: 11px 22px;

border-radius: 5px;

background: #808080;

}

h3 {

font-size: 18px;

border-left: solid 3px black;

padding: 4px 9px 4px 14px;

}

h1, h2, h3, h4, h5, h6 { margin-top: 0; }

p {

margin-top: 0;

line-height: 1.6;

}

.wrapper {

max-width: 1000px;

margin: 0 auto;

width: 100%;

}

header {

background: black;

text-align: center;

color: white;

}

.container {

display: flex;

}

.main {

background: white;

width: 70%;

}

.side {

background: #EEEEEE;

width: 30%;

text-align: center;

}

.side p {

text-align: left;

}

footer {

background: black;

font-size:18px;

text-align: center;

padding: 10px 0 ;

color: white;

}

.top {

font-size: 26px;

padding: 10px 0;

}

.aside {

padding: 50px 10px;

}

.aside a:hover {

opacity: 0.7;

}

.bside {

padding: 0 10px 50px 10px;

}

.nav ul {

font-size:0;

}

.nav ul li {

display: inline-block;

width: 20%;

font-size:16px;

border:solid 1px;

box-sizing: border-box;

}

.nav ul li a {

color: white;

text-decoration: none;

display: block;

padding: 5px 0;

}

.nav ul li a:hover {

color: orange;

background: #EEEEEE;

font-weight: bold;

}

.breadcrumb {

padding:5px 5px;

}

.breadcrumb li{

display:inline;/*横に並ぶように*/

list-style: none;

font-weight: bold;/*太字*/

}

.breadcrumb li:after {/* >を表示*/

content: '>';

padding: 0 3px;

color: #555;

}

.breadcrumb li:last-child:after {

content: '';

}

.breadcrumb li a {

text-decoration: none;

color: #52b5ee;/*色*/

}

.breadcrumb li a:hover {

text-decoration: underline;

}

#nav-drawer {

display: none;

}

.one {

padding: 10px 10px 100px 10px;

}

.one img {

display: block;

margin: 0 auto;

}

.sticky {

position: -webkit-sticky; /* Safari用 */

position:sticky; /* 要素をスクロールに応じて固定 */

top:0; /* 縦スクロールに追従 */

z-index: 100; /* z-indexで最前面に持ってくる */

}

.enji1 {

float: left;

margin-left: 30px;

}

.enji2 {

float: right;

margin-right: 30px;

}

.enji3 li {

width: 30%;

display: inline-block;

text-align: center;

}

@media (max-width: 600px){

.container {

flex-direction: column;

}

.main,

.side {

width: 100%;

}

.nav {

display: none;

}

#nav-drawer {

position: relative;

}

/*チェックボックス等は非表示に*/

.nav-unshown {

display:none;

}

/*アイコンのスペース*/

#nav-open {

display: inline-block;

padding: 10px 0 0 10px;

vertical-align: middle;

}

/*ハンバーガーの形をCSSで表現*/

#nav-open span, #nav-open span:before, #nav-open span:after {

position: absolute;

height: 3px;/*線の太さ*/

width: 25px;/*長さ*/

border-radius: 3px;

background: white;

display: block;

content: '';

cursor: pointer;

}

#nav-open span:before {

bottom: -8px;

}

#nav-open span:after {

bottom: -16px;

}

/*閉じる用の薄黒箇所*/

#nav-close {

display: none;

position: fixed;

z-index: 99;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: black;

opacity: 0;

transition: .3s ease-in-out;

}

/*メニューの中身*/

#nav-content {

overflow: auto;

position: fixed;

top: 0;

left: 0;

z-index: 9999;

width: 90%;

max-width: 220px;/*最大幅（お好みで調整を）*/

height: 100%;

background: black;

transition: .3s ease-in-out;

-webkit-transform: translateX(-105%);

transform: translateX(-105%);

padding: 50px 0;

}

/*チェックがついたら表示させる*/

#nav-input:checked ~ #nav-close {

display: block;

opacity: .5;

}

#nav-input:checked ~ #nav-content {

-webkit-transform: translateX(0%);

transform: translateX(0%);

box-shadow: 6px 0 25px rgba(0,0,0,.15);

}

.header-logo-menu{

display: flex;

display: -moz-flex;

display: -o-flex;

display: -webkit-flex;

display: -ms-flex;

flex-direction: row;

-moz-flex-direction: row;

-o-flex-direction: row;

-webkit-flex-direction: row;

-ms-flex-direction: row;

}

/*ロゴやサイトタイトルをセンタリング*/

.top{

text-align:center;

margin: auto;

}

#nav-drawer {

display: inline-block;

}

#nav-content ul li {

text-align: left;

}

#nav-content ul li a {

color: white;

text-decoration: none;

display: block;

padding: 5px 0 5px 50px;

}

#nav-content li a:hover {

color: orange;

background: #a8a8a8;

}

各ページのhtml

index.html（home）

style.cssの追加

WEBサーバーにアップロード

無料レンタルサーバー「xdomain」

html/css「見出しと本文を入れてホームページを完成させよう！」まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル