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

[Bootstrap]Justified navのハンバーガーボタンを非・・・

ささっとサイトを作りたい時に、自分で作ったスニペットかBootstrapなどのフレームワークが現時点での私の選択肢になります。先日Bootstrap4のJustified navテンプレートを使ってデモ画面を作成した時にCSSを少しいじくりました。簡単なことなのですが、備忘録として残しておきます。

続きを読む

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

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

続きを読む

[Wordpress]パンくずリストを設置しよう

久しぶりにWordpressの記事です。最近ようやくSEOについて少しづつ勉強し始めたので、その一環としてパンくずリストを設置しました。アクセシビリティの面からも必要なパーツですし、コピペでしたら難易度もぐっと低くなります。また、Wordpressの仕組みを勉強するための資料として記録しておきます。

続きを読む

[CSS]CSSグリッドレイアウト基本の「き」

CSSグリッドレイアウトは新しい(といっても、昨年には勧告準備ができていた)レイアウトモジュールですが、今年の春に大きなシェアを占めるブラウザ全てにおいて実装が可能となったので、私も少しずつ学習していこうと思います。最近CSS周辺は覚えることが多いですが、まずは基本からやっていきましょう。

続きを読む

[CSS]Flexboxでハンバーガーメニューを作ろう

プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。

続きを読む

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

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

続きを読む

[jQuery]プラグインなしでタブメニュー

画像を多く表示させたい場合にカルーセル(スライドショー)を使いますが、他にも同じページでコンテンツを複数表示させたい時にはタブメニューも有効です。Bootstrapやプラグインなどでも多彩なタブメニューが実装できるのですが、今回はプラグインを使わずにjQueryを使って実装できるタブメニューを作ってみました。

続きを読む

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

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

続きを読む

[CSS]画像を暗くしてみる

このブログでもちょくちょくPhotoshopを使わずともCSSで色を変えられる…ということを書いていますが、実にいろいろなやり方があります。今回は画像を暗くするというテーマです。可視性を上げるために、暗くした背景画像に白い文字を重ねるという手法をよく見かけますが、今回はその方法について書きたいと思います。

続きを読む

PAGE TOP