ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
A year when books were winning (Five Simple Steps published A Practical Guide to Designing for the Web by Mark Boulton and Designing with Web Standards by Jeffrey Zeldman and Ethan Marcotte reached its third edition) and the web was losing (Yahoo! closed Geocities). Significant progress was made with web fonts and HTML5, and 24 ways delivered the Christmas gifts again. Meagan Fisher tackles the is
まだコンテンツは全然できてないけど一応動くようにはなったのでとりあえず公開しときます。 ie-buglist.org Ark（カヤック発のPerlのフレームワーク）で何か簡単なものつくりたくて、IEのバグのまとめサイトはつくろうと思ってたのでちょうどいいと思って勢いでつくりました。 今のところ、前書いたエントリーの内容でバグの現象をコピペしてるだけです。コンテンツ充実させれば結構有用なサイトになる気がするんですけど、いかんせんモチベーションがあがるかが不安ではあります。 ソースはgithubに上げてるので一緒につくってくれる人絶賛募集中です。perlとgitとmarkdownが使えるMEとかいたら最高だなー。いないかなー、と思ってたら一人思い当たった。
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
April 9, 2009 12:32 am | 90 Comments In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
概要 Web ページの作成や運用時に、意図しないタグや属性が使われてしまうのを防ぐための CSS です。 動作確認用の demo (CSS 適用前) 動作確認用の demo (CSS 適用後 ただし IE 7 未満では無効) ダウンロード この CSS ファイルを読み込むことで 廃止 / 非推奨 / 独自拡張タグを使用すると警告が表示し、意図しないタグや属性の使用を防ぎます。(ただし、CSS の都合で IE 7 以下では表示できません) img やhr などの置換要素については、content プロパティが使用できないためボーダーのみを表示します。 表示するテキストは Unicode エスケープしてあるので文字化けの心配はありません。 使用方法 CSS ファイルを読み込むだけで使用できます。この CSS ファイルをいつでも取り除けるように import 用の CSS ファイルから読み込むと
Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsisten
Use the Best Available Ampersand I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no? For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s al
先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。 HTML 5 (W3C Working Draft 10 June 2008) HTML 5 (Editor’s Draft 12 December 2008) HTML 5 における HTML 4 からの変更点 (Working Draft 22 January 2008) HTML 5 の新要素 HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife 試しに
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. Download zip Images First, find some nice little icons (or better yet, create them yourself) in gif format that will be used as the cues. It might be easier for them a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
