irodas1

s_chibaaa_17

html

<!DOCTYPE html>
<html lang="ja">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="https://kit.fontawesome.com/16cb84376e.js" crossorigin="anonymous"></script>

 </head>

 <body>
   <header>
     <div class="container">
       <div class="header_left">
         <h1><a href="">Write</a></h1>
         <p>書くためのテーマ</p>
       </div>
       <div class="header_right">
         <div class="header_nav">
           <div class="gnav">
             <ul>
               <li><a href="">ホーム<i class="fas fa-angle-down"></i>


                 </a>
                 <ul>
                   <li><a href="">→カスタマイズ</a>

                   </li>
                 </ul>
               </li>
               <li><a href="">ページ<i class="fas fa-angle-down"></i>


                 </a>
                 <ul>
                   <li><a href="">アイキャッチ画像なしのページ</a></li>
                   <li><a href="">ページ全幅テンプレート</a></li>
                 </ul>
               </li>
               <li><a href="">タイポグラフィー</a></li>
               <li><a href="">お問い合わせ</a></li>
             </ul>
           </div>
           <div class="search_form">
             <form action="#">
               <input class="search" type="text" name="q" placeholder="検索...">
             </form>
           </div>
         </div>

       </div>
     </div>
   </header>

 </body>

</html>


css​

body {
 font-size: 15px;
 font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
 line-height: 1.8;
}

a{
 text-decoration: none;
 color: #444444 ;
}

header{
 height: 152px;
 margin-top: 50px;
}

.container{
 width: 1040px;
 margin: 0% auto;
}

ul{
 list-style: none;
}

/*↓ここからreset.css↓*/


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent;
}

body {
   line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display:block;
}

nav ul {
   list-style:none;
}

blockquote, q {
   quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content:'';
   content:none;
}

a {
   margin:0;
   padding:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent;
}

/* change colours to suit your needs */
ins {
   background-color:#ff9;
   color:#000;
   text-decoration:none;
}

/* change colours to suit your needs */
mark {
   background-color:#ff9;
   color:#000;
   font-style:italic;
   font-weight:bold;
}

del {
   text-decoration: line-through;
}

abbr[title], dfn[title] {
   border-bottom:1px dotted;
   cursor:help;
}

table {
   border-collapse:collapse;
   border-spacing:0;
}

/* change border colour to suit your needs */
hr {
   display:block;
   height:1px;
   border:0;  
   border-top:1px solid #cccccc ;
   margin:1em 0;
   padding:0;
}

input, select {
   vertical-align:middle;
}

この記事が気に入ったらサポートをしてみませんか？