ウェブサイト作成スキル#07 CSS Gradient Generator

皆さんこんにちは、カラーオンです。

今回はウェブサイト作成スキルより「CSS Gradient Generator」をご紹介します。

CSSで背景をデザインすることができます。

ページ全体でもテーブルでも<h1>タイトルでもCSSでbackgroundで背景をしていすることでデザイン性がアップします。

単色やイメージを設定することもできますが、HTML5、CSS3の今の時代ではブラウザも対応が進んでいるグラデーションをお勧めします。

私たちが見ている世界には単色はありえません。光の陰影が必ずありますので、より自然な雰囲気で好感を与えるためにはグラデーション表現は必須です。

背景にもグラデーションを安定して設定できるCSS技術はホームページ上で必ず使用したいですね。

カラーオンが良く使用しているのは『 Ultimate CSS Gradient Generator 』です。

http://www.colorzilla.com/gradient-editor/

編集がとても簡単で色相・明度・彩度をスライダで変更することもできる点が魅力的です。

以前作成したデータをインポートして編集することもできます。
是非使用してみてくださいね:)

[poll id=”2″]

 

ウェブサイト作成スキル#06 <PAGE-TOP>ページトップへのボタン

皆さんこんにちは、カラーオンです。

今回はウェブサイト作成に関して、ページトップへボタンをご紹介します。

縦長になったページでは一瞬にしてそのページのトップまで戻ることができるボタンがあることが望ましいでしょう。

そのページ内のリンクをクリックせずにページ下部まで移動した後、次の情報へのアクセスが簡単でないことはページからの離脱を招きます。次の情報へいかにしてストレスなく導くことができるかが重要です。

JavaScriptを使用したページトップへボタンでカラーオンが気に入っているものがこちらのページで紹介されている、『1.ちょっとスクロールしたら「トップへ戻るボタン」を表示』です。

www.webopixel.net

カラーオンのサイトでも表示をCSSで変更して利用させて頂いています。

jQueryというJavaScriptライブラリーを使用して、ページのトップへいきなりジャンプするのではなく、エレベーター式にスライドしていきます。エレベーター式に移動する方法は多くのサイトで導入されていて、その動作が心地よいです。いきなりページのトップへジャンプするとページが変わったようにも感じて違和感がありますよね。

jQueryを使用して」と書きましたが、どうやって使用するのかというと…

こちらより必要なファイルをダウンロードしてサイト上にアップロードして使用します。

各ページにおいてjQueryファイルを読み込んで、その上でページトップへボタン用のJavaScriptを読み込んで、CSSで表示をデザインします。

jQueryはページに様々な動的プログラムを導入することができます。無数のサイトでjQueryを使用したスライドショーやリンクボタンなどのJavaScriptプログラムが紹介されていますので、ページに取り込みやすいですね。

HTMLファイルのhead内でjQueryを読み込んで、その後にページトップへボタン用のJavaScriptを配置します。

CSSでデザインして、body内の最下部にボタン表示の為のコードを追加します。

<カラーオンが使用しているJavaScript

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 250);
return false;
});
});

ページを下へスクロールしたらボタンがフェードインして、クリックしたときのページトップへスクロールする秒数などを指定しています。

<カラーオンが使用しているCSS

#page-top {
position: fixed;
bottom: 15px;
right: 15px;
font-size: 40px;
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
padding: 5px 15px;
text-align: center;
display: block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}

背景色、角の丸み、表示位置、透明度などをCSSでデザインしています。

ちなみに、カラーオンではボタン自体には画像を使用しています。

是非参考にしてみてください。