それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」:phpspot開発日誌
ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 2008年07月11日- ke-tai.org > Blog Archive > ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました : アシアルブログ ケータイ向けサイトを作っていく上で一番問題となるのが、ドコモ端末が外部CSSファイル読み込みや、styleタグでの内部参照に対応していないことです。ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」がke-tai.org で紹介されています。 以下のようにメソッドを呼び出すとCSSを組み込んだ形に自動でHTMLを変換してくれるみたい
CSSレイアウトのチート集「CSS Layout Cheats」:phpspot開発日誌
色々なデバイスやキャラクターなどのアイコン配布サイト「Quantum Bits... 次の記事 ≫：目をひくクリエイティブなロゴ集
CSSハックってなんぞえ？ - Webデザイナーの為の情報Blog「CSSMAKER」
ちゃんと勉強してちゃんとマークアップしてるはずなのに、ブラウザによって表示に違いが出てしまう；； なんて事がWeb制作してるとたくさんあります。 ってか無い時のが少ない＞＜ 特に日本だとIE6の普及率が異常に高いです。 他のブラウザ（IE7とかFirefoxとかOperaとかSafariとか）に比べるとIE6はWeb標準への準拠度が比較的低い為、ちゃんとマークアップしても色々と問題が起きてしまいます。 IE6だけでなく他のブラウザも多少問題を持ってます。 そんなバグに出会った時、各々のブラウザにのみ対応したCSSを分けて記述出来たら便利だと思いませんか？ それがCSSハックです。 CSSハックの多くは各々のブラウザのバグを利用して適用させたいブラウザのみ（または適用させたくないブラウザをはじく）事で問題が起きたブラウザへのCSSの対処を実現させてはいますが、あくまでバグを利用しての
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」
TOP > WebDesign , WebService > プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」 CSSに慣れてくるとコードを見ただけでだいたいどんなように見えるかわかったり、その逆で、こんな風に見せたいと思ったことをコードにすることもできると思いますが、覚え立ての頃はそうは行きません。今回紹介する「CSS Type Set」は実際反映された後のデザインのプレビューとCSSのコードを同時に見ながら設定できるWEBサービスです。 見た目をプレビューしながらテキストのスタイルを決めていけるので。自分の理想に近づけることも簡単で、横にCSSのコードが表示されているので、その見た目を自分のサイトに簡単に反映させることもできます。 詳しくは以下 使い方は簡単で、テキストボックスが二つ並んでいる下のフォントサイズ、フォントカラーなどの設定項
テキストをハイライトすると絵が出てくる！ - sta la sta
※Firefox（推奨）またはSafariでご覧ください。(未確認ですがFlockでも良いようです。) via http://metaatem.net/highlite/ まずは以下のテキストをマウスでハイライトさせてみてください。（あるいはCtrl+Aでテキスト全選択ですね。） One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches int
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わずか四文字でIE6/7/8を区別するCSSハック | コリス
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳
CSS Spriteを活用しよう - DesignWalker
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::