背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
WordPress：カスタマイズするなら覚えておきたい条件分岐について - NxWorld
WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し
使いやすくて高機能なものが多数！スライダー実装時に便利なプラグインやチュートリアルまとめ - NxWorld
実際に使用して良かったものも含め、スライダー系のスクリプトやチュートリアルで覚えておきたいと思ってメモしてたのが溜まってきたので備忘録兼ねてまとめました。 とにかく高機能なものから動きがユニークなものまで様々なタイプがあり、ほとんどが最近実装する機会が多いと思うレスポンシブやタッチ・スワイプといった動きにも対応しています。 Slider Pro プラグイン名にProとついているのでパッと見は有料かと思うのですが、無料で使用できるjQueryプラグインです。 とにかく高機能でレスポンシブやタッチ・スワイプといったものはもちろん、下記のように様々な設定や機能が用意されています。 modular architecture responsive touch-swipe CSS3 transitions animated layers (and static) infinite scrolling
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
リンク先や拡張子ごとにアイコンを表示する方法 - NxWorld
PDFの場合はPDFアイコン、メーラーが起動する場合はメールアイコンなどのように、各リンク先の種類に応じてアイコンを表示させる方法を紹介します。 個人的に普通のリンクだと思ってクリックしたら突然PDFが開いたり、メーラーが起動したりでイライラしたことが何度かあったので、ユーザーに同じような思いをさせないためにもこういう細かいところにも気を配りたいですね。 HTMLについて ここでは基本的に下記のようなHTMLを使用する想定になっています。 <!-- 通常のリンク --> <a href="http://www.example.com">http://www.example.com</a> <!-- mailto --> <a href="mailto:example@example.xxx.com">example@example.xxx.com</a> <!-- Excel --> <a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld