擬似クラスと間接セレクタを使って汎用性のある角丸テーブル | バシャログ。
洗濯すると雨の降るhakoishiです。 今回は汎用的に使える角丸テーブルのソースをご紹介。 border-radiusに合わせて、IE9以上の対応です。 サンプル まずはサンプル。 この5種類です。 theadなし、tbody左行がth。 theadあり。tbodyはthなし。 theadあり。tbody左行がth。 thead複数行、セル結合あり。tbody左行がth。 theadあり。tbody左行がth。tfootあり。 サンプルページ 擬似クラスと間接セレクタを使って汎用性のある角丸テーブル お約束 tbodyを必ず入れる tfootを入れる場合、tbodyの上部へ 上記の点だけ注意すれば、テーブルや内部のセルへのクラスの付与は不要です。 CSS table { /* 上、左にborder */ width: 100%; border-collapse: separate; /*
[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス
こんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス＆ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS＆画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…！」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="
![[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4114ba944fbc4ad7dce3f5e3929f4d782427892b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fe7be25fbc0824211d3f10797e07eeb33.png)
classのclassを開催していただいて、勉強してきた！！ - Shinichi Nishikawa's
こんにちは。 「8時間耐久！ class の class」というイベントに参加してきました。 先生は、 @yando さん。以前にも8時間耐久CakePHP2勉強会で基礎を叩きこまれてきた！(ちなみに9時間だった！！大阪と福岡でもあるらしい)というイベントでお世話になりましたし、同じくオープンソースカフェで開かれたコードレビューの会でもお世話になりました。 安藤さんは、 Cakeイベントで僕のphp力を把握 同じくコードレビューでころぐのソースの一部を見て、さらに把握 僕が先生役をやらせてもらったWordPressのテーマ作成を見てさらに把握 という流れの中で、僕の実力と次に覚えるといい内容を教えて頂きました。 というか、スライドごとにでてくる小さな問題とか、完全に僕が分かっていないところを突いてくるなど、僕の頭の中が分かっちゃってるのかな。。 クラスと僕 半年以上前から、クラスの勉強しな
本格的に制作にSassを導入してみたわけだが
Webサイト制作にSassを本格的に導入してみました。単に便利なだけではない色々メリットがあるということに気づいたので、かんたんにまとめてみます。 CSSでは不可能な入れ子構造で書けるのは、思ったより便利 Sassでは、CSSではできない入れ子構造での記述が可能です。たとえば、公式サイトの例ですが… table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } このSassファイルをコンパイルしてCSSファイルに変換すると、このようになります。 table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif;
2013年に活用したいTwitter Bootstrapプラグイン 17個まとめ « Webの小ネタ
今、Twitter BootstrapがWEBプログラマの間で人気です。 Twitter Bootstrapとは、ツイッター社が提供しているCSSフレームワークで、Webデザインが得意ではない人でも、それっぽいデザインが簡単に作れてしまう素晴らしいツールです。 Twitter Bootstrapをさらに簡単に利用するためのプラグインを17個ほど紹介します。 WordPress Twitter Bootstrap CSS WordPressサイトで最新のTwitter Bootstrapを利用することができます。ウェブサイトのデザインと機能性を重視したハイクオリティなブログを構築できます。 »WordPress Twitter Bootstrap CSS JBOOTSTRAP Joomla2.5にTwitterブートストラップ機能を統合することができます。 »JBOOTSTRAP Twit
レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 | hijiriworld Web
Posted on: 2012/06/22 レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 Bootstrapの概要 Bootstrap とは、Twitter 社が提供する CSS フレームワークです。 実体は CSS と JavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろな UI を作ることができます。 Bootstrap では LESS を採用しており、スタイルをカスタマイズして CSS をコンパイルすることができます。 LESS についてはこちら。 実際には、コンパイルされた CSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。 もちろん、コンパイルされた CSS を編集することもできます。 Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ
9選 おそろしく便利！個人的に使っているオススメのChromeアドオン – 10 Useful Chrome Addons | Stronghold Archive
9選 おそろしく便利！個人的に使っているオススメのChromeアドオン – 10 Useful Chrome Addons Chromeユーザーの皆さんこんにちは。Toshikuraです。今回のTipsは【9選 おそろしく便利！個人的に使っているオススメのChromeアドオン】です。すこしイリーガル寄りのaddonも含みますが…手放せない機能ばかりです。 2. Screen Capture Awesome Screenshotと同じスクリーンショットを撮影するアドオンです。スクリーンショット系は動作しなくなる事が有るので上記と併せてScreen Captureを入れています。 3. Window Resizer ウィンドウサイズを1280*1024や1024*768等、標準的な画面サイズへ自動で調整してくれるアドオンです。レスポンシブデザインを求められる昨今では欠かせないアドオンかと思いま
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
CSS3 で二重丸を作る｜TechRacho by BPS株式会社
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
突き抜けたWordPressのプロって、こんな感じ！？を7個挙げてみました！
突き抜けたWordPressのプロって、こんな感じ！？を7個挙げてみました！ 2013.06.13 | WordPress 前回、WordPressのプロになるなら最低限知っておきたい10＋1個の知識、挙げてみますね！という記事を書いたらですね、「セキュリティの話がないじゃんか！」というツッコミを頂きまして、ほんと正直ごめんなさい。忘れてましたごめんなさい！ あと、プロってなんだよｗ？みたいなお話もありましたので、せっかくなので、だったら本当の意味で突き抜けたプロってこんな感じなのかな、というのをまとめてみました。 これができたら理想ですよね。 その1. セキュリティめっちゃ頑張れる ユーザやブラウザから色んなデータを受け取ってたりする場合、ちゃんとエスケープ／サニタイズしたりするのはもちろん、後述のWordPressのバージョンを常に追ってお客さんのサイトもアップデートしていたり。 OS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
oukasei.com
マークアップにValidateルールを定義してフォームバリデーションできるjQueryプラグイン「Ketchup」:phpspot開発日誌