サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、CSS3になるまでの歴史、代表的な3つのCSS3モジュール、実装上の3つの注意点、OS／機種依存事例6選などを解説します。 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「JavaScriptのスマホ対応時に知らないと損する16のコト」では、スマートフォン向けWebサイトで利用されるJavaScriptの役割や代表的ライブラリ、実装上の注意点をご紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）」の開発・販売や
Send feedback SearchUI Components Stay organized with collections Save and categorize content based on your preferences. outlined_flag This page provides instructions on how to customize the appearance of your search box and results for a Programmable Search Engine. Customization can be done through the control panel or by using the XML context file, with XML being better suited for managing many
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1KbCSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
対応ブラウザはWindows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
The Dottoro Web Reference wascreated to promote the development of cross-browser web pages on all platforms. With this in view, Dottoro offers detailed language descriptions, browser support information, real life examples and wherenecessary, cross-browser solutions inCSS,HTML andJavaScript languages. We hope this will help youcreate modern and attractive websites. CompleteHTML,CSS and Jav
基本のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01（HTML部分） <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第1回：XHTMLの文書構造化とボックスモデル 著者：米倉 明男 公開日：2008/04/01（火） テーブルレイアウトとはHTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。 そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。 テーブルレイアウトとは、HTMLタグの1つである表組み<tab
サイズ・背景 width: ***; height: ***; ボックスの大きさを指定する max-width: ***; min-width: ***; ボックスの最大幅と最小幅を指定する max-height: ***; min-height: ***; ボックスの最大の高さと最小の高さを指定する background-color: ***; ボックスの背景色を指定する background-image: url(***); ボックスの背景に画像を使う background-repeat: ***; 背景画像の並び方を指定する background-position: ***; 背景画像の表示位置を指定する background-attachment: fixed; 背景画像をスクロールさせない background: ***; 背景の設定をひとまとめに行う マージン・パディング ma
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、GoogleChrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近はNetBeans IDE に落ち着いています。NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターはNetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後HTML/CSS/PHP などWebサイトのコーディングにはNetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
サンフランシスコ発--雑誌風のレイアウトツールをウェブパブリッシングにもたらそうとしているAdobe Systemsは米国時間5月9日夜、同社の提案するフォーマッティングテクノロジをウェブ開発者がテストできるよう、特別に設計されたブラウザのプロトタイプをリリースした。 「CSS Regions」と呼ばれるこのテクノロジを利用すると、プログラマーはマルチカラムレイアウトを作成したり、テキストを多角形型に配置したり、テキスト表示エリアの中心にオブジェクトを配置したりすることができる。そうしたテクノロジは印刷出版の世界では何年も前から存在しているが、一般的にウェブからは欠落していた。雑誌や新聞がデジタルパブリッシング、とりわけAppleの「iPad」のようなタブレット上でのデジタルパブリッシングへ移行する中で、そうしたテクノロジの不在はますます顕著になってきている。 このフォーマッティング機能が
ウェブ上には様々な便利ツールがあります。以前紹介した『CSS3.0Maker』もそうですが、わずか数秒で希望のCSSが出来上がればそれに越した事はないですよね。 今回はこうしたジェネレータを実際に使用した結果、使いやすくてわかりやすい物をまとめてみました。 便利なCSSジェネレータ１０選 目次 使われているclassやIDを抽出してCSSの開始を楽にするclassやidのバックグラウンドのCSSを作成HTMLのリストをいじるだけでサイトマップが完成してしまうCSSCSSでグラデーションカラーを書き出すジェネレータhtml5対応のCSSレイアウトジェネレータCSSを絞るCSSダイエットジェネレータメニューCSSジェネレータメニューCSSジェネレータ２タブ作成ジェネレータ丸角CSSジェネレータ 使われているclassやIDを抽出してCSSの開始を楽にする PrimerCSS ちょっと何いってん
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、ｃｓｓのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 ｃｓｓもＤＬ（コ
2011年2月15日付 W3C 勧告候補 (Candidate Recommendation) この版: http://www.w3.org/TR/2011/CR-css3-background-20110215 最新版: http://www.w3.org/TR/css3-background/ 前の版: http://www.w3.org/TR/2010/WD-css3-background-20100612 Editor: Bert Bos (W3C) Elika J. Etemad (Invited Expert) Brad Kemper (Invited Expert) Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use r
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1.CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
![[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f1f4390ea5b2b558adfd9c349b9a080aae407daff%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fbashalog.c-brains.jp%252Fshared%252Fpublic%252Fimg%252Fcommon%252Ficon_ogp02.png&f=jpg&w=240)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
