反応型ページ(9):実戦(1)準備

20672 ワード
CSS テキストリンク

Webサイトの基本



フォルダとファイルの作成



ホームページとサブページのデフォルト構造

  • ホームページ(index.html)
    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>FLAT DESIGN</title>
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="chorcut icon" href="images/favicon/favicon.ico" />
    <link
      rel="apple-touch-icon-precomposed"
      href="images/favicon/flat=design-touch.png"
    />
    <script src="js/query.min.js"></script>
  </head>
  <body></body>
</html>
  • サブページ
    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>FLAT DESIGN-소개</title>
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" href="images/favicon/favicon.ico" />
    <link rel="stylesheet" href="images/favicon/flat-design-touch.png" />
    <script src="js/jquery.min.js" ></script>
  </head>
  <body>
      <div id="wrap">
  </body>
</html>

    css+Webフォント属性の追加を初期化

  • reset.css 
    • @charset utf-8;
/* CSS 초기화 */
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;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
background:url(../images/s_images/body_bg.png);
line-height:1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ 
display:block;
}
nav ul, li{
list-style:none;
}
a{
margin:0;
padding:0;
font-size:100%;
text-decoration:none;
vertical-align:baseline;
color:#fff;
background:transparent;
}
img{
vertical-align:top;
}
table{
border-collapse:collapse;
border-spacing:0;
}
input{
margin:0;
padding:0;
box-sizing:content-box;
vertical-align:top;
appearance:none;
border:1px solid #e65d5d;
color:#e65d5d;
border-radius:0; 
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
}
input::-moz-input-placeholder{
color:#e65d5d;
}
input::-webkit-input-placeholder {
color:#e65d5d;
}
/* 웹폰트 CSS */
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.eot)}
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.woff)}

    メディアクエリーの作成

  • 反応型Webを作成する際の注意事項
  • モバイルメディアクエリー
  • 移動用構造cssコードおよび
  • すべての解像度は、共通に適用されるcssコードとともに
    • を記述する.
  • 装置によるパーティション注釈文
    • の記述
  • デバイスのサイズではなく、「問題が発生する可能性のある解像度サイズ」を考慮します.
    (通常はモバイル320 px、タブレット768 px、pc 960 pxまたは1024 px)
    • <style>
      /* 모바일용 css*/

      /* 태블릿용 css*/
      @media all and (min-width: 768px) {
      }

      /* pc용 css*/
      @media all and (min-width: 960px) {
      }
</style>
  • ホームおよびサブページ基本フレームワーク
    • の作成
    
    <style>
      /* 모바일용 css*/
      /* 기본 CSS*/
      #wrap {
        display: flex;
        flex-flow: column nowrap;
        width: 80%;
        margin: 0 auto;
        max-width: 1200px;
      }
      #wrap section {
        box-sizing: border-box; /*선값과 패딩값을 너비값에 포함*/
      }
      /* 태블릿용 css*/
      @media all and (min-width: 768px) {
        /* 기본 CSS*/
        #wrap {
          display: flex;
          flex-flow: row wrap;
        }
      }

      /* pc용 css*/
      @media all and (min-width: 960px) {
        #wrap {
          position: relative;
          width: 90%;
        }
      }
    </style>
    プログラマー72413号-タクシー代(★★/O/1):Python
    dtb+uImage,dtb+zImage