Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
第1回 今どきのWebサイト制作にはBootstrapがおすすめ！ | gihyo.jp
本連載では、HTML5やCSSの基礎を理解している方へ向けて、Bootstrapの特徴や実際の使い方を解説していきます。レスポンシブデザインは聞いたことがあるけれども「実務採用したことがない」「仕方がわからない！」という方。そんな「あなた」が1つ上のステージへ進むためのパスポートです。Bootstrapを使うことで簡単にレスポンシブサイトを制作できるようになります。 「スマホ専用サイトは使いづらい！予算が掛かる」は古い 昨年頃からスマホ専用サイトの「必要説」が揺らいでいます。その背景には、従来のPCサイト用のデータから必要最低限のデータを抽出した形で、全く別サイトとしてスマホ専用サイトが設計されているため、「UIが変わりすぎてわからない」「情報量が少ないなどの欠点が目立ちユーザーに受け入れらない」といった状況があるからです。 参考資料： 8割以上が「スマートフォン専用サイト不要」と回
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
[意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Design
スマホコーディングただいまガシガシ中の@cappeeです。 今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。 今回は、display:table-cell をご紹介します。 なかなか使えないと言った理由はIE8以降からの対応になるからです。 ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。 display:table-cell で要素が簡単に横並び display:table-cell とは、要素をテーブルのように表現することができるプロパティです。 親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。 display:table-cell を指定した要素はテーブルのように高さが同じになります。 また、floatを使っていな
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマートフォン向けのWebアプリを作ろう
この特集では、現在利用者が急増している2大スマートフォン、iPhoneおよびAndroid端末向けのアプリケーションを作ります。と言っても、それぞれのOSにネイティブなアプリケーションではなく、iPhone/Androidが搭載するWebブラウザの上で動くWebアプリケーションです。具体的には、HTMLおよびCSSの最新バージョンであるHTML5とCSS3を使ってiPhone/Androidアプリケーションを作成する方法、およびその際のポイントを説明します＊1。 iPhone/AndroidならHTML5とCSS3でアプリを作れる Webアプリケーションは、OSやプラットフォームに依存しないと言われています。確かに、Webアプリケーションの動作や見栄えは、OSやプラットフォームにはあまり依存しません。しかし、Webブラウザの種類やバージョンに強く依存します。異なるWebブラウザで同じように
画面下部にフッター表示-CSS TIPS
動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、ス
CSS-EBLOG - (X)HTML+CSS/JavaScript Tips site.
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Lucky bag::blog :フッタを常に下部に配置するサンプル
コンテンツ内容以上にウィンドウを広げても、常にフッタが下部に配置されます。 ウィンドウを縮めると、フッタはコンテンツ部分の下部で止まり、それ以上移動しません。
あのじ (五反田/居酒屋)
リクエスト予約希望条件をお店に申し込み、お店からの確定の連絡をもって、予約が成立します。 1 予約の申し込み ご希望の条件を当サイトよりご入力ください。 2 お店からのメール ご予約が承れるか、お店からの返信メールが届きます。 3 お店へ来店 予約が確定した場合、そのままお店へお越しください。
CSS の z-index について整理してみる | HTML + CSS | かたつむりくんのWWW
今日は CSS Nite in Ginza, Vol.31に行ってきます。テーマは「CSSレイアウト：IE 6対応のかんどころ／小林 信次（まぼろし）」ということで、以前「CSS Nite ビギナーズに参加した感想とか要望とか」で書いた「CSS Nite への要望っぽいこと」が実現した感じで、すごく楽しみです。 僕は Web制作の現場にいないので、実務経験が少ないです。ですので、日頃、Web 制作を仕事としてやっている人が、サッと解決できちゃうようなことにもハマったりします。 そういった点を補うには、今日の CSS nite のようなテーマはすごくありがたいです。 さて、前置きが長くなりましたが、今日は以前ひっかかった IE6 の z-index の解釈について、改めて整理してみました。 どんなシーンでハマったか このブログもそうですが、最近ページ上部にグローバルナビゲーションを配置し、そ
CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sakurachiro.com
http://www.stylish-style.com/csstec/basic/b-table-deco.html
http://www.thefind.com/search?query=bag
http://yaplog.jp/matsu-you/archive/871