jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15 - NxWorld
年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。 レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型（垂直）タイプだけでなく横型（水平）で見せるタイプもあります。 jQuery Timelinr 縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーのような見栄えでタイムラインを実装できます。 スライドのオート機能や各アニメーション速度の設定、「prev」「next」のナビ機能などの設定もいろいろと用意されています。 Dynamic Timeline レスポンシブ対応もされているjQueryプラグインで、こちらも縦型・横型の両タイプが用意されており、ビューサイズ指定で通常は横型のものをスマートフォンでは縦型に見せるなども可能です。 他にもコン
手書き風デザインと相性良さそうなフリーフォント 50 - NxWorld
好みなものや気になるものを見つけてはメモしていたのが結構溜まってきたので、普段からよく利用させてもらっているのも含めて自分の備忘録用でまとめました。 いずれも手書き風デザインに相性が良さそうなフリーフォントで、この手のタイプの中では有名なものから割と新しいものまで和文・欧文それぞれ25種類ずつの全50種類です。 女性や子供が書いたような特徴的なものや可愛らしいタイプのもの、チョークや鉛筆で書かれたようなものまで様々なタイプがあります。 紹介しているフォントは、いずれも利用規約を守れば基本的にフリーで使用することができ、特に和文フォントに関しては全て個人・商用問わず無料で使用できます。 ただ、あくまでこのエントリー公開時の情報ということと中には無料で商用利用可能でも作者に連絡する必要があるフォントもあるので、使用する際はライセンス等を各自で再度確認してください。 紹介しているフォントを使用す
WordPress：この記事好き♡を簡単に実装できるプラグイン「ZillaLikes」 - NxWorld
いつか使う機会があるかもしれないからと触ったついでに備忘録兼ねて紹介します。 「ZillaLikes」は簡単に説明すると、Facebookのいいねのようなものを独自で実装できるWordPressのプラグインで、このブログにも実験的に設置してみました。 現在は設置していません。 今では多くの人がTwitterやFacebookなどのSNSアカウントを持っていると思いますが、もちろんそれらのアカウントを持っていない人もいるでしょうし、持っているとしても何らかの理由で「いいね」などをできないという人もいるかと思います。 あとは、「いいね」とか「役に立った」とは思ったけど、わざわざ自分のSNSで拡散するほどでもないとかしたくないとか..。 今回紹介する「ZillaLikes」はSNSなどを使うものではなく、クリックしてもらうと単純にカウントが増えていく、そのサイト独自のいいねボタンみたいなものを実
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年気になったハイクオリティなデザインUIキット − 2014 - NxWorld