Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
:before 疑似要素を使ってテキストを画像に置換 - lucky bag
Image Replacement （背景画像置換）ネタ再び。我ながらしつこいネタだけどキニシナーイ。とりあえず今回は、:before 疑似要素を使って、テキストを画像に置換してみるっす。 残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。おそらく IE7 ではサポートされると思うんで、IE7 がそこそこ広まったうえで、それ以前の IE をバッサリ切り捨てる潔さがあれば、意外と使える方法かもしれない。 :before 疑似要素によるImage Replacement の仕組み :before 疑似要素と content プロパティを使うことによって、当該要素の前に生成内容を挿入することが可能になる。今回のImage Replacement （背景画像置換）の仕組みとしては、
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
Creative Web Typography Styles | Codrops
Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js. With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will a
5 Useful CSS Tricks for Responsive Design - Web Designer Wall
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative valu
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
CSS Properties Index · Jens Oliver Meiert
A list of all CSS properties and their initial values. Note announcement and comments as well as the complementary HTML elements index. The “living CSS” part of this index (“CSS 3/CSS”) is not being maintained at the moment (as of April 2019). For the latest in CSS, consider W3C’s properties list. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Property ↓ CSS 1 CSS 2 CSS 2.1/2.2 CSS 3/CSS Ini
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考えるウェブデザインでこれは気をつけたいの35のポイントデザインQRコードの作り方非デザイナーのためのデザイン
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ブログをリデザインしました。<br>ついでにデザインについても考えてみた。
ブログをリデザインしました。 ついでにデザインについても考えてみた。 2011-03-28 今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。リニューアルしたポイントをまとめてみます。 リニューアル前のデザイン よくある感じのデザインです。ポイントは以下の通り。 2カラム 赤、白、黒が基本色 1カラムにした理由。 ブログサイトでよく見かけるレイアウトは2カラムや3カラムのレイアウトが非常に多いように思えます。 また私自身も2カラム、3カラムのブログ構築しかしてきませんでした。 何が大切か？ このブログはまだ日が浅いですが、制作会社時代の社内ブログを含めれば、3, 4年ぐらいブログを書いています。 有難いことに最近は特に、はてなブログのホットエントリーに入ることもあり、何が一番大切かと言われれば、私の場合コンテンツが一番大切だと思います。 コンテンツがなければブログは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queries
CSS HappyLife for Smart Phone
http://www.designwalker.com/2010/05/css3.html
jQuery Masonry › Primer
CSS 20 stunning examples of CSS 3D transforms