arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[jQuery]スルスルっとトップへ戻るボタンを設置しよう

今回は、スクロールするとふわっと表示されてクリックするとスルスルっとトップまで戻るボタンについて書きます。このページにも実装されていますが、スクロール量が多くなりがちなページには有効な機能かもしれません。意外と簡単?に実装できますので、レスポンシブ対応のページを作成中であれば、もしかしたら参考になるかも…

続きを読む

wow.jsとAnimate.cssでスクロール連動アニメーション

今回は有名すぎるスクリプトでスクロール連動アニメーションを作ります。私も最初このスクロール連動でアニメーションをするサイトを見て頭の中が「???」となったものでしたが、意外と簡単に実装できますし、効果的に画像や文章を印象付けることができます。とにかくかっこいい、クールの一言です。

続きを読む

[Illustrator]曲線の矢印を作ろう!

ブログの説明に画像を使うことがあるのですが、その際に矢印を使います。Photoshopでも矢印は作れますが、私が下手くそなせいかイマイチな出来になってしまうので、さっと綺麗な曲線の矢印が描けないかと調べたら、一発で見つかりましたので、私も記事通りに作ってみました。かなり簡単なのではないかと思います。

続きを読む

[jQuery]fullPage.jsでパララックスサイトを作ろう

2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。
今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。

続きを読む

[jQuery]簡単!スライドショーを作ろう!!

Webの世界は分進秒歩くらいの勢いで変わっていきますが、そのなかでも未だによく使われるみんな大好き(?)スライドショーについて今回は書きたいと思います。幾つかの画像を用意して時間遷移で見せていくのですが、スライドショー自体に長い歴史があるようで様々なやり方があります。今回は比較的簡単なものを紹介します。

続きを読む

[Wordpress]お問い合わせフォームを設置しよう

ずいぶん時間が空いてしまいましたが、Wordpressにお問い合わせフォームを設置する手順を説明します。お問い合わせフォームはWordpressのメニューでは定番のコンテンツです。プロフィールページを作成したことのある方はご存知かもしれませんが、固定ページを使います。プラグインを使って簡単に設置しましょう。

続きを読む

[CSS]画像と文字を重ねてみよう〜position編vol.2

前回はCSSの中でも重要なpositionに関する記事を書きました。大体使いどころが決まっているということが頭に入っていると、混乱せずにCSSを扱えるようになってくるのではと考えています。今回は前回を踏まえて画像の上に文字を重ねる、そして意外に使う場面の多い重なり順についても書いてみます。

続きを読む

[CSS]「なんとなく」から「確実」に ~position編

コードを書いていて「これをこうしたい」と人様のコードをなぞって思い通りにうまくいってしまうと「なぜこれはこういう動きになるのだろう?」と考察することを忘れてしまいがちです(私もやらかします)。今回書くことになるCSSのプロパティであるpositionはdisplayと共にレイアウトでは重要なものなので、この際完璧にしておきましょう。

続きを読む

PAGE TOP