Webpark http://weboook.blog22.fc2.com/ ja
  • http://weboook.blog22.fc2.com/blog-entry-415.html jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法 可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 <![CDATA[

    可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。

    jquery-scroll-effect2.png]]>
    JavaScript 2019-05-17T07:25:47+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-414.html プレゼン資料のデザインに役立つスライド、サイト、記事と私が感じたこと 今年になって仕事でPowePointを使う機会が増えまして、今までまったく使ったことがないので、どのようにすれば見栄えがよくなるのか色々と調べてみました。 久々の投稿なのにブログの本筋から外れた内容になりますが、調べるなかで役に立ったものと、個人的な感じることを書いてみます。 <![CDATA[

    今年になって仕事でPowePointを使う機会が増えまして、今までまったく使ったことがないので、どのようにすれば見栄えがよくなるのか色々と調べてみました。

    久々の投稿なのにブログの本筋から外れた内容になりますが、調べるなかで役に立ったものと、個人的な感じることを書いてみます。

    presentation-inspire2.png]]>
    お役立ちサイト 2015-09-28T07:41:43+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-412.html jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー 最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。 <![CDATA[

    最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。

    scroll-up-down.png]]>
    JavaScript 2015-08-24T07:15:47+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-413.html ゴーストボタンにマウスを乗せたときの動きいろいろ16個 昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 <![CDATA[

    昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。

    ghost-btn.png]]>
    スタイルシート 2015-05-30T07:29:41+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-411.html 画面サイズに合わせて高さを指定する3つの方法 縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 <![CDATA[

    縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

    height-max.png]]>
    スタイルシート 2015-04-20T07:23:13+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-410.html マウスを乗せたときと外したときでtransitionの内容を変える方法 CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。 <![CDATA[

    CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。

    trantion-hover-tittle.png]]>
    スタイルシート 2015-03-20T07:54:25+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-409.html 背景に使えるCSSグラデーション作成ツール4選とその使い方 画面全体やヘッダーの背景色をグラデーションにするときに役立つWebツールを4つ紹介します。画像ではなくCSSで実装することができますので手軽に導入できると思います。 <![CDATA[

    画面全体やヘッダーの背景色をグラデーションにするときに役立つWebツールを4つ紹介します。画像ではなくCSSで実装することができますので手軽に導入できると思います。

    gradient-generator.jpg]]>
    お役立ちサイト 2015-03-03T08:08:25+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-408.html CSSで作ったドロップダウンメニューのドロップの動きいろいろ CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 <![CDATA[

    CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。

    dropdown-effect.png ]]>
    スタイルシート 2015-02-13T08:02:52+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-406.html 3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 <![CDATA[

    CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。

    3line-bar-intro.png]]>
    スタイルシート 2015-01-17T07:53:27+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-405.html Webギャラリーサイト「samprary」を作ってみました 最近、ブログの更新ペースが落ちていたわけですが、何となくWebギャラリーサイトを作っていたからでした。競合も多いので今さらと思いましたが、ついつい作っちゃいました。 <![CDATA[

    最近、ブログの更新ペースが落ちていたわけですが、何となくWebギャラリーサイトを作っていたからでした。競合も多いので今さらと思いましたが、ついつい作っちゃいました。

    samprary-open.png]]>
    その他いろいろ 2014-12-17T07:25:01+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-404.html jquery.cookie.jsの使い方と簡単なサンプルを紹介します 今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。 <![CDATA[

    今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。

    jquery-cookie2.png]]>
    JavaScript 2014-12-10T07:13:06+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-403.html レスポンシブなサイトに!jQueryでオンマウスでもクリックでも開くボタン クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。 ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリ <![CDATA[

    クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。

    ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリックで開くようにしないと仕方ありません。

    hover-click-button.png]]>
    JavaScript 2014-11-15T06:39:50+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-402.html jQueryとCSS3で作るページの上までスクロールするボタン wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。 今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。 <![CDATA[

    wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。

    今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。

    scroll-top-tittle1.png]]>
    JavaScript 2014-09-10T07:11:03+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-401.html 使い勝手のよさそうなアイコンをCSSだけで6個作ってみた 近頃アイコンに画像を使わずWebフォントを使うことが多くなりました。とはいうものの、少しのアイコンを使うために、多くのアイコンが入ったファイルを読み込むのもどうかなということもあります。そのアイコンをCSSで表現できるならそれに越したことはないと思います。 <![CDATA[

    近頃アイコンに画像を使わずWebフォントを使うことが多くなりました。とはいうものの、少しのアイコンを使うために、多くのアイコンが入ったファイルを読み込むのもどうかなということもあります。そのアイコンをCSSで表現できるならそれに越したことはないと思います。

    css-icon.png]]>
    スタイルシート 2014-09-01T07:15:14+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-399.html SNSやWebサービスなどのロゴの色(ブランドカラー)を調べてみた SNSなどのアイコンをWebフォントにするサイトが増えていると思います。Webフォントにするということはアイコンの色はこちらで指定する必要があります。ということでFont Awesome Iconsにあるアイコンの色を調べてみました。 <![CDATA[

    SNSなどのアイコンをWebフォントにするサイトが増えていると思います。Webフォントにするということはアイコンの色はこちらで指定する必要があります。ということでFont Awesome Iconsにあるアイコンの色を調べてみました。

    sns-logo-color.png]]>
    ウェブデザイン 2014-08-12T07:07:26+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-398.html 私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】 こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能(Chrome)から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 <![CDATA[

    こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能(Chrome)から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。

    webtool-bookmarklet-matome.png]]>
    お役立ちサイト 2014-08-08T08:08:18+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-397.html アイコン型WebフォントをCSSでデザインしたボタン10個 アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 <![CDATA[

    アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。

    icon-btn00.png]]>
    スタイルシート 2014-07-31T07:17:34+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-396.html 普通の縦メニューをレスポンシブデザインに対応させてみる レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。 <![CDATA[

    レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。

    vertical-menu-responsive1.png]]>
    スタイルシート 2014-07-05T08:55:26+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-395.html レスポンシブなウェブデザインをする際に役立ちそうなこと(主にスマホ対応)のまとめ レスポンシブにデザインしたサイトを作った際に役立ったこと(主にスマホ対応)を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 <![CDATA[

    レスポンシブにデザインしたサイトを作った際に役立ったこと(主にスマホ対応)を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。

    responsive-design-tips.png]]>
    ウェブデザイン 2014-06-15T08:05:13+09:00 ajaxjp014 FC2-BLOG
    http://weboook.blog22.fc2.com/blog-entry-394.html フォームから簡単に登録申請できる国産Webギャラリーサイトのまとめ せっかくサイトを作ったのでギャラリーサイトに登録申請をおこなおうと、せっせと探してみました。この手のまとめはよくありますが、今回は恐らく更新中で簡単に登録できるものを中心に集めてみました。 <![CDATA[

    せっかくサイトを作ったのでギャラリーサイトに登録申請をおこなおうと、せっせと探してみました。この手のまとめはよくありますが、今回は恐らく更新中で簡単に登録できるものを中心に集めてみました。

    webGallery0.png]]>
    お役立ちサイト 2014-05-15T07:02:12+09:00 ajaxjp014 FC2-BLOG