Honoka - 日本語も美しく表示できるBootstrapテーマHonokaはオリジナルBootstrapテーマです HonokaはBootstrapテーマの一つですが、以下の特徴を持っています。 Easy to Start HonokaはBootstrapを元に製作されているため、非常に高い互換性を持っています。マークアップに関する規約はほとんど変わりません。
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
Best Website Builder Reviews & Guildes
My Website Builder Reviews & GuidesMy name is Lesley Haught, and this is my website for website builder reviews, testing, comparison, and guides. There are more than 200 different website builders and online platforms for self-launching websites in the world. You’d think creating your own website would be simple. The reality? Many of these platforms fall short. That’s why I put the top website bui
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (20) 06-02 絶対指定(absolute)による位置指定の問題 | クリエイティブ | マイコミジャーナル
right, bottomで指定した表示位置がおかしくなる問題を修正 サンプルソース6-2-1では、<div id="a">に対してposition:absoluteと指定し、rightとbottomで表示位置を指定している。このとき、<div id="a">の親要素である<div id="container">にはposition:relativeと指定してあるため、<div id="a">の表示位置は<div id="container">を基準に決まることになる。これは、CSS2.0では、positionプロパティでabsolute、relativeまたはfixedが指定された親要素がある場合、その親要素で構成されるボックス(コンテナブロック)が表示位置の基準となるとされているためだ。そのため、「right:0; bottom:0」と指定すると、<div id="contain
チープカ - はてなダイアリーのデザインを作るうえでのtips
CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
HTML+CSS templating
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
Google Web Search - Dark Gray Theme (vC)
日本語で読めるものを中心に - Webデザインのリンク集 | lush life*