【勉強メモ】スマホ用サイト1〜css 〜
@charset "utf-8"; /*================================================= * ブラウザのデフォルトのスタイルをリセットする * ================================================= */ html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav { margin: 0; padding: 0; font-size: 100%; } body { line-height: 1.0; -webkit-text-size-adjust: none; } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; } img { border: 0; vertical-align: bottom; } ul, ol { list-style: none; } table { border-spacing: 0; empty-cells: show; } /*================================================= * サイト全体の基本スタイル * ================================================= */ body { background-color: #D9F5F3; font-family: "Hiragino Kaku Gothic ProN", Helvetica, san-serif; /*スマホ用サイトではfontの指定はこの3つで十分*/ font-size: 14px; line-height: 1.6; } a { color: #336699; } /*================================================= * サイトのレイアウト * ================================================= */ .global-header { height: 44px; /*Google・Appleで推奨している数値。38〜36でも大丈夫。*/ line-height: 44px; /*Google・Appleで推奨している数値。38〜36でも大丈夫。*/ background-color: #132543; box-shadow: inset 0 0 7px rgba(255,255,255,.4); border: solid 1px #2a849d; background-image: -webkit-linear-gradient(top, #48a5bf, #7ec4d8); /*グラデーションの記述。 古いwebkit系に対応させるための記述。top(始まり)から記述。最初の色が上の色。*/ background-image: linear-gradient(to bottom, #48a5bf, #7ec4d8); /*グラデーションの記述。 W3Cが推奨するモダンブラウザーの記述。目的地(to bottom上から下)を記述。最初の色が上の色。*/ } .page-heading { margin: 0 auto; color: #333333; font-size: 16px; width: 140px; /*文字がwidthを超えると省略される*/ overflow: hidden; /*文字が長い場合に省略される*/ white-space: nowrap; /*文字が長い場合に省略される*/ text-overflow: ellipsis; /*文字が長い場合に省略される。上の3つとセット*/ text-shadow: 1px 1px 1px #ffffff;/*文字に対してのテキストシャドウ。縦・横・ボケ足・色の順で記述されている*/ text-align:center; } .img-illust { margin: 0 auto; display: block; border: 10px solid #F5F5F0; } .introduction { margin: 15px 10px; padding: 5px 10px; background-color: #75D9D0; font-size: 12px; border-radius: 8px; } .block { padding-bottom: 20px; } .block-heading { margin: 10px; padding: 5px; border-left: 5px solid #75D9D0; font-size: 14px; } .comment { margin: 0 10px; font-size: 12px; } .nav-portfolio { margin-top: 10px; } .nav-portfolio img { margin: 5px 0; width: 60px; height: 60px; border-radius: 50%; /*画像の隅を丸くする。正方形に対する正円は50%!*/ box-shadow: 0 0 3px #333333; /*影をつける*/ } .nav-portfolio ul { overflow: hidden; } .nav-portfolio li { margin: 0 0 10px 16px; float: left; text-align: center; }
★ポイント★
background-image: -webkit-linear-gradient(top, #48a5bf, #7ec4d8);
/*グラデーションの記述。古いwebkit系に対応させるための記述。top(始まり)から記述。最初の色が上の色。*/
background-image: linear-gradient(to bottom, #48a5bf, #7ec4d8);
/*グラデーションの記述。W3Cが推奨するモダンブラウザーの記述。目的地(to bottom上から下)を記述。最初の色が上の色。*/
border-radius: 50%; /*画像の隅を丸くする。正方形に対する正円は50%!*/