スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > サイト訪問者を唸らせるデザインスニペット

サイト訪問者を唸らせるデザインスニペット

投稿日:2014年8月22日

このチュートリアルではユーザーを唸らせるデザインスニペットについて紹介します。


Step1:はじめに

ウェブのトレンドというのは一夜にして変わってしまうように思います。
毎年、最新のデザインがネット上のウェブサイトのコードに現れるので、デザイナーはどうやって、それらの新しいスタイルを自分の作品に取り入れるかを考えなくてはなりません。

幸運なことに、カスケードスタイルシート(CSS)のおかげで、スニペットを使えば、ものの数分で最新デザインをサイトに適用して見ることができます。
スニペットによっては機能を増やし、ユーザーに快適さを与えるために作られたものもありますが、下記に紹介したものはウェブサイトの美的側面にのみ特化したものです。
いずれのスニペットも、最新のトレンドに乗り遅れることなく、訪問者を唸らせるのに役に立つことでしょう。



Step2:フラットなメニュー

最近、フラットなデザインが大流行しています。
このスニペットを使うことにより、アイコンを選択すればページ名がメニューの右側に現れる、フラットなナビゲーションを構築することができます。

nav ul {
list-style: none; overflow: hidden; position: relative;
}
nav ul li {
}
float: left; margin: 0 20px 0 0;
nav ul li a {
display: block; width: 120px; height: 120px;
background-image:url(icons.png);background-repeat:no-repeat;
}
nav ul li:nth-child(1) a {
background-color: #5bb2fc;
background-position: 28px 28px;
}
nav ul li:nth-child(2) a {
background-color: #58ebd3;
background-position: 28px -96px;
}
nav ul li:nth-child(3) a {
background-color: #ffa659;
background-position: 28px -222px;
}
nav ul li:nth-child(4) a {
background-color: #ff7a85;
background-position: 28px -342px;
}
nav ul li a span {
font: 50px "Dosis", sans-serif;
text-transform: uppercase;
top: 29px;
position: absolute; left: 580px;
display: none;
}
nav ul li a:hover span {
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
}
display: block;

フラットなメニュー






Step3:かっこいいソーシャルフッター

それぞれのアイコンには、このHTMLにあるソーシャルサービスと呼応したフォントアイコンを呼び出すdiv要素が必要です。

<div class="footer">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>

そして、これが見た目を整えるCSSです。

@import url('http://fonts.googleapis.com/css?family=Lato:300');
@import url('http://weloveiconfonts.com/api/?family=entypo');
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #ddd;
}
.content {
padding: 30px;
font: 300 40px Lato, sans-serif;
text-align: center;
color: #999;
background: #eee;
}
.footer {
padding: 20px 0;
text-align: center;
}
.social {
display: inline-block;
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
font-family: Entypo;
font-size: 35px;
text-align: center;
color: #bbb;
border-radius: 50%;
background: #eee;
overflow: hidden;
transition: color .3s;
}
.social:hover {
color: #59d;
cursor: pointer;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}

フラットな見た目を維持したければ、CSS内にあるシャドウを取り除いてください。

かっこいいソーシャルフッター



Step4:申し込み/ログインフォーム

多くのウェブアプリケーションに付いているような古いフォームを使用するのも一つの方法ですが、ポップアップするフォームを表示することもできます。
このスニペットを使ってかっこいいフォームを表示させてみましょう。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.about {
margin: 70px auto 40px;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #666;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
background: #eee;
background: rgba(250, 250, 250, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255,255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
}
.about a {
color: #333;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #fafafa;
background: rgba(255, 255, 255, 0.7);
}
.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
/*
* Copyright (c) 2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
body {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #596778;
}
.sign-up {
position: relative;
margin: 50px auto;
width: 280px;
padding: 33px 25px 29px;
background: white;
border-bottom: 1px solid #c4c4c4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.sign-up:before, .sign-up:after {
content: '';
position: absolute;
bottom: 1px;
left: 0;
right: 0;
height: 10px;
background: inherit;
border-bottom: 1px solid #d2d2d2;
border-radius: 4px;
}
.sign-up:after {
bottom: 3px;
border-color: #dcdcdc;
}
.sign-up-title {
margin: -25px -25px 25px;
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 300;
color: #aaa;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
background: #f7f7f7;
}
.sign-up-title:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: #c4e17f;
border-radius: 5px 5px 0 0;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, 669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
input {
font-family: inherit;
color: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sign-up-input {
width: 100%;
height: 50px;
margin-bottom: 25px;
padding: 0 15px 2px;
font-size: 17px;
background: white;
border: 2px solid #ebebeb;
border-radius: 4px;
-webkit-box-shadow: inset 0 -2px #ebebeb;
box-shadow: inset 0 -2px #ebebeb;
}
.sign-up-input:focus {
border-color: #62c2e4;
outline: none;
-webkit-box-shadow: inset 0 -2px #62c2e4;
box-shadow: inset 0 -2px #62c2e4;
}
.lt-ie9 .sign-up-input {
line-height: 48px;
}
.sign-up-button {
position: relative;
vertical-align: top;
width: 100%;
height: 54px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
background: #f0776c;
border: 0;
border-bottom: 2px solid #d76b60;
border-radius: 5px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #d76b60;
box-shadow: inset 0 -2px #d76b60;
}
sign-up-button:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
:-moz-placeholder {
color: #ccc;
font-weight: 300;
}
::-moz-placeholder {
color: #ccc;
opacity: 1;
font-weight: 300;
}
::-webkit-input-placeholder {
color: #ccc;
font-weight: 300;
}
:-ms-input-placeholder {
color: #ccc;
font-weight: 300;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}

当然のことながら、これらのスニペットのデザインや色は一般的なものなので、そのままではあなたのサイトには合わないでしょう。
色や角の半径を変えたり、あなたのサイトに合うように色々と調整をしてください。

HTMLやCSSの新参者のみならず、上級者でもこれらのスニペットは役に立つものとしてツールボックスに加わることでしょう。
もし思い通りの表示に修正するのに助けが必要であれば、w3schools.comのCSSチュートリアルを見直してみてください。



Step5:役に立つCSSに関する書籍

HTML and CSS: Visual QuickStart Guide
Animation in HTML, CSS, and JavaScript
CSS Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook
CSS in Easy Steps



引用:Web Design Library   著者:JeffOrloff  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング