jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark

2015/10/27 334 users Ｔｒａｎｓｉｔｉｏｎ jQuery スクロール デモ CSS

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました... 続きを読む

コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選｜ferret [フェレット]

2015/07/14 386 users Ferret フェレット コピペ 基調 実装

CSS3で簡単に実装できるサンプルコード一覧 1.CSS3を使って美しく装飾されたテーブルの作り方｜Webpark http://weboook.blog22.fc2.com/blog-entry-329.html ホームページ制作に関するあらゆるお役立ち情報を配信する「Webpark」の記事です。 ブルーを基調とした、シンプルでスタンダードなデザインのテーブルが作れるサンプルコードを掲載していま... 続きを読む

jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark

2015/06/22 197 users jQuery MENU スクロール ul id ソース

最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users span 擬似要素 HTML マウス サンプル

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

画面サイズに合わせて高さを指定する3つの方法｜Webpark

2015/03/24 174 users sect width 横幅 セクション CSS

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 sect... 続きを読む

背景に使えるCSSグラデーション作成ツール4選とその使い方｜Webpark

2015/03/03 28 users 背景 使い方

続きを読む

3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる｜Webpark

2015/01/08 129 users ばつ 開閉 パネル メニューボタン 3本線

続きを読む

jQueryとCSS3で作るページの上までスクロールするボタン｜Webpark

2014/09/03 82 users jQueryとCSS ボタン ページ

続きを読む

SNSやWebサービスなどのロゴの色（ブランドカラー）を調べてみた｜Webpark

2014/08/11 106 users Font Awesome Webフォント アイコン うち ロゴ

SNSなどのアイコンをWebフォントにするサイトが増えていると思います。Webフォントにするということはアイコンの色はこちらで指定する必要があります。ということでFont Awesome Iconsにあるアイコンの色を調べてみました。 で、調べていくうちに止まらなくなってきたので、Font Awesomeに限らず有名なロゴカラーを調べてみました。 Font Awesome Iconsの使い方等はこ... 続きを読む

私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】｜Webpark

2014/08/07 494 users ツール ウェブサイト作成 まとめ

こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能（Chrome）から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能（Chrome）ごとで分けていませんのでご注意ください。 I/O 30... 続きを読む

アイコン型WebフォントをCSSでデザインしたボタン10個｜Webpark

2014/07/31 100 users stylesheet rel CSS href link

アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"... 続きを読む

CSSで画像リンクにマウスを乗せたときの動きを考えてみた｜Webpark

2014/04/29 46 users 半透明 カーソル ひと手間 CSS マウス

画像リンクにカーソルを乗せると半透明になるようにしているサイトをよく見かけます。薄くなりすぎるのはあまり好きではないので半透明以外にいい方法がないか色々と考えてみました。 画像がリンクになっているか確認するためには当然カーソルを乗せる必要があります。カーソルを乗せたとき、画像が半透明になって見えにくい場合、カーソルを画像から外します。私はそんなひと手間が面倒に感じます。 確かに画像がリンクであるこ... 続きを読む

レスポンシブWebデザインに対応した横メニューの作り方｜Webpark

2014/03/18 379 users toggle MENU max-width width 横幅

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px... 続きを読む

レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます｜Webpark

2014/03/11 134 users box-sizing プロパティ レスポンシブデザイン 理解

CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書... 続きを読む

これは便利！アイコン型WebフォントのCDN「Font Awesome」｜Webpark

2014/01/13 123 users CDN Font Awesome

まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inlin... 続きを読む

jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark

2013/12/18 74 users jQuery 百聞 アニメーション 一見 プラグイン

最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを... 続きを読む

私がよく使っているウェブサイト作成に役立つChromeの拡張機能6選｜Webpark

2013/11/18 40 users 余白 要素 拡張機能 Chrome ウェブサイト作成時

個人的に良く使っているウェブサイト作成時に役立つChromeの拡張機能を紹介します。有名なものばかりだと思いますが、ひとつでも新しい発見があればうれしいです。 CSSViewer マウスを乗せた場所のスタイルの状況を知ることができます。余白を調整したいときに使います。調整したい余白がどの要素にあたるのかがすぐに分かります。 次に紹介するものはさらにスタイルの変更もできるわけですが、こちらの方が見や... 続きを読む

CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark

2013/10/15 144 users 矢印 階層 CSS 擬似要素 多階層

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にす... 続きを読む

CSS3で追加されたセレクタ「:not()」について考えてみました｜Webpark

2013/09/24 111 users セレクタ CSSセレクタ not おさらい CSS3セレクタ

CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark 保存版！CSS3セレクタの説明書｜Webpark では、「:not()」について考えてみます。これから紹介する簡単... 続きを読む

私がよく使っているWebサイト作成に役立つブックマークレット｜Webpark

2013/09/17 150 users wikiped ウェブブラウザ ブックマークレット 外観 場所

ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikiped... 続きを読む

CSSだけで作るamazon風な縦型メガメニュー｜Webpark

2013/09/02 78 users border-radius box-shadow CSS

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では... 続きを読む

フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト｜Webpark

2013/08/29 29 users CSS CSS Prism フラットデザイン 勉強 配色

フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。 で、今回はそのサイトがどのような色を使っているのか確認する方法を紹介します。この方法で色んなサイトの配色を見ていくと非常に勉強になると思います。 CSS Prism by Ryan Berg 使い方は簡単。CSSのアドレスを入力するだけです。 CSSから色を抜き出すので画像に使われて... 続きを読む

ついつい押したくなる、CSS3を使ったラジオボタンのデザイン｜Webpark

2013/08/25 125 users ラジオボタン CSS3 デザイン

特に問題もないと思いますが、フォームを使わない人にとってはlabelは馴染みがないかもしれません。この例でいうと、labelのforの値が「on」のものをクリックすると、inputのidの値が「on」ものにチェックが入ることになります。 forやidを使わず、labelの中にinputを入れて連動させる方法もありますが、今はあまり使わないようです。 続いて、CSSです。まずはすべて載せて、後で個別... 続きを読む

擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark

2013/07/22 121 users Ｔｒａｎｓｉｔｉｏｎ jQuery ul class CSS

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a... 続きを読む

擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話｜Webpark

2013/07/01 88 users visited hover 擬似要素 active link

私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に... 続きを読む