求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

WordPress化するHTMLデザインを作成

HTML+CSSでサイトのデザインを作る

f:id:web-0220:20190404010943g:plain

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Home | Sample Cafe</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<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="style.css">
</head>
<body>
<header class="header">
  
<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="#"><span>Sample Cafe</span></a>
</h1>
<p class="description">ケーキとコーヒーのおいしいお店を紹介するブログ</p>
</div><!-- /.alignleft -->

<div class="searchblock">
<form action="#" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.alignright -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
  <ul class="sub-menu">
    <li><a href="#">CHILD#1</a></li>
    <li><a href="#">CHILD#2</a></li>
    <li><a href="#">CHILD#3</a></li>
  </ul>
</li>
</ul>
</div><!-- /.container -->
</nav>
</header><!-- /.header -->

<div class="container">
<main class="main">

<article class="post">
<h2><a href="#">ミル・クレープ</a></h2>
<p class="post-meta">
  <span class="post-date">2019年4月2日</span>
  <span class="category">Category - <a href="#">ケーキ</a></span>
  <span class="comment-num"><a href="#">Comment : 0</a></span>
</p><!-- /.post-meta -->
<p><img src="https://via.placeholder.com/300x200" alt="ミル・クレープ" class="alignleft">ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。</p>
<p>ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。名前は「千枚のクレープ」という意味のフランス語であり、「ミルク」と「クレープ」の合成語ではない。実際には、20枚前後のクレープを使うことが多い。</p>
<p>ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。名前は「千枚のクレープ」という意味のフランス語であり、「ミルク」と「クレープ」の合成語ではない。実際には、20枚前後のクレープを使うことが多い。</p>
<p class="more-link"><a href="#">続きを読む &raquo;</a></p>
</article><!-- /.post -->

<article class="post">
<h2><a href="#">いちごショートケーキ</a></h2>
<p class="post-meta">
  <span class="post-date">2019年3月13日</span>
  <span class="category">Category - <a href="#">ケーキ</a></span>
  <span class="comment-num"><a href="#">Comment : 0</a></span>
</p>
<p><img src="https://via.placeholder.com/300x200" alt="イチゴショート" class="alignleft">真っ白な生クリームの上に乗っている真っ赤なイチゴ。今日出会ったケーキは、うっすらピンク色のクリームで包まれていて、イチゴを楽しむためのケーキです。もちろんスポンジの間にも、スライスされたイチゴがたっぷり。</p>
<p>真っ白な生クリームの上に乗っている真っ赤なイチゴ。今日出会ったケーキは、うっすらピンク色のクリームで包まれていて、イチゴを楽しむためのケーキです。もちろんスポンジの間にも、スライスされたイチゴがたっぷり。</p>
<p class="more-link"><a href="#">続きを読む &raquo;</a></p>
</article><!-- /.post -->

<div class="pager">
  <span class="alignleft"><a href="#">&laquo; PREV</a></span>
  <span class="alignright"><a href="#">NEXT &raquo;</a></span>
</div><!-- /.pager -->

</main><!-- /.main -->

<div class="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Recent Posts</h2>
<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>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Archive</h2>
<ul>
<li><a href="#">2019年4月</a></li>
<li><a href="#">2019年3月</a></li>
</ul>
</div><!-- /.widget -->
</div><!-- /.sidebar -->

</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; Sample Cafe</p>
</div><!-- /.footer -->
</body>
</html>
single.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Single | Sample Cafe</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<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="style.css">
</head>
<body>
<header class="header">

<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="#"><span>Sample Cafe</span></a>
</h1>
<p class="description">ケーキとコーヒーのおいしいお店を紹介するブログ</p>
</div><!-- /.alignleft -->

<div class="searchblock">
<form action="#" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.alignright -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
<ul class="sub-menu">
<li><a href="#">CHILD#1</a></li>
<li><a href="#">CHILD#2</a></li>
<li><a href="#">CHILD#3</a></li>
</ul>
</li>
</ul>
</div><!-- /.container -->
</nav>
</header><!-- /.header -->

<div class="container">
<main class="main">

<article class="post">
<h2><a href="#">ミル・クレープ</a></h2>
<p class="post-meta">
<span class="post-date">2018年4月2日</span>
<span class="category">Category - <a href="#">ケーキ</a></span>
<span class="comment-num"><a href="#">Comment : 0</a></span>
</p><!-- /.post-meta -->
<p><img src="https://via.placeholder.com/300x200" alt="ミル・クレープ" class="alignleft">ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。</p>
<p>ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。名前は「千枚のクレープ」という意味のフランス語であり、「ミルク」と「クレープ」の合成語ではない。実際には、20枚前後のクレープを使うことが多い。</p>
<p>ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。名前は「千枚のクレープ」という意味のフランス語であり、「ミルク」と「クレープ」の合成語ではない。実際には、20枚前後のクレープを使うことが多い。</p>

<p class="footer-post-meta">
Tag : <a href="#">ミル・クレープ</a>, <a href="#">ケーキ</a>
<span class="post-author">作成者 : <a href="#">マスター</a></span>
</p>

</article><!-- /.post -->

<div class="pager">
<span class="alignleft"><a href="#">&laquo; Hello world!</a></span>
<span class="alignright"><a href="#">いちごショート &raquo;</a></span>
</div><!-- /.pager -->

<!-- comment area -->
<div id="comment-area">

<h3 id="comments">Comment</h3>

<ol class="commets-list">
<!-- comment -->
<li class="comment parent">
<div class="comment-body">
<div class="comment-author">
<img alt="" src="images/mysteryman.gif" class="avatar" height="55" width="55">
<cite>ケーキ好き</cite><span>より:</span>
</div>
<div class="comment-meta commentmetadata">
<a href="#">2019年4月3日 11:55 PM</a>
</div>
<p>
こんにちは! 私もフルーツタルトは大好きです!
</p>
<div class="reply">
<a class="comment-reply-link" href="#">返信</a>
</div>
</div>

<!-- child comment -->
<ul class="children">
<li class="comment bypostauthor">
<div class="comment-body">
<div class="comment-author">
    <img alt="" src="images/avatar.gif" class="avatar" height="55" width="55">
    <cite>オーナー</cite> <span>より:</span>
</div>
<div class="comment-meta commentmetadata">
    <a href="#">2012年11月25日 5:22 PM</a>
</div>
<p>
    ケーキ好きさん、コメントありがとうございます!
</p>
<div class="reply">
    <a class="comment-reply-link" href="#">返信</a>
</div>
</div>
</li>
</ul>
<!-- /child comment -->
</li>
<!-- /comment -->
</ol>

<!-- comment form -->
<div id="respond">
<h3>Leave a Reply</h3>

<form action="#" method="post" id="commentform">

<p class="comment-notes">
メールアドレスが公開されることはありません。
<span class="required">*</span> が付いている欄は必須項目です
</p>

<p class="comment-form-author">
<label for="author">名前 <span class="required">*</span></label>
<input id="author" name="author" type="text" value="" size="30" />
</p>

<p class="comment-form-email">
<label for="email">メールアドレス <span class="required">*</span></label>
<input id="email" name="email" type="text" value="" size="30" />
</p>

<p class="comment-form-url">
<label for="url">ウェブサイト</label>
<input id="url" name="url" type="text" value="" size="30" />
</p>

<p class="comment-form-comment">
<label for="comment">コメント</label>
<textarea id="comment" name="comment" cols="45" rows="8"></textarea>
</p>

<p class="form-submit">
<input name="submit" type="submit" id="submit" value="Submit Comment">
</p>

</form>
</div>
<!-- /comment form -->

</div>
<!-- /comment area -->

</main><!-- /.main -->

<div class="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Recent Posts</h2>
<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>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Archive</h2>
<ul>
<li><a href="#">2018年9月</a></li>
<li><a href="#">2018年8月</a></li>
</ul>
</div><!-- /.widget -->
</div><!-- /.sidebar -->

</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; Sample Cafe</p>
</div><!-- /.footer -->
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Page | Sample Cafe</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<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="style.css">
</head>
<body>
<header class="header">

<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="#"><span>Sample Cafe</span></a>
</h1>
<p class="description">ケーキとコーヒーのおいしいお店を紹介するブログ</p>
</div><!-- /.alignleft -->

<div class="searchblock">
<form action="#" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.alignright -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<ul class="menu">
<li><a href="#">HOME</a></li>
<li class="current_page_item"><a href="#">ABOUT</a>
	<ul class="sub-menu">
		<li><a href="#">CHILD#1</a></li>
		<li><a href="#">CHILD#2</a></li>
		<li><a href="#">CHILD#3</a></li>
	</ul>
</li>
</ul>
</div><!-- /.container -->
</nav>
</header><!-- /.header -->

<div class="container">
<main class="main">

<article class="page">
<h2><a href="#">ABOUT</a></h2>
<p><img src="https://via.placeholder.com/300x200" alt="ミル・クレープ" class="alignleft">ミル・クレープは、ケーキの一種。何枚ものクレープを、間にクリームや果物を挟んで重ねたもの。</p>
<p>
カフェ好き、ケーキ好きの方に限らず、どなたでもお気軽にコメントいただけるとうれしいです!
</p>
</article><!-- /.page -->

</main><!-- /.main -->

<div class="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Recent Posts</h2>
<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>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Archive</h2>
<ul>
<li><a href="#">2019年4月</a></li>
<li><a href="#">2019年3月</a></li>
</ul>
</div><!-- /.widget -->
</div><!-- /.sidebar -->

</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; Sample Cafe</p>
</div><!-- /.footer -->
</body>
</html>