10 Best Responsive HTML5 Frameworks
1. Twitter Bootstrap Bootstrap is a popular, modern front-end/UI development framework. It’s feature-packed and will have most of the things you’ll need for developing responsive sites and apps. Bootstrap has a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more. Bootstrap is well-documented, and this open source pro
CSS framework - Wikipedia
This article needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. Find sources: "CSS framework" – news · newspapers · books · scholar · JSTOR (February 2017) (Learn how and when to remove this template message) A CSS framework is a library allowing for easier, more standards-complian
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
レスポンシブWebデザインの基礎
組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼうAkiko Kurono
[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
jQueryを使った基本的な擬似フレーム | HOME ＞ 2011年の記事 - イイラボ(ek-labo)
以前から作成していた擬似フレームページ (frame-like pages)を、フレームを使わずに、スタイルシート (CSS)とJavaScriptライブラリであるjQueryを使用して実現する方法の紹介します。 縦横のフレーム分割が多数あるような構成のサイトも置き換え可能です。高機能版はこちら 擬似フレームとは どうすれば擬似フレームとなるか 各部のサイズと配置を決める HTMLを作成する スクリプト（JavaScript）を作成する # 擬似フレームとは 擬似フレームとは、「疑似フレーム」や「CSSフレーム」、「CSSフレーム」、「overflowフレーム」と呼ばれているものです。 一般に、frame要素を使ったページにおいては、以下のメリットとデメリットがあります。 メリット 本文部分とその他のメニュー部分などが連動してスクロールしない。 デメリット 個々のページをURLで紹介できな
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。
[HTML] <table id="table-01"> <tr> <th>MS 名</th> <th>パイロット</th> <th class="speech">台詞</th> </tr> <tr> <td>ザク II</td> <td>ジーン</td> <td>シャア少佐だって、戦場で勝って出世したんだ！</td> </tr> <tr class="even"> <td>グフ</td> <td>ラル</td> <td>ザクとは違うのだよ、ザクとは！</td> </tr> <tr> <td>アッガイ</td> <td>アカハナ</td> <td>大佐、イワノフのアッガイがやられました</td> </tr> <tr class="even"> <td>ゲルググ</td> <td>シャア</td> <td>ララァ、私を導いてくれ</td> </tr> </table> [CSS] 要所のみ掲
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
<input type="text">でEnterを押してもsubmitさせない方法【HTML, JavaScript】 - Programming Magic
<input type="text">でEnterを押すとsubmitされてしまうことがある。 これは便利なときもあるが、場合によっては不便になる。 Enterを押すとsubmitされるのは以下の3パターンがある。 1. Opera、Safariで、<input type="text">または<input type="password">がある場合 <form> <input type = "text" name = "text1"> <input type = "text" name = "text2"> </form> 2. IE、Firefoxで、<input type="text">または<input type="password">が１つ以上と、<input type="submit">または<input type="image">が１つ以上ある場合 <form> <input
【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは！？ - Web.fla
■DomLevel2でのキャンセル～addEventListenerの場合 DomLevel2の場合はイベントの設定をaddEventListenerを使用しますがその場合のキャンセル方法 ちなみにaddEventListenerはIE対応ではないので動作しません。 //myformというidを設定したフォームにsubmitイベントを設定 document.getElementById("myform").addEventListener("submit",checkform,false); function checkform(event){ ～省略～ // eventプロパティのpreventDefault()を実行することでsubmitのデフォルトをキャンセル event.preventDefault(); } 上記の例だとcheckform関数の引数にeventが設定されていますの
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
submitボタンのデフォルト設定を回避する
この場合、デフォルトボタンは「戻る」になる。 これは入力フォームが一つなので、例えばテキストボックスで間違えてEnterキーを2回押してしまってもそんなに被害はないと思う。 ただ次の場合はどうだろう？ Sample2 この場合、間違えてEnterを押してしまったら、入力途中だったフォーム情報が「戻る」ボタンを押した事になってしまい消えてしまう・・・なんて感じに。 単純な動作であれば（キー入力操作に慣れた人であれば）デフォルトボタンでEnterキーを押したらサーバに送信ってした方が楽なのかもしれない。 ただ複数の項目だったり、その画面アクションをしてしまう事で入力情報が消えるような場合、このデフォルトボタンの動作はまさに「小さな親切、大きな迷惑」だったりするのです。 （入力作業中の誤動作等も考えられるし・・・） で、色々調べてみた結果、対策としては、 １．影響のないボタンをデフォルトに設定す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホアプリのUIを再現できるCSSフレームワークまとめ
最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ
CSS3 Previews - CSS3 . Info
HugeDomains.com
CoolCoding.com is for sale | HugeDomains
http://www.designwalker.com/2009/04/wireframe-2.html
