CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
いまさら聞けない「Twitter Bootstrap」とは？ (1/2)
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。 そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。 この連載では、特にスタートアップで注目を浴びているフロントエンドツール「Twitter Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。まずはTwitter Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。 Twitter Bootstrapの特徴 Twitter Bootstrapは、米ツイッ
Building a Custom HTML5 Audio Player with jQuery « The Particle Lab
We recently built an HTML5 audio player for Tim Van Damme's The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we'll run through the code to explain how it works, covering a few caveats along the way. Here's the player interface, and the mar
BonBon Buttons - Sweet CSS3 buttons
Button Search Stars Home Play Share Love Quit Upload RSS There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. Markup I get a real kick out of trying to keep the markup minimal, so I'm really
【レポート】XHTML5としても使えるHTML5の記述方法 | エンタープライズ | マイコミジャーナル
A vocabulary and associated APIs for HTML and XHTML WHATWGブログにXHTML5 in a nutshellというタイトルのもと興味深い内容が紹介されている。HTML5をXHTMLとしても利用できるように制作するにはどうすればいいかを簡単にまとめたもので、将来的にはXHTML5と呼ばれるものになるであろうXHTMLの存在に軽く触れるものとしても参考になる。 HTML5でページを制作する場合、XHTML5で策定されるであろう機能とHTML5の機能と双方ともにサポートしている機能のみを採用すれば、HTML5としてもXHTML5としても利用できるようになる。XHTML5としても使えるようにすることの利点はHTML5をXMLベース技術として拡張しやすくなる点にある。XHTML5 in a nutshellの説明によれば、HTML5としてもXH
【レビュー】ここまでできるCSS3コンテスト制作物まとめ | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページの制作方法として、コンテンツは論理構造が整理されたHTMLに、振る舞いはJavaScriptに、デザイン表現はCSSで実施するという方法が普及している。現在策定が進められているHTML5とCSS3はこの方法をさらに強化することになる。たとえばCSS3はCSSで表現できる能力を大幅に引きあげる。 先進的なWebデザインやデザインテクニックを取り上げることが多いSmashing Magazineは先月、SSDやヘッドフォンなどを賞金としてCSS3デザインコンテストを開催していた。今回、その結果が発表された。CSS3 Design Contest Resultsにコンテスト応募作品が紹介されている
EExt Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
Ext CoreはダイナミックなWebサイト構築に最適な軽量かつ高機能なクロスブラウザー対応のJavaScriptライブラリです。その特徴は： ファイルサイズがコンパクトな約25kb (ext-core.jsをgzip圧縮した場合) 柔軟かつ利用しやすいオープンソースライセンスのMITライセンス Ext開発メンバーにより執筆された体系的かつ網羅的な75ページのマニュアル これまでのExt JSを同じ使い慣れた直感的なAPI Ext JS 2.2 Ext JSはリッチインターネットアプリケーション開発のためのクロスブラウザ対応JavaScriptライブラリです。 高性能でカスタマイズ可能なユーザーインターフェイス 優れた設計、文書が豊富、拡張性の高いコンポーネントモデル 商用ランセンスとオープンソースライセンスが利用できます Ext JS 3.0とExt GWT 2.0が
【レビュー】マウス操作だけでCSS3対応ボタンを自在に作成! その名も"Button Maker" | エンタープライズ | マイコミジャーナル
意外と面倒なボタン作成も"Button Maker"を使えば解決!? WebアプリケーションやWebサイトを作成するにあたって、なにかと頻出するボタン。特別な意味をもたせるボタンには、ちょこっとアクセントをつけたいところ。実際に作成する場合 スタイルシートを編集 → Webブラウザで確認を繰り返す Firebug等のデバッグツールを使い、オンザフライでスタイルシートを調整 CSS3に対応したWebブラウザ/デバッグツールでデザイン、画像ボタンとして保存/利用 (参考: CSSグラデーションを使ってクールなボタンをつくる方法) といった方法があると思う。これらツールを使用しても、数字の微調整を繰り返すのはちょっと手間がかかる作業だ。ここでは、よりサックリとボタンを作る方法のひとつとしてButton Makerを紹介したい。 Button MakerはCSS-TRICKSが公開しているボタン作
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation
Warning: This isn't going to work in any currently available version of Internet Explorer* or many older browsers. The two clocks below are just HTML. There are no Adobe Flash files or my beloved <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform proper
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010
htmlタグの略と意味 ｜ 副業するサラリーマン
何度もhtmlタグを使っていると暗記してしまいますが、できたらそれぞれのタグの意味を理解したほうが使い勝手が良いかもしれません。bodyやclassなどの意味がわかりやすいものは省いて、使用頻度の高いタグを並べてみました。 要素略語和英
HTML Slidy (12)
HTML Slidy: Slide Shows in XHTML You can now create accessible slide shows with ease Works across browsers and is operated like PowerPoint Advance to next slide with mouse click Move forward/backward between slides with space bar, Pg Up and Pg Dn keys Home key for first slide, End key for last slide Function F11 to go full screen and back The "F" key toggles the display of the footer The "A" key t
S5: An Introduction
What Is S5? It's a Simple Standards-based Slide Show System One XHTML document provides all of the slide show's content CSS handles the layout and look of the slides JavaScript handles the dynamic aspects of the show That's all there is to it! Operatic Origins Opera 4 introduced Opera Show, a projection-mode style sheet technology Allows a single XHTML document to be turned into a PowerPoint-like
XHTML + CSS + JavaScriptによるスライドショーシステム
XHTML版スライドとは CSSとJavaScriptによる疑似スライドシステム 1つのXHTMLファイルを、div要素あるいは見出し要素単位で複数のスライドに見立てる。 CSSで1つのスライドブロックのみを表示（他はdisplay:none）。 クリックやキー操作イベントでJavaScriptを起動し、表示するスライドブロックを切り替え。 様々なXHTMLスライドシステムが存在するが、基本的な考え方は同じ。 XHTML版スライドのメリット 1つのファイルにまとまってコンパクトで扱いやすい。 適切に作ればCSS、JavaScriptが使えない環境でも通常のウェブページとして閲覧可能。 パワーポイントなどの専用アプリケーションが不要で、どこでもプレゼンテーションできる。 ウェブアプリケーションのデモをするときに、そのままブラウザ内でシームレスに操作できる。 アウトラインプロセッサの出力などの
W3C、「HTML Device」の草案作りを開始
ウェブサイト構築に使用される言語の標準化を担うWorld Wide Web Consortium（W3C）は、ウェブカムに直接インターフェースを提供する技術への取り組みに着手した。 W3Cは、ハイパーテキストマークアップ言語（HTML）の仕様に「HTML Device」を追加する作業を開始した。米国時間12月11日時点での仕様ドラフトによると、「このデバイス要素はデバイスセレクタを表し、ユーザーはこれを使って、ビデオカメラなどのデバイスに、ページへのアクセスを許可できる」という。 この動きは、ウェブ標準の範囲がもう1段階拡大することを示すものだ。ウェブ標準の唱道者たちは、静的なウェブページだけでなく、インタラクティブなウェブアプリケーションについても、ウェブ標準を基盤にしようとしている。ウェブアプリの基盤をウェブ標準にすると、PC上でアプリケーションがネイティブに動作しているハードウェアに
IE6以外のブラウザを薦めるポスターを作成するHey IT!とIE6対策のcssハックとかjsとかのまとめ
面白いなぁと思ったのでご紹介。 Web製作者の悩みどころのIE6の 利用をそろそろやめよう！といった内容の PDFファイルのポスターをオンライン で作成出来るジェネレーターです。 またかという感じを受ける方も多そうですが。 かなり困り者のIE6ですが、未だに利用者がいるのも事実。そんなIE6の利用をそろそろやめよう、と訴えかけるポスターをオンライン上で作成できます。IE6対策のまとめは下のほうに。 「寝てんの？そろそろ起きようよ！」みたいな嫌味交じりにIE6から別のセキュアなブラウザを薦めます。それだけIE6は昔のブラウザだと言う事ですね。 【動画】正しい使い方 このようにゲリラ的に行います。ストッキングかぶってるのに顔バレバレｗ PSDも無料配布ジェネレーターは日本語だと文字化けするのですが、PSDファイルも無料で配布されているので日本で作るならPSDを編集して作る事になります。以下のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト