こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea
![[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d18025a197b1a2ecd8f77a50f8ed320ab20859/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015093001.png)
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
style.cssなどにスタイルを定義する場合、同じような名前を持つCSSセレクタをまとめて定義するため、ワイルドカードや正規表現を使いたくなる場面があります。 たとえば、WordPressで画面に表示するアイキャッチ画像のスタイルを変更する場合を考えてみましょう。 スタイルを適用するセレクタを決めるため、HTMLソースを見てアイキャッチ画像に付加されたclass属性「attachment-post-thumbnail」を参考に、次のようなスタイルを定義するかもしれません。 img.attachment-post-thumbnail { border-radius:25px; } 表示イメージは次のようになります。 アイキャッチ画像の角を丸くする アイキャッチ画像(1)のスタイルだけが変更され、投稿内の画像(2)にはスタイル変更は適用されません。 これで良いような気がしますが、アイキャッチ
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; body { font-family: "メイリオ",meiryo; } .floatcontainer:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .floatcontainer { display: inline-block; } /* Hides from IE Mac */ * html .floatcontainer {height: 1%;} .floatcontainer { display:block; } /* End Hack */ .social_b
Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit. In Webkit, filters can be applied to hw accelerated content ( e.g. img { transform: translateZ(0); } ). Support: Chrome 18.0.976.0, Webkit nightly -webkit-filter: none; blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity reset Animations: blur grayscale
jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /* 110131 */ 子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました。 親要素 thisの親要素を取得する。 [javascript toolbar="true"]$(this).parent().css[/javascript] 参：jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く parentのカッコを忘れてて、子一時間悩むとかもう止めたい… 子要素 thisの子要素（ここでは<ul>）を取得する。 [javascript]$(this).children(“ul”)[/javascript] $(“ul”,this).css →これ、間違い（補足は後述） $(this).find(“ul”) →これも、間違い（補足は後述
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
