商用利用可能なCSSテンプレート｜Htmlテンプレート
2007年1月。私がブログを始めた同じ月にミャンマーの青年が個人でも商用でも無料で使えるFreeFlashTemplateというサイトをオープンさせました。Flashのテンプレートを無料で提供というスタイルですね。 とても素晴らしいソースとして、結構使われた人も居るかもしれません。ある程度広告収入と言う方法で軌道に乗せたNetDNAは、その一年後2008年に、FreeCSSTemplateというサイトも同時に発足。 そして現在。総テンプレート数が335個。 改めてこのサイトを見ると、かなり優れたものが多いので、だいぶ前に紹介した気がしないでもないのですが（他のブログでみただけかも）、再度ご紹介したいなと思います。 とりあえず使う前の注意 個人、商用問わず利用可能です。作品を複製、頒布、展示、実演することができます。二次的著作物を作成することができます。本作品を営利目的で利用することができま
セルを結合する｜テーブルタグ講座
<!-- 結合前のタグ --> <table border="1"> <tr> <td>セルＡ</td> <td>セルＢ</td> </tr> <tr> <td>セルＣ</td> <td>セルＤ</td> </tr> </table> <!-- セルＡ・Ｂを結合 --> <table border="1"> <tr> <td colspan="2">セルＡＢ</td> </tr> <tr> <td>セルＣ</td> <td>セルＤ</td> </tr> </table> セルを横方向（行）に結合する場合はcolspan="数値"で指定します。 "数値"とは「結合したいセルの数」=「結合したい行数」と覚えるといいかも知れませんね。
CSS3で視認性の高いテーブルを作る
こんなに便利 :nth-child() 今回はCSS3で追加された:nth-child()擬似クラスを使って、1行ごとに背景色を変えて表示するゼブラテーブルや、土曜・日曜・祝祭日に平日と異なるスタイルを適用させたカレンダーなどを作成してみましょう。 :nth-child()擬似クラスの書式はE:nth-child(n)で、ある要素のn番目の子要素Eにスタイルを適用します。例えば、ol li:nth-child(3)とすれば、ol要素の3番目の子要素のli要素にスタイルが適用されます。 次の例は、上から順にそれぞれのli要素に、1位から3位までのランキングアイコンを表示するものです。 CSS2.1であれば、次のように、HTML側にidやclass属性を付けて制御するのが一般的です。 ［リスト01］CSS2.1の場合のHTMLソース <ol> <li class="rank1">ランキング1位
CSS3のセレクターで作るストライプテーブル (1/3)
前回まではjQueryの基本的な使い方を解説してきましたが、今回からは実務で使える、より実践的なテクニックとサンプルを紹介していきます。今回はjQueryでCSS3のセレクターを利用し、テーブル（表組み）を見やすくスタイリングする「ストライプテーブル」を作成します。 CSS3のセレクターを使えば作業効率がアップ 「CSS3（Cascading Style Sheets, level 3）」は、W3C（World Wide Web Consortium）が策定を進めているCSSの新しい規格です。CSS3ではさまざまなプロパティやセレクターが追加され、現在の主流となっている「CSS2.1」では苦労していた作業を効率化できるようになっています。 CSS3の一部機能は、すでにFirefoxやSafari／Google Chrome、OperaなどのWebブラウザーに先行して実装されていますが、実際
[CSS3]リッチなテーブルをCSS3で作るサンプル： Feature table design with CSS3 | magazine.PXROCKcom
リッチなテーブルをCSS3で作るサンプル： Feature table design with CSS3をご紹介します。via.http://www.red-team-design.com/feature-table-design-with-css3 DEMO DL HTML markup <table class="features-table"> <thead> <tr> <td></td> <td>Standard</td> <td>Professional</td> <td>Enterprise</td> </tr> </thead> <tfoot> <tr> <td></td> <td>$99</td> <td>$199</td> <td>$399</td> </tr> </tfoot> <tbody> <tr> <td>Custom domain</td> <td><img s
![[CSS3]リッチなテーブルをCSS3で作るサンプル： Feature table design with CSS3 | magazine.PXROCKcom](https://cdn-ak-scissors.b.st-hatena.com/image/square/08134b54952702e4a768c941c17e4a37b0598e7f/height=288;version=1;width=512/http%3A%2F%2Fpxrock.com%2Fsys%2Fwp-content%2Fuploads%2F2010%2F12%2Fc3t-150x150.jpg)
CSS3のセレクターで作るストライプテーブル (2/3)
CSS3にほとんど対応していないIE6〜8では、偶数／奇数ごとに設定したスタイルが無視され、ストライプテーブルとして機能していません。このため、IEでストライプテーブルを表示するには、以下のように色を変えたいtr要素やth要素に1つずつclassを付け、class単位でCSSを設定する必要がありました。 ▼サンプル02（CSS部分） table{ margin:100px auto; } tr.even{ background:#F2F2F2; } th{ background:#222222; color:white; } th.odd{ background:#444444; } th,td{ padding:5px; font-size:small; } ▼サンプル02（HTML部分） <table> <tr> <th class="odd">no</th> <th>Name</th
Web制作初心者にすすめる、これは絶対チェックしとけっていうまとめ | webox blog
要チェックや！って思ったものをピックアップしました。 2011年1月から6月くらいまでの記事です。 目次 特に見るべきもの デザインの参考サイト 素材サイト ソフト関連 デザイン コーディング 特に見るべきもの Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 Webデザイナー必読？！著作権について知っておくべき10のこと 目次へ デザインの参考サイト Design Link Database いけてるサイト ドットコム iPhone Design Box 目次へ 素材サイト 写真素材 足成 デザイン素材.com styraise 0円のweb素材屋さん 無料で取り放題.com 目次へ ソフト関連 どや！？新人Webデザイナーが最初に入れるべき
ist-jo.in - ist jo リソースおよび情報
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：1行目の頭文字だけ前に出したい時』
Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。 注意書きなどで、よく使われているこのような文章、 「 ※ご注意ください 」 頭に ※マークなどをつけて書いていきますが、文章が折り返すときは、※マークだけ前に出ていたらいいな・・・というときがありますよね。 これもCSSで設定することができます。 最終的にはこのようになるよう、設定していきましょう。 //////////////////////////////////////////////////////////// まず、HTML <body>部分に <p>※あいうえおかきくけこ<br>さしすせそたちつてとなにぬねの</p> と書きました。表示はもちろんこのようになります。 ここで、<p>タグにCSSを仕掛けていきます。 ----------
2/2 スタイルシートで段落の先頭を字下げする方法 [ホームページ作成] All About
スタイルシートで段落の先頭を字下げする方法(2ページ目)小説などの書籍のように、すべての段落の先頭で字下げを行う方法をご紹介致しましょう。すべての段落の先頭に空白文字を挿入していくのは非常に面倒ですね。もっと手軽に実現する方法があるのです。 具体的なHTML記述方法 最後に、HTML中に記述する具体例を1つご紹介しておきます。 まず、スタイルシートを以下のように記述します。 <style type="text/css"> p { text-indent: 1em; } </style> これによって、そのHTML内の全ての p要素（ <p>～</p>で囲まれた部分 ）の文章の先頭に、1文字分の字下げが行われるようになります。 あとは、以下のように普通に（ body要素内に ） p要素を使って文章を記述するだけです。 <p>本日は晴天なり...</p> <p>本日は晴天なり...</p> <
![2/2 スタイルシートで段落の先頭を字下げする方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
iFrameによるFacebookページ作成法と6つのポイント｜Webpark
先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。 今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。 今まではFBMLというFacebook独自の言語を使っていたのですが、現在はiFrame（インラインフレーム）に移行されています。ということで、上の赤い部分に、自分で用意したサーバーのページを表示するということになります。 移行の理由はよく知りませんが、iFrameだとユーザーがサーバーを用意しないといけないので、やはりサーバーの負担を考えてなのでしょうか。 個人的にインラインフレームはあまり好きではない
epubcafe
このサイトは、2009～11年、日本語に対応した「EPUB 3.0」策定までの経緯を記したものです。 EPUBの中身は世界のブラウザで使用されているHTML 5とCSS 3なので、Chrome、Safariなどに、縦書き、ルビ、縦中横、禁則などの日本語組版が入りました。 電子出版環境整備事業：EPUB日本語拡張仕様策定 日誌 ＝世界のブラウザが縦書きになった理由＝ 旧サイトは⇒インターネットアーカイブ (表示までに時間がかかります) 電子書籍フォーマットEPUBと日本語組版 日本でメインストリームにいる人間は国際標準化の舞台ではまず勝てない 最新の情報は⇒Facebook epubcafe W3Cでの日本語組版標準化活動は⇒Advanced Publishing Laboratory 小林龍生「EPUB戦記」 3章にくわしく解説されています。
EPUB3 コンテスト 第1回 結果発表 * - epubcafé
zip内にHTMLとCSSが入っており、日本語拡張仕様に対応した、Apple Safari 5.1以降やGoogle Chrome 10(一部13)以降で表示すると、作品を見ることができます。 募集要項 参加作品一覧 The best four selections out of the "EPUB 3 contest" No.1, which was held since April until July/2011 at epubcafe, have been unveiled. Every works take advantage of the EPUB 3 features such as SVG, Media Overlay, SMIL, vertical-writing and web fonts and demonstrate that EPUB 3 has rich po
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
手軽にボタンを作れるCSSフレームワーク10選 | Web活メモ帳
CSSで手軽にボタンを作る方法を探している。 そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。 ボタンを作るCSSフレームワークが10点紹介されています。 エントリーの中から気になったのを、いくつかご紹介。 CSS3 Buttons With Simple Markup 非常にシンプルなボタン。18種類あり。 GitHub-Style CSS3 Buttons 以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。 四角、角丸、アイコン付きでボタンが作れるようになります。 Zardi Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。 わずか4kbで作られているようですね。 BonBon
ねこだまのCSSリファレンス&デモ
ねこだまのCSSリファレンス&デモの概要 このサイトでは、CSS3まで含めたリファレンス（解説）とブラウザのサポート状況、CSSリセット、バグ対応などをCSSに関連することをまとめて公開しています。 CSSセレクタ一覧 ・* (ユニバーサルセレクタ) ・E (要素名) ・.class (クラス名) ・#id (ID名) ・E F (子孫要素) ・E > F (子要素) ・E + F (直後の兄弟要素) ・E ~ F (以降の兄弟要素) ・E[attr] (属性名) ・E[attr=value] (厳密な属性値) ・E[attr~=value] (属性にスペースで区切った値) ・E[attr|=value] (属性値（もしくは-で連結した文字列）) ・E[attr^=value] (属性値の前方一致) ・E[attr$=value] (属性値の後方一致) ・E[attr*=value] (属
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で作られたメタル調のボタン
HTML5とCSS3を使いこなしたくなるフレームワーク15選
IDEA * IDEA
CSS3を使ったフォームチュートリアル10選 | Web活メモ帳
