PHP＆CSS掲示板 - phpspot
特徴 ・MovableType3.2のデフォルトテンプレートと同じ構造のHTMLなのでブログと同じデザインに出来る ・MovableType3.2のStyleCatcherで使えるCSSデザインが全て使える ・CSSベースなのでPHPが分からなくても簡単にデザイン可能 ・メールによる投稿が可能 ・htmlキャッシュするのでサーバ負荷が低い ・貼り付けタグを吐き出し、ブログなどに貼れる ・ＲＳＳを吐き出すので、ブログやＲＳＳリーダーで最新情報を漏れなくチェック サンプル →設置サンプル ファイルのダウンロード PHP＆CSS掲示板(mbbs.zip) オススメのレンタルサーバー → レンタルサーバー ロリポップ PHPやMySQLが利用可で月額263円～。独自ドメインも660円～導入可。 設置方法 ダウンロードファイル解凍後、以下のような構成になっています。 設置手順 (1) ld\conf
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」 様々なWEBサイトで利用されているjavascript。様々なライブラリなども開発され幅広い表現が可能になっていますが、今日紹介するのはJavascriptを使わない制作テクニックを集めた「32 Javascript Alternatives with Pure CSS – Updated」です。 CSS Image Maps: A Beginner’s Guide | Noobcube マップ、グラフなどを始め、様々なテクニックがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■NealGrosskopf.com l Create a JQuery Cont
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
気が狂うようにならないで、よく構造化されたCSSファイルの書き方
woork: Write a well structured CSS file without becoming crazy CSSって、気づいたら膨大な量を指定している時があります。 それはまだまだ自分が未熟な証拠でもあるのですが、 「いかによく構造化されたCSSファイルを書くか」 というような記事があったので、読んでまとめてみました。 英語なので、かなり意訳になりながらも読んでみました。 間違いがあるのならご指摘ください。 基本となる３つのポイント まず、作業を最適化するために以下のような 簡単な規則をもてということ。 １、シンプルに ２、「上品なコード」指向で ３、秩序だてて １は、たくさん書くと複雑化するから簡単にしようとのこと。 ２は、インデントや余白とコメントを使用して、 コードを論理的に別けようということ。 ３は、#left-columnや#footerなど、プロジェクト内の
100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」
TOP > WebDesign > 100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」 制作に便利なフリーテンプレート。デザインやレイアウトによってはそのまま、もしくはサイト制作のベースとして便利に利用できますが、今日紹介するのは、100以上のハイクオリティなXHTML/CSSフリーテンプレートを集めたエントリー「100+ Stunning XHTML/CSS Free Templates [HQ] 」です。 Download Harvest 数多くのフリーテンプレートがまとめられていますが、今日はその中から特に気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Download Imagination シンプルながらも、ドロップシャドウや、細かな処理で立体
![100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」](https://cdn-ak-scissors.b.st-hatena.com/image/square/29dfb44458400fed264d895b28edab2d22bb816f/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2011%2F03%2Fharvest.jpg)
ブラウザのスタイルをリセットするスタイルシート -Normalize CSS
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
商用利用でも無料、シンプルでクリーンなデザインのテンプレートファイル一式 -Classic Luxury
ポートフォリオや写真ギャラリーサイトに最適な、シンプルでクリーンなデザインのCSSベースの無料のテンプレートファイル一式をSix Revisionsから紹介します。 Free XHTML Template Pack: Classic Luxury デモページ：Home テンプレートファイルの主な特長は下記の通り。 Photoshop用のPSDファイル付き。 ValidなXHTML。 jQueryを使用したモーダルウインドウ。 ドロップダウン型のナビゲーション。 Twitter, Facebookなどのソーシャルメディアのアイコン。 テンプレートは上記のHomeを含む3ページで構成されています。
25 Excellent Examples of Forms in Web Design - Web Design Ledger
14 Comments Very nice collection! Thanks for collect them on one place 🙂 Great list, thanks. Forms tend to be dull dull dull, but are often a very important part of a website It’s great to see some really interesting attempts to make them far less dull… That Bio-Bak one was fun to play around with haha Great Collection of forms there. I find forms are usually one of the hardest elements of a webs
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト
ブロックレベル要素 ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。 HTML4.01 Strictでは次の要素がこれにあたります。 p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。 CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。 インライン要素 ブロックレベル要素に対し、文中の一部
[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
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
dt,ddを横に並べるときの注意（俺用メモ） - Hato-Style - Note
dt,ddを横に並べるときの注意（俺用メモ） 定義リスト(dl要素)で、CSSを用いてdtとddを横に並べてレイアウトするときの話やけど。 一般的に使用されていて、最も分かりやすいがfloatとmarginを使った下記の手法。 dl dt{ width: 5em; float: left; } dl dd{ margin-left: 5em; } <dl> <dt>テストです</dt> <dd>テスト テスト テスト テスト テスト ...</dd> </dl> 組みもわかりやすくて良いんだけれどもWinIEで頭の文字が右に微妙にずれたりしてる。レイアウトによってはなかなか気づかなかったりするので要注目。 回避策として、ddにtext-indentプロパティを指定すると、美味く見える模様。でも要素や文字によりけりなので検証が必要かも。WinIEだけに適応させるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パスワード認証
IDEA * IDEA
nikukyu-punch.com
CSS Lecture: 定義リストdlのdt dd の横並びの作り方
2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About![2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] 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)
