ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
Website layout made easy | Griddle.it
A clean and simple way to align your website layout. No complex grid frameworks necessary. Just put your dimensions after our URL, and get a background guide to work with in your browser. Grids are created on the fly, so any combination should work. Take a look at the live demo → The Essentials The basic URL structure to use for all grid shapes and sizes is: http://griddle.it/[total width]-[number
ウェブデザイン用超便利ツール集:phpspot開発日誌
Web Design Toolbox: 130 New Tools to Make You a Better and Faster Designer ウェブデザイン用便利ツール集 ブロックレイアウトなんかをウェブ上から簡単に作れるツールなんかをまとめたエントリがあがってました。 YAML Builder - 複雑なカラムレイアウトもGUIで簡単作成 Sky CSS Tool - CSSオーサリングツール The Box Office - イメージにあわせて以下のようにテキストの位置を指定したページをジェネレート CSSTXT - CSSでのテキスト整形をプレビュー付で確認しながら生成できる izzyMenu.com - メニューを簡単作成 pForm - フォームを簡単作成 Roxer - ドラッグ＆ドロップでページを簡単作成 Wirenode - モバイルサイト作成 doodleki
[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例 | コリス
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
各種CSSメニューをカスタマイズしてダウンロードできる『CSS MENU MAKER』 | 100SHIKI.COM
このサイトでメニューを作って張ってみたんですが メニューがTOP画像の上に表示されるのです。 どうすればよいでしょうか？ Top Tools Yotube Music Diary これがHTMLで ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url(“http://error911.up.seesaa.net/image/bg.jpg?20090326204938″) repeat-x top left; font-family:”Trebuchet
ソートが可能なテーブル実装ライブラリ色々:phpspot開発日誌
CSS Juice 16 Sortable Table Techniques Tabular data in table form is a regular technique on web sites and web applications for represent data and information. ソートが可能なテーブル実装ライブラリ色々。 JavaScriptとCSSを活用し、データのソートが可能な便利なウィジェットを実装できるライブラリが多数紹介されています。 Nofunc Table Organize TableKit Brixontech Table Sort Sortable Selectable Zebra Table Kryogenix Sortable Sorting HTML Tables with Javascript SortedTable by M
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 - GoogleMania | グーグルの便利な使い方
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 管理人 @ 6月 26日 04:20pm AdSense Web 2.0 Magazine: 29 Different Google Ads Styleにて、AdSenseのテキスト広告をCSSでWeb2.0風にするテンプレートが、２９種類も公開紹介されています。 これまで、背景に馴染ませるしかなかったテキスト広告が、立派なサイトのデザインの一部になります。 どうやって、デザインを変えるかというと、AdSenseのコードを変更するのは違反ですので、CSSを使ってその周りの背景に手を加えます。 利用方法 次のテンプレート一覧ページで好みのテンプレートを選びます。 Web 2.0 Magazine: 29 Different Google Ads Style 「View Code」リンクをクリックすると、それぞれのテンプレー
無料で使えるCSSテンプレート集『Boxed CSS』 – creamu
CSSのテンプレートを探している。 そんなあなたにおすすめなのが、『Boxed CSS』。無料で使えるCSSテンプレート集だ。 they are free to be downloaded and modified, without a linkback required. 無料でダウンロード、改変することも可能だ。このサイトへのリンクも必要ない。 とのことで、自由に使えるテンプレートとなっている。 さくっと新しいサイトを作るときに参考にしてみてはいかがだろうか。 無料で使えるCSSテンプレート、チェックして使ってみたいですね。 「牛に願いを」にちょっとはまっています。映像が綺麗しストーリーもいい感じ。
CSSで角丸テクニック２５:phpspot開発日誌
CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. CSSで角丸テクニック２５がまとめられていました。 様々なサイトにでの角丸実装ドキュメントのまとめです。 Sliding Doors Even More Round
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]![Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ab30e2329cc1549a46525bef7d0686d8dca4b79/height=288;version=1;width=512/https%3A%2F%2Fprog-8.com%2Fimages%2Fogp%2Fdefault.png)
できるだけ歩く鳥
HTML5 と CSS3 で Web 制作 | TM Life
http://www.designwalker.com/2009/01/table.html
透過背景の角丸ブロックを作成するＣＳＳサンプル:phpspot開発日誌
[CSS]個人・商用サイトでフリーで利用できるXHTML/CSSのテンプレート -Solucija