Webサイト運営ブログ » HTML,CSS http://blog.olivesystem.com HTML,CSS,PHPプログラミングと書籍レビュー Sun, 25 Sep 2011 01:57:27 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 [PHP]文字のはみ出しをなくす http://blog.olivesystem.com/1631.html http://blog.olivesystem.com/1631.html#comments Sat, 25 Sep 2010 06:28:35 +0000 admin http://blog.olivesystem.com/?p=1631 aaaaaaという風に文字数が連続した場合やリンクをつけた場合などに、幅の設定をしてるにも関わらず文字がはみ出してしまう現象を回避する方法。

たとえば、

aaaaaaaaaaaaaaaaaaaaaa

となっている時に、スタイルシートでwidth:80px;と指定しても、文字ははみ出してしまいます。
これがIEなら、

.mozi{
width:80px;
word-break:break-all;
}

というようにword-breakを指定すれば自動で改行されるのですが、他のブラウザだとそれがうまくいきません。

そこで、Firefoxなどのブラウザでも、自動で改行するPHPスクリプトを記述します。

$mozi = array(
“aaaaaaaaaaaaaa”,”bbbbbbbbbbbbbbbbb”,”ccc”,”dddddddd”,”eeeee”
);

for($i=0; $i<5; $i++){
$check = 8;
$mozisu = strlen($mozi[$i]);
if($mozisu>=$check){
$mozi[$i] = wordwrap($mozi[$i], $check, ““, true);
}
}

以上のようにします。

簡単に説明すると、$moziという配列に8文字以上のものがあれば自動改行するようにしています。

$checkは文字を改行する文字数で、それをあとのwordwrapにて改行コード<wbr>を挿入するようにしてます。
strlenは文字数をチェックしておりifで8文字以上じゃなければ改行コードを挿入しないようにしています。

※日本語の場合、文字化けすることがあります。



PHP 逆引きレシピ (PROGRAMMER’S RECiPE)

著者／訳者：鈴木 憲治 安藤 建一 山田 直明 八木 照朗 山本 義之 河合 勝彦

出版社：翔泳社( 2009-06-30 )

定価：￥ 2,730

Amazon価格：￥ 2,730

単行本（ソフトカバー） ( 768 ページ )

ISBN-10 : 4798119865

ISBN-13 : 9784798119861

]]> http://blog.olivesystem.com/1631.html/feed 0 [CSS]IEで出現するfloatの空白をなくす方法 http://blog.olivesystem.com/1488.html http://blog.olivesystem.com/1488.html#comments Tue, 01 Dec 2009 05:22:27 +0000 admin http://blog.olivesystem.com/?p=1488 IE6などのIEシリーズでfloat:right;などを使うとでてくる謎の空白をなくす方法。
最近忘れっぽいので、メモ代わりに記述。

たとえば、

— CSS —

.contents{clear:both;}
.text{width:500px;float:left;}
.menu{width:200px;float:right;}

— HTML —

<div class="contents">
<div class="text">
ここに本文
</div>
<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>
</div>
</div>

となっている場合、IE６などで表示すると、下の画像のように.menu上に謎の空白ができてしまいますよね。

000000

そこで、スタイルシートに以下の記述を追加する。

— CSS —

.contents{clear:both;line-height:0;}
.text{width:500px;float:right;line-height:normal;}
.menu{width:200px;float:right;line-height:normal;}

floatを利用しているdivを囲ってる.contentsにline-height:0;を指定し、floatを使ってるdivにはline-height:normal;を指定します。

000001

すると、あら不思議、.menu上部にあった空白がなくなりました。

参考サイト：IE 6で泣かないための、9つのCSSハック



現場のプロから学ぶXHTML+CSS

著者／訳者：益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

出版社：毎日コミュニケーションズ( 2008-11-11 )

定価：￥ 2,940

Amazon価格：￥ 2,940

単行本（ソフトカバー） ( 328 ページ )

ISBN-10 : 4839929734

ISBN-13 : 9784839929732

]]> http://blog.olivesystem.com/1488.html/feed 0 [CSS]記事の下部に隠し文章を作る方法 http://blog.olivesystem.com/1296.html http://blog.olivesystem.com/1296.html#comments Wed, 16 Sep 2009 09:05:55 +0000 admin http://blog.olivesystem.com/?p=1296 記事の下部に背景と同じ色の文字を使えば隠し文字ができますが、それだけだと昔からありがちの方法で面白くないので、少し手を加えてみます。

文字と背景が同じ色だと、反転をすれば、文字が読めるというものを逆手にとり、以下のようにしてみます。

ははは。この文章を見つけましたね。こ
んなことなら、もっとしっかり隠せばよかったですよ。
てんで、隠れていないってことですか。た
んばさんに怒られますね

このように、隠し文章全体は背景と同じ色を使ってますが、一部だけ#ccccccで表示し、「はんてん」と読めるようにしています。

これのソースは以下のようになってます。

— HTML —


<div class="hanten">
<span>は</span>はは。この文章を見つけましたね。こ
<span>ん</span>なことなら、もっとしっかり隠せばよかったですよ。
<span>て</span>んで、隠れていないってことですか。た
<span>ん</span>ばさんに怒られますね
</div>

— スタイルシート —


.hanten{
color:white;
}
.hanten span{
color:#cccccc;
}

.hantenは背景と同じ色を指定します。

なお、隠し文章はSEOのペナルティを受けることがありますので（キーワードの羅列はペナルティ対象）、ほどほどにしてください。



現場のプロから学ぶXHTML+CSS

著者／訳者：益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

出版社：毎日コミュニケーションズ( 2008-11-11 )

定価：￥ 2,940

Amazon価格：￥ 2,940

単行本（ソフトカバー） ( 328 ページ )

ISBN-10 : 4839929734

ISBN-13 : 9784839929732

]]> http://blog.olivesystem.com/1296.html/feed 0 [CSS]ブラウザに関係なくAAのズレをなくす方法 http://blog.olivesystem.com/1205.html http://blog.olivesystem.com/1205.html#comments Fri, 28 Aug 2009 01:38:29 +0000 admin http://blog.olivesystem.com/?p=1205 ユーザの利用しているブラウザに関係なく、アスキーアート（AA）のズレをなくし、正常に表示する方法。

スタイルシートに以下を記述。

.aa{
font-family:"ＭＳ Ｐゴシック","MS PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
font-size:16px;
line-height:18px;
}

として、表示部分は

<div class="aa">
AAを入力
</div>

とする。

すると、

　　　／￣￣￣ヽ　　　　　　　
　　 |＿＿_G＿__|＿　　登場曲は「ハレ晴レユカイ」　　
　　 lｼ=・=　 =・=|　　　を希望だぉ　　　　　　
　 (6|∵‥(･･)∴|　　
　　 (　 ∵・Α　　)　
　　　＼　 ゜ヾ／　　　
　　 ＿ﾉ　 　|＿_　　　(⌒)　　　　　　　　　　　　
　／＼＼_／／ 　｀ 　/ ~.ﾚヘへ　
/　　 　 ..|。|”’　　　ノヽ　 | .| .| .| 　　　　　
|　 / GIA|。NTS（￣　　｀ヽ ししし
　　　　　　　　　￣ 　　｀ー──‐

ズレることなく表示ができました。

参照：らいぶろちゃんねる ブログにAAをずれないように貼る方法



2ちゃんねる AA大辞典

著者／訳者：まるへそ太郎

出版社：ソフトバンククリエイティブ( 2003-02-28 )

定価：￥ 1,260

単行本 ( 229 ページ )

ISBN-10 : 4797322756

ISBN-13 : 9784797322750

]]> http://blog.olivesystem.com/1205.html/feed 0 [CSS]WordPressでblockquoteを使うとスタイルシートがずれる時の対処 http://blog.olivesystem.com/935.html http://blog.olivesystem.com/935.html#comments Wed, 24 Jun 2009 00:20:35 +0000 admin http://blog.olivesystem.com/?p=935 当ブログのテンプレートでWordpressの引用文表示（blockquoteタグ）を行うと、スタイルシートのデザインが崩れ、メニューがずれてしまう現象が起きていました。

しかし、今更ですが、解決策を発見。


<blockquote style="width:90%;">

WordPressの記事編集をHTMLモードにして直接幅指定すればいいだけジャマイカ。
何故、今まで気づかなかったのかと猛烈に反省しました。

*** 追記 ***
IEではズレが解消されていないことが判明



HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる

著者／訳者：エビスコム

出版社：ソシム( 2007-06-20 )

定価：￥ 2,604

Amazon価格：￥ 2,604

単行本 ( 319 ページ )

ISBN-10 : 4883375412

ISBN-13 : 9784883375417

]]> http://blog.olivesystem.com/935.html/feed 0 [CSS]Javascriptでスタイルシートを切り替えてフォントサイズ変更 http://blog.olivesystem.com/916.html http://blog.olivesystem.com/916.html#comments Fri, 19 Jun 2009 15:02:29 +0000 admin http://blog.olivesystem.com/?p=916 Javascriptを用いてCSSを切り替えるスクリプトを利用して、フォントサイズを大、中、小に切り替えれるようにしてみました。

実装したのは初心者のためのPC用語講座です。

利用方法は簡単で、まずはAlternative Style: Working With Alternate Style Sheetsにてスクリプトをダウンロードします。

これをhead内で呼び出します。スクリプトで利用するスタイルシートも呼び出します。
— HTML —

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
</head>

ポイントは、変更するフォントのスタイルシートをrel=”alternate stylesheet”で呼び出す事。title=は処理を判断する時の名前だとでも思ってください。

— HTML続き —

<body>
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a> -
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中（標準） -
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
<div id="contents">
ここのサイズが変わります
</div>
</body>

style.cssには

#contents{font-size:100%;}

style1.cssには

#contents{font-size:80%;}

style2.cssには

#contents{font-size:120%;}

と記述しておけば完成です。
あとは、それぞれクリックすれば、文字サイズが変更されます。

参考ページ：JavaScriptを使ったCSSの切り替え



速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)

著者／訳者：河内 正紀

出版社：技術評論社( 2006-03-29 )

定価：￥ 2,919

Amazon価格：￥ 2,919

大型本 ( 248 ページ )

ISBN-10 : 4774127205

ISBN-13 : 9784774127200

]]> http://blog.olivesystem.com/916.html/feed 0 [CSS]右にメニューを配置した3カラムレイアウト http://blog.olivesystem.com/899.html http://blog.olivesystem.com/899.html#comments Sat, 13 Jun 2009 01:49:40 +0000 admin http://blog.olivesystem.com/?p=899 <div id="header"> ヘッダー </div> <div id="c [...]]]> 左にコンテンツ内容、右にメニューふたつを配したレイアウトの方法。

- HTML -

<div id="waku">
<div id="header">
ヘッダー
</div>
<div id="contents">

</div>
<div id="menu">
<div id="lside">
メニュー1
</div>
<div id="rside">
メニュー2
</div>
</div>
<br class="clear">
<div id="footer">
フッター
</div>
</div>

- CSS -

body{text-align:center;}
#waku{margin-left:auto;margin-right:auot;text-align:left;width:800px;}
#header{width:100%;}
#contents{width:445px;float:left;}
#menu{width:400px;float:right;}
#lside{width:198px;float:left;}
#rside{width:198px;float:right;}
#footer{width:100%;}
.clear{clear:both;}



できる大事典 HTML & CSS

著者／訳者：佐藤 和人 できるシリーズ編集部

出版社：インプレスジャパン( 2006-04-27 )

定価：￥ 2,730

Amazon価格：￥ 2,730

大型本 ( 800 ページ )

ISBN-10 : 4844322532

ISBN-13 : 9784844322535

]]> http://blog.olivesystem.com/899.html/feed 0 [メモ]吹きだしに関するエントリまとめ http://blog.olivesystem.com/895.html http://blog.olivesystem.com/895.html#comments Fri, 12 Jun 2009 01:04:37 +0000 admin http://blog.olivesystem.com/?p=895 吹きだしの素材やCSSを自前で組んでポチポチやっていたら、予想以上に時間がかかった。

今後の時間短縮も含め、参考になりそうなWebページで吹きだしを使用に関するエントリをまとめてみました。

・CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ

・これは驚きの、CSSだけで作れる吹き出しボックス

・吹き出し風デザインの枠が表示されるHTMLを作成できる「吹き吐きさん」

・webデザイナーが作るフリーホームページ素材 イラスト素材



現場のプロから学ぶXHTML+CSS

著者／訳者：益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

出版社：毎日コミュニケーションズ( 2008-11-11 )

定価：￥ 2,940

Amazon価格：￥ 2,940

単行本（ソフトカバー） ( 328 ページ )

ISBN-10 : 4839929734

ISBN-13 : 9784839929732

]]> http://blog.olivesystem.com/895.html/feed 0 [CSS]ブラウザによって表示を変える http://blog.olivesystem.com/882.html http://blog.olivesystem.com/882.html#comments Tue, 09 Jun 2009 00:39:33 +0000 admin http://blog.olivesystem.com/?p=882 <div id="ie"><![endif] [...]]]> InternetExplorerとそれ以外のブラウザでは表示が異なるスタイルシート記述方法です。

まず、HTMLを以下のように記述。

<!--[if IE]><div id="ie"><![endif]-->
<!--[if !IE]><div id="not"><![endif]-->
<div class="waku">
テスト
</div>
</div>

次はスタイルシートで、

#ie .waku{width:500px;border:1px solid black;}
#not .waku{width:550px;border:1px solid red;}

それぞれ定義します。
#ieで指定したものはIEのみの表示、#notはそれ以外のブラウザでの表示となります。


HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる

著者／訳者：エビスコム

出版社：ソシム( 2007-06-20 )

定価：￥ 2,604

Amazon価格：￥ 2,604

単行本 ( 319 ページ )

ISBN-10 : 4883375412

ISBN-13 : 9784883375417

]]> http://blog.olivesystem.com/882.html/feed 0 [CSS]中央揃えの2カラムレイアウト http://blog.olivesystem.com/804.html http://blog.olivesystem.com/804.html#comments Thu, 28 May 2009 00:22:50 +0000 admin http://blog.olivesystem.com/?p=804 <div id="header"> ヘッダー </div> <div id="content [...]]]> 中央揃えの2カラムレイアウトでのスタイルシート記述。

- HTML -

<div id="waku">
<div id="header">
ヘッダー
</div>
<div id="contents">
コンテンツ本文
</div>
<div id="menu">
メニュー
</div>
<br class="clear">
<div id="footer">
フッター
</div>
</div>

- CSS -

body{text-align:center;}
#waku{margin-left:auto;margin-right:auot;text-align:left;width:800px;}
#header{width:100%;}
#contents{width:750px;float:left;}
#menu{width:145px;float:right;}
#footer{width:100%;}
.clear{clear:both;}



HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる

著者／訳者：エビスコム

出版社：ソシム( 2007-06-20 )

定価：￥ 2,604

Amazon価格：￥ 2,604

単行本 ( 319 ページ )

ISBN-10 : 4883375412

ISBN-13 : 9784883375417

]]> http://blog.olivesystem.com/804.html/feed 0