よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
Radiobox.css - ラジオボタンに選択時のアニメーションを追加 MOONGIFT
フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。 今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。 Radiobox.cssの使い方 前半の6つです。派手なものもありますが、多くは小さく揺れる程度です。 後半。有機的にちょっと震えるのが小気味良いです。 Radiobox.cssは一つのアイディアですが、スマートフォンで使われているマテリアルデザインに似たものがあります。ユーザが自分の意図した動作になっているかどうか確認しやすくなるでしょう。 Radiobox.cssはスタイルシート製のオープンソース・ソフトウェア（MIT License）です。 Animated CSS3 radio inputs with - Rad
Dropify - ファイルアップロードを格好良く！ MOONGIFT
HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif
disabledなボタンのhoverのスタイルを無効にする方法
「type="submit"」や「type="button"」のinput要素、またはbutton要素などのボタンをdisabledに変更したときに、hoverのスタイルを無効にする方法を紹介します。 １．はじめに 次のようなinput要素のボタンがあります。 HTML <input name="send" type="submit" value="送信" /> これをdisabledに変更するとボタンが押せなくなるような表示に切り替わります。またクリックしても無反応です。 HTML <input name="send" type="submit" value="送信" disabled="disabled" /> が、ボタンに下記のようなスタイルを設定しているとします。 input { background-color: #0076bf; background-image: linear
Jquery UI Slider Pips - Simey.me
Getting Started Skip this if using Bower First off we're going to need to load the dependencies. This plugin requires jQuery and jQuery UI to function correctly. <!-- include the jQuery and jQuery UI scripts --> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <!-- plus a jQuery UI theme, here I use "flick" --> <
Googleの新API「reCAPTCHA」ではイメージをクリックするだけでボットでないことを証明でき文字入力は不要に
ウェブサイトにアクセスを試みるボットを遮断するために設置されている、画像で表示される文字を入力することでボットでないことを証明できる機能reCAPTCHAは多くのサイトで導入されていますが、いちいち文字入力するのは手間で、スマートフォンなどのモバイル端末ではめんどくさい作業でした。しかし、Googleが新たにクリック・タップだけでサクッとボットでないことを証明できるように進化させました。 recaptcha https://www.google.com/recaptcha/intro/index.html Google Online Security Blog: Are you a robot? Introducing “No CAPTCHA reCAPTCHA” http://googleonlinesecurity.blogspot.jp/2014/12/are-you-robot-i
input要素のplaceholderをフォーカス時に上にアニメーション付きで押し出すスクリプト・jQuery Label Better
ちょっとかわいかったので備忘録。placeholderとは別にテキストを用意し、inputにフォーカスした際にポンッと押し上げる、というスクリプトです。jQueryに依存します。 タイトルは語彙があります。プレースホルダーを、フォーカス時はラベルとして利用する、みたいな感じですが、フォーカス時に押し上げるテキストは別途カスタムデータ属性を設定します。 こんな感じ。一番右はplaceholder属性に書いたテキストとは別のテキストがでています。 $(".foo").label_better({ easing: "bounce" });セレクタを指定してエフェクトを設定。 <input type="text" class="foo" data-new-placeholder="bar" placeholder="hoge">上記ならplaceholderは「hoge」、フォーカス時に飛び出すテ
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
noUiSlider - JavaScript Range Slider | Refreshless.com
<div id="slider"></div> var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } }); npm install nouislider yarn add nouislider // When using a bundler such as Webpack, // include both noUiSlider and its stylesheet. // Either import the default: import noUiSlider from 'nouislider'; // Or the namespace: import * as n
Expandable Mobile Search Form - Web Designer Wall
Previously I wrote a tutorial on mobile navigation, today I’m going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form. View Demo Search Form The Purpose On mobile display, every pixel cou
画像を選択してテキストエリアなどにパスを挿入するjQueryプラグイン（CodeMirror対応）
Posted: 2012.06.29 / Category: javascript / Tag: jQuery 局地的にしか使用できませんが、管理画面などで画像一覧を表示させて選択するとテキストエリアにパスを挿入するプラグインです。 Code Mirrorというテキストエリアを快適にするプラグインに対応しています。 準備 画像を一覧表示するhtmlを作ります。 基本的にBootstrapなマークアップにしています。 media-list1.html <section id="media-list"> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th></th> <th>ID</th> <th>Title</th> <th>Image</th> </tr> </thead>
onclickイベントとjQueryのclickイベントを併用するときの注意
利用シーンはあまりないと思いますが、onclickイベントにjQueryのclickイベントを追加するときの注意点をまとめました。 次のようなレガシーな処理があると仮定します。 onclickイベントでsendというメソッドを呼び出し、フォームのチェック処理を行ったあとsubmit()を実行しています。 <script> function send() { // 既存のチェック処理など document.test.submit(); } </script> <form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;"> <input name="foo" id="foo" type="text" value="$foo" /> <input id="bar" type="butto
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
マウスジェスチャやGmailチェッカー、ページキャプチャなど効率化全部入りChrome拡張機能「Pig Toolbox」がすごい
About RSSで購読する Google Chromeをより便利にしようとChrome拡張機能をたくさん入れていると、どんどんメモリを食うようになってしまいますよね。 そういったことを防ぐために、拡張機能をグループ分けしたりするわけですが、いっその事、絶対に使うものはひとつにまとめてしまえと思うのですよね。 そこで今回は、絶対に使う機能がひとつの拡張機能まとめられたものをご紹介します。余談ですが、私はこの拡張機能でメモリの消費量をたいぶ抑えることに成功しました。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ブラウザを強化する拡張機能をひとつにまとめたChrome拡張機能「Pig Toolbox」 「Pig Toolbox」は、よく使われるGoogle Chromeの拡張機能をひとつの拡張機能
CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル
CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってCSS3アニメーション 「:disabled」を使ってCSS3アニメーション 「Media Queries」を使ってCSS3アニメーション 各スタイルシートについてのメモ 「:active」を使ってCSS3アニメーション 疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメ
jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする
jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 ちょっとサーバー移転作業もあるので適当な記事が日々続きますけど・・まもなく移転完了します。 Sampleサンプルです :hover使うのでIE6だけ色が変わりませんけど、チェックはクロスブラウザで可能です。 コード$(document).ready(function() { $('input[type=checkbox]').click(function() { var t = $(this).prop; if(t('checked')) t('checked', ''); else t('checked', 'checked'); }); $('ta
[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
Upload · Formstone
IDEA * IDEA
