ga-06-03

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

<演習1>
3.演習1のレイアウトとファイルの準備

目   次

1.演習1のレイアウト

2.必要なファイルの準備


1.演習1のレイアウト

演習1及び演習2のレイアウトは1カラムレイアウトを使用します。

画像

<HEADER>、<MAIN>、<FOOTER>はレイアウトに影響しませんが、主要ブロックの区切り記号として認識します。

  
2.必要なファイルの準備

CSSファイル(3個)とHTMLファイル(1個)と画像ファイル(5個)を準備します。CSSファイルとHTMLファイルは、エディター(Sublime Text等)を開き、コピー&ペーストで指定されたファイル名を付けて保存してください。画像ファイルは画像の上にカーソルをもってきて右クリックして「名前を付けて画像を保存」を選択し、表示された名前で保存してください。

画像

a1、a2、a3ファイルは、「共通CSS(common-css)」フォルダーに保存してください。

a1.枠組みCSS(frame-style-sheet.css)

CSSコード(frame-style-sheet.css)
@charset "utf-8";
/*--====================================
  共通CSS(枠組みCSS)
    frame-style-sheet.css
--====================================*/
    

a2.部品CSS(module-style-sheet.css)

CSSコード(module-style-sheet.css)
@charset "utf-8";
/*--====================================
  共通CSS(部品CSS)
   module-style-sheet.css
--====================================*/
    

a3.装飾CSS(decoration-style-sheet.css)

CSSコード(decoration-style-sheet.css)
/*--====================================
       共通CSS(装飾CSS)
   decoration-style-sheet.css
--====================================*/
/*--====================================
        カラーの指定 
--====================================*/
.d-bg-red1 {background-color: #FFE4E1;}
.d-bg-red2 {background-color: #ffcccc;}
.d-bg-red3 {background-color: #ffb6c1;}
.d-bg-red4 {background-color: #ff99cc;}
.d-bg-red5 {background-color: #ff6699;}
.d-bg-red6 {background-color: #ff0000;}

.d-bg-green1 {background-color: #ccffcc;}
.d-bg-green2 {background-color: #90ee90;}
.d-bg-green3 {background-color: #32cd32;}
.d-bg-green4 {background-color: #3cb371;}
.d-bg-green5 {background-color: #008000;}
.d-bg-green6 {background-color: #006400;}

.d-bg-blue1 {background-color: #e0ffff;}
.d-bg-blue2 {background-color: #aeeeee;}
.d-bg-blue3 {background-color: #87ceeb;}
.d-bg-blue4 {background-color: #1e90ff;}
.d-bg-blue5 {background-color: #0066ff;}
.d-bg-blue6 {background-color: #191970;}

.d-bg-yellow1 {background-color: #ffffe0;}
.d-bg-yellow2 {background-color: #fffacd;}
.d-bg-yellow3 {background-color: #ffffbb;}
.d-bg-yellow4 {background-color: #ffff99;}
.d-bg-yellow5 {background-color: #ffff66;}
.d-bg-yellow6 {background-color: #ffff00;}

.d-bg-mono1 {background-color: #ffffff;}
.d-bg-mono2 {background-color: #e8e8e8;}
.d-bg-mono3 {background-color: #d0d0d0;}
.d-bg-mono4 {background-color: #a0a0a0;}
.d-bg-mono5 {background-color: #757575;}
.d-bg-mono6 {background-color: #000000;}

.d-bg-brown1 {background-color: #ffe4c4;}
.d-bg-brown2 {background-color: #ffd700;}
.d-bg-brown3 {background-color: #ff9900;}
.d-bg-brown4 {background-color: #d2691e;}
.d-bg-brown5 {background-color: #b22222;}
.d-bg-brown6 {background-color: #800000;}

.d-bg-mistyrose {background-color: mistyrose;}
.d-bg-pink {background-color: pink;}
.d-bg-red {background-color: red;}
.d-bg-lightyellow {background-color: lightyellow;}
.d-bg-yellow {background-color: yellow;}
.d-bg-gold {background-color: gold;}
.d-bg-orange {background-color: orange;}
.d-bg-tomato {background-color: tomato;}
.d-bg-lightgreen {background-color: lightgreen;}
.d-bg-green {background-color: green;}
.d-bg-darkgreen {background-color: darkgreen;}
.d-bg-lightcyan {background-color: lightcyan;}
.d-bg-lightblue {background-color: lightblue;}
.d-bg-deepskyblue {background-color: deepskyblue;}
.d-bg-blue {background-color: blue;}
.d-bg-darkblue {background-color: darkblue;}
.d-bg-white {background-color: white;}
.d-bg-whitesmoke {background-color: whitesmoke;}
.d-bg-lightgray {background-color: lightgray;}
.d-bg-gray {background-color: gray;}
.d-bg-black {background-color: black;}
.d-bg-paleturquoise {background-color: paleturquoise;}
.d-bg-aliceblue {background-color: aliceblue;}
.d-bg-ivory {background-color: ivory;}
.d-bg-blue1 {background-color: paleturquoise;}
.d-bg-blue2 {background-color: aliceblue;}
.d-bg-yellow1 {background-color: gold;}
.d-bg-yellow2 {background-color: ivory;}
/*--====================================
     文字色の設定 
--====================================*/
.d-mj-black { color: black; }
.d-mj-white { color: white; }
.d-mj-red { color: red; }
.d-mj-darkblue { color: darkblue; }
/*--====================================
     そのた便利な設定 
--====================================*/
.d-inline-block { display: inline-block;}
.d-bold { font-weight: bold; }
.d-center { text-align: center;}
.d-left { text-align: left;}
.d-display-none{display: none}
/*--====================================
  画像サイスの指定(20x~1000px)
--====================================*/
.d-img20 img {max-width: 20px;width: 90%;}
.d-img50 img {max-width: 50px;width: 90%;}
.d-img100 img {max-width: 100px;width: 90%;}
.d-img200 img {max-width: 200px;width: 90%;}
.d-img250 img {max-width: 250px;width: 90%;}
.d-img300 img {max-width: 300px;width: 90%;}
.d-img350 img {max-width: 350px;width: 90%;}
.d-img400 img {max-width: 400px;width: 90%;}
.d-img410 img {max-width: 410px;width: 90%;}
.d-img430 img {max-width: 430px;width: 90%;}
.d-img450 img {max-width: 450px;width: 90%;}
.d-img500 img {max-width: 500px;width: 90%;}
.d-img530 img {max-width: 530px;width: 90%;}
.d-img540 img {max-width: 540px;width: 90%;}
.d-img550 img {max-width: 550px;width: 90%;}
.d-img600 img {max-width: 600px;width: 90%;}
.d-img650 img {max-width: 650px;width: 90%;}
.d-img700 img {max-width: 700px;width: 90%;}
.d-img750 img {max-width: 750px;width: 90%;}
.d-img800 img {max-width: 800px;width: 90%;}
.d-img900 img {max-width: 900px;width: 90%;}
.d-img1000 img {max-width: 1000px;width: 90%;}
/*--====================================
         文字(テキスト)の装飾
          蛍光ペン
--====================================*/
.d-keikoupen{background:
  linear-gradient(transparent 70%,#ff99ab 70%);}
.d-keikoupen-red{background:
  linear-gradient(transparent 70%,#ff99ab 70%);}
.d-keikoupen-blue{background:
  linear-gradient(transparent 70%, #6cf 70%);}
.d-keikoupen-green{background:
  linear-gradient(transparent 70%, #6f6 70%);}
.d-keikoupen-yellow{background:
  linear-gradient(transparent 60%, yellow 60%);}
/*--====================================
         文字(テキスト)の装飾
        背景色を指定する
--====================================*/
.d-haikeishoku-yellow{background-color: yellow}
.d-haikeishoku-pink{background-color: pink}
.d-haikeishoku-cyan{background-color: cyan}
/*--====================================
   改行 1em ~ 20em
--====================================*/
.d-kaigyo-1{height: 1em;}
.d-kaigyo-2{height: 2em;}
.d-kaigyo-3{height: 3em;}
.d-kaigyo-4{height: 4em;}
.d-kaigyo-5{height: 5em;}
.d-kaigyo-6{height: 6em;}
.d-kaigyo-7{height: 7em;}
.d-kaigyo-8{height: 8em;}
.d-kaigyo-9{height: 9em;}
.d-kaigyo-10{height: 10em;}
.d-kaigyo-11{height: 11em;}
.d-kaigyo-12{height: 12em;}
.d-kaigyo-13{height: 13em;}
.d-kaigyo-14{height: 14em;}
.d-kaigyo-15{height: 15em;}
.d-kaigyo-16{height: 16em;}
.d-kaigyo-17{height: 17em;}
.d-kaigyo-18{height: 18em;}
.d-kaigyo-19{height: 19em;}
.d-kaigyo-20{height: 20em;}
/*--====================================
   箇条書き 逆インデント
--====================================*/
.d-kajyougaki-a{text-indent: -2em;
                padding-left: 4em;
    

bファイルは、「演習ー1HTML(ensyuu-1-html)」フォルダーに保存してください。

b.骨組みHTML(skeleton.html)

HTMLコード(skeleton.html)
<!DOCTYPE html>
<!--====================================
        骨組みHTML
     skeleton.html
=====================================-->
<html>
<head>
    <meta charset="utf-8">
    <title>演習-1(シングルページのホームページ)</title> 
</head>
<body>

    
</body>
</html>
            

c1、c2、c3、c4、c5ファイルは、「その他(etc)」フォルダーに保存してください。

c1.画像1(fujisan_shikaku.png)

画像

c2.画像2(bg_natural_sougen.jpg)

画像

c3.画像3(bg_sanmyaku_alps.jpg)

画像

c4.画像4(dandanbatake.png)

画像

c5.画像5(bg_natural_nanohana_batake.jpg)

画像

 back
pagetop
 next

ホームページ構築
の手法

演習1のレイアウト
とファイルの準備

ホームページ構築
のステップ

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken