puresccでシンプルな会社概要ページを作成してみました。
ヘッダー、フッターには紫色の背景色を指定しています。
ご自由にお使いください。
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <!-- メタ情報 START --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width"> <meta name="robots" content="index,follow,noarchive" /> <meta http-equiv="content-language" content="ja" /> <!-- メタ情報 END --> <title>サンプル3</title> <!-- CSS インポート START --> <link rel="stylesheet" href="./build/pure-min.css"> <link rel="stylesheet" href="./build/baby-blue.css"> <link rel="stylesheet" href="./build/main.css"> <!-- CSS インポート END --> </head> <body> <!-- グローバル START --> <div class="content"> <!-- 会社情報 およびメニュー background-colorのところで背景色を変更--> <h2 id="horizontal-menu" class="content-subhead">サンプル会社<a href="#horizontal-menu" class="content-link"></a></h2> <div class="pure-menu pure-menu-open pure-menu-horizontal" style="background-color: #CC99CC;"> <ul> <li><a href="#">Home</a></li> <li class="pure-menu-selected"><a href="#">会社概要</a></li> <li><a href="#">技術紹介</a></li> <li style="background-color: #CC99CC;"><a href="#">お問い合わせ</a></li> </ul> </div> <br> <!-- ヘッダー --> <header> <h2>会社概要</h2> </header> <!-- メイン --> <FONT size="2"> <p>商号</p> <hr> <p>XXXXX株式会社</p><br> <p>設立</p> <hr> <p>1XXX年(昭和XX年)X月X日</p><br> <p>本社所在地</p> <hr> <p>XXXXXXXXXXXX</p><br> <p>従業員数</p> <hr> <p>XXXXX人</p><br> <p>YYYYYYY</p> <hr> <p>ZZZZZZZ</p><br> </FONT> <!-- フッター background-colorのところで背景色を変更--> <div class="footer"> <div class="pure-g-r" style="background-color: #CC99CC;"> <div class="pure-u-1-3"> AAAAA </div> <div class="pure-u-1-3"> BBBBB </div> <div class="pure-u-1-3"> CCCCC </div> </div> </div> </div> </body> </html>