CSSだけでボックスからはみ出した文字列を折り返す方法

Web制作をしていてスタイルシートでDIVなどボックスを作って
その中に長い文字列があるとはみでてしまうことがある。
とくにURLとかあせる
これをなんとかCSSで自動改行させたい。

全ブラウザではなく一部のブラウザは、横幅で折り返してくれる
やり方があるけど、クロスブラウザで対応させた良いやり方が
思いつかなくて今まで困っていたので、これで解決できそうです！

Wrapping Long URLs and Text Content with CSS
でスタイルシートのみでボックスからはみ出した文字列を
折り返すやり方が紹介されていました。
動作はこちらで確認できます

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

クロスブラウザ対応です。
IE6や日本語、URLも試してみましたが問題なく折り返しくれました。
予想外で簡単！

これは便利！
もっとCSS勉強しないとダメですね。
自動改行のCSS、使わせいただきます。

CSSだけで文字列を省略して「・・・」を付けて表示する方法もあるので、
コンテンツで使い分けていきます。
こっちは対応していないブラウザがあるので注意です！

新規ドメイン「otokogi.jp」を早く検索エンジンにインデックスさせる

$本を買わずに解決するWeb制作の小技-長野県にあるとんこつ味噌男気らーめん

長野県長野市の権堂にある知り合いの焼き鳥屋さんが
今度ラーメン屋をやるそうです！6月下旬にオープン予定！
店の名前は「とんこつ味噌 男気らーめん」ビックリマーク

今回このとんこつ味噌男気らーめんのホームページ(otokogi.jp)
で面白いSEO対策の経験ができることになったのでやってみます。

何をやるかというと、新規ドメインなのでインデックスされるのに時間がかかる
のでもっと早く検索エンジンにインデックスされるようにしたい。

早く検索エンジンにインデックスさせる方法としては
・XMLサイトマップを送信する
・ウェブマスターツールに登録する
・ナビゲーション構造を整える
・質の高いリンクを獲得する
・有益なコンテンツを提供する
・ソーシャルブックマークサイトに投稿する
・URLを正規化する

などがあるのですが、今回は、質の高いリンクのみだけで
どこまで早くなるのかやってみます。
SEO対策の情報は色々あるが自分で実際にやってみて、どういう結果がでるのか
知りたいので今回は良い経験になりそうです。

・どれぐらいのスピードでGoogleとYahoo!にWebサイトを
インデックスさせることができるか？
・このブログで書いたらどれぐらいでインデックスされるのか？
・サイトの評価が高いサイトからの被リンクがあるのとスピードが早いのか？
・内容がほとんどないWebサイトでもインデックスされるのか？
・このWebサイトのテーマがラーメンと関係ないがSEOの効果があるのか？

楽しみです。



ちなみに男気らーめんは美味しいはずです！
今度、豚骨味噌ラーメン食べに行きたいと思いますニコニコ


2010-06-02 20:30 追記
新規ドメインを早く検索エンジンにインデックスさせる検証の結果！
さっそくGoogleでインデックスされました。
クローラ申請のみで、被リンクがなく、ウェブマスターツールの登録や
サイトマップの登録など何もしない状態だと通常インデックスされるのに
数日～数週間かかるのですがこのブログで記事をを書いて約2時間ほどです。
爆速でした。

Yahooは全然ダメですね。2,3日したら効果がでるかも。
色々得ることがあって良い検証ができました。
質の高い被リンクが影響してインデックスく早まったのか
それともクローラーが早いだけだったのか、この辺は検証が必要ですね。
コンテツがトップページ1ページでしかも、数行の文字列しかないのに
登録されて順位も上位にきているので影響はしているんじゃないかと思います。
やはり質の高いリンクを獲得するのはやはりSEO対策として重要ですね。

電子書籍をiPad,iPhoneに配信できるePub形式の圧縮方法

本を買わずに解決するWeb制作の小技-iPad

iPadが発売されて電子書籍を実際に試すことができるようになったので
自分で作ってみた。
簡単にepub形式を作ってくれる無料ソフトがあるのだが、ソフトを使わないで
作るにはどうしたら良いのか知りたくてそのときにはまった圧縮方法をメモひらめき電球

その前に電子書籍ファイルの作り方は、色々なサイトで紹介されているが
epubの説明や電子書籍の必要な構成ファイルなども載っているので
電子書籍ファイルePubについて -ePubを自分で作成する-が分かりやすい。
調べてみると予想以上に電子書籍は簡単だったのでびっくりです！

上記を参考に作っていきとりあえず必要なファイルとメインのファイルを作ったら
epub形式にする。epubにするにはzip圧縮をして拡張子を変更すればいいだけなのだが
ここで単純にフォルダをzip圧縮しても電子書籍ビューアでエラーになる（windowsだけ？）。

ではどうすればいいのか？
圧縮をする時に以下の3つのファイルを選択してzip圧縮をする。

META-INF
OEBPS
mimetype


そして、圧縮されたファイルの拡張子をzipからepubに変更する。
これでソフトを通さずに電子書籍をオリジナルで作ることができますビックリマーク
作電子書籍ビューワーや電子書籍リーダは、無料で利用できる
StanzaがあるのでこれでiPadやiPhoneで閲覧できます。