Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
Bootstrapのカスタマイズが簡単にできてしまうオンラインツール -Bootstrap Live Customizer | コリス
Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
スマートフォンサイト構築にもHTML5用のreset.css | helog - Webに悩む人のネタ帳
reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。 Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。 少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。 YUI 3: CSS Reset 今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、
[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート
Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr
[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
[CSS]デスクトップ・スマートフォン用のエラスティックグリッドシステム -Columnal
豊富なレイアウトオプション、柔軟なカスタマイズ、ワイヤーフレーム用の素材など至れり尽くせり、エラスティックグリッドを採用したスタイルシートのグリッドシステムを紹介します。 Columnal A responsive CSS grid system helping desktop and mobile browsers play nicely together. [ad#ad-2] Columnalの特徴 ページの構造がどのように構築されているのかのデバッグ用CSS 豊富なレイアウトオプション（サブカラム） コンテンツの前後にカラムを接続可能 垂直方向のスペース用のスタイル グリッドのシステムのPDF ワイヤーフレームのテンプレート Columnalのデモ グリッドはエラスティックで、サイズは1140pxです。IE6-8では固定されます。
[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css
ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用（要JavaScript） スタイルシートファイルをページに適用 「holmes.min.css」を外部スタイルシートとして適用し、bodyにclass「holmes-debug」を加えます。 HTML <link rel="stylesheet" href="../" media="screen,projection,print,handheld" type="text/css" /> <body class="hol
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index