PHPを学ぼう!

▼PHPを学ぶチャプターです。


SMS付き2Gは、900円。
通話付きは、1600円。

 

素材メニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Chapter 3

 ◆Chapter 4

 

制作ヒント

 ◆制作のヒント

 

レッスンメニュー

 ◆Chapter2 練習問題

 ◆Chapter3 DB練習問題

 

サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

 

サイバーテロの技法について書かれた書籍です!
ハッカーの手法を知ることでご自身のサイトがハッカーに攻撃されたときそれを防ぐ手法を紹介しています。

↓↓↓ ↓↓↓

PHPサイバーテロの技法―攻撃と防御の実際

新品価格
¥1,890から
(2013/11/5 10:09時点)

 

 

★初年度100円! サブドメインやメールアカウントを無制限に設置できます。
PHPやCGIは勿論、WordPress、Movable Type Open Source、掲示板、ブログ、ショッピングサイトなどが簡単に導入できるので複数サイトを運営したい場合に便利なサービスです。

↓↓↓ ↓↓↓

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | CSSガイドEX | PHPを学ぼう!

◆Tip20 - " " が "・"と表示されてしまう

ホームページの文章を作成していると空白スペースを入れたい場合があります。
簡単に半角スペースを入れるのなら、スペース・キーを一回押して入れてあげることができます。 しかし、2つ以上の半角スペースは、一つ分の半角スペースしか入りません。

 

ならば全角スペースで入れてあげればいいのでは?

 

確かに全角スペースで対応も可能です。
ただ全角ですと空白の幅が大き過ぎてしまう問題もあります。
特にプログラムのコードを紹介する場合に幅が広すぎると困ることがあります。
単純な比較ですが半角と全角のスペースを表示させてみました。

・半角スペース" "を1個、入れてみました。
・半角スペース" "を2個、入れてみました。
・全角スペース" "を1個、入れてみました。
・全角スペース"  "を2個、入れてみました。

余り気にする必要がないのなら、半角・全角スペースを使ってもいいのかもしれません。

 

では次のようなタグを使う例でみていきましょう。

<p>&nbsp;</p>

 

この使い方は本来の使い方としては間違っているということを知っていたでしょうか?
"&nbsp;"は実は半角スペースをレンダリングする為に存在しているわけではないのです。
&nbsp; の「 nbsp 」は、「 Non-Breaking SPace 」の省略であって、英文などで「ここの空白では改行したくない」という場合に使うそうです。

なるほど~、だからブラウザによって微妙に表示が違っていたのですね・・・。

 

IE ではバージョンは確認していませんが、このコードでは一行空白が入りません。
空白の1行が入らない位なら表示の縦マージンに影響する程度で済むのですが、一部のスマートフォンでは " " が "・" と表示されてしまいます。
この現象は Android で Chrome を使っている場合に起こるそうです。
空白が "・" で表示されると余り気持ちのいいものではありません。
コードの紹介などで多く利用していれば空白の数だけ "・" が表示されてしまいます。

 

表示問題が上手く解決できないか色々と試してみました。
その中で有効と思えるのが、CSS で BODY の属性に以下を加えることです。

body{ font-family: Helvetica; }

これにより半角スペースが表示されます。
他のスマホのブラウザでも表示確認しましたが問題はないようです。
ただし、スタイルの組み合わせによっては "・" が表示されてしまいます・・・。

 

次に "&nbsp;" を "&ebsp;" に変更した場合は、" Chrome " では半角スペースの表示が解決できるのですが、他のブラウザでは "・" と表示されてしまいます。
統一性を持たすのは難しい・・・。

 

PHPを学ぼう! 』ではプログラム・コードを紹介する場面も多いので表示問題は見過ごせません。
そこで自己解決すべくプログラムを作ることにしました。

空白スペースのプログラムは以下の仕様にしました。

  • カスタム関数でどのページでも実行可能とする
  • "&nbsp;" などの特殊文字を表示する場合、色指定ができるようする
  • "&nbsp;" の代わりに透明化した画像の表示を可能とする
  • 連続した表示を可能にする

 

【imgbank.php】

function ImgBlank($dir, $num, $type, $color){
 if($num=="" || $num==0){ $num=1; }
  if($type=="s"){
    $img = "blank_s.gif";
  }elseif($type=="n"){
    $img = "blank_n.gif";
  }else{
    $img = "blank_s.gif";
  }
  for($i=0; $i<$num; $i++){
    if($color==""){
      echo "<img src='{$dir}{$img}' alt=' ' />";
    }else{
      echo '<font color="'.$color.'">';
      echo "&nbsp;";
      echo '</font>';
    }
  }
}

 

このコードを実行するには、ページの最初で関数ファイルを読み込む必要があります。
ファイルの読み込みについては、
Chapter 2 - ファイルの読み込み 』を参照ください。

<php
  include_once('imgbank.php');
?>

コードを実行したい箇所には次のカスタマイズ関数を実行します。

//&nbsp;の表示例
<?= ImgBlank("./", 2, "", "#ffffff"); ?>

//画像の表示例
<?= ImgBlank("./", 2, "s", ""); ?>

 

第1引数の "$dir" には画像ファイルのパスを入れます。
必要なければ "" とします。

 

第2引数では数字を入れます。
数字の数だけ半角スペース(画像)を繰り返し表示することができます。

 

第3引数では "s" か "n" 、 "" の何れかを指定します。
"s" は小さめの透明化 GIF、"n" は文字の9pt程のサイズの透明化 GIF、それ以外は "s" が指定されます。

 

第4引数では、"#ffffff" などの RGB カラーの色版を指定することで "&nbsp;" が書き出されます。
背景色と合わせることで "&nbsp;" が "・" と表示されても背景色と文字色を同一化すれば目立たないようにできます。
画像を指定する場合には、"" としてください。
透明化の画像を使用するのは強引ですが、殆どのブラウザや OS に対応できます。

 

 

PHPを学ぼう! 』では現在(2015年4月)、この問題に対応していなかったので修正中です。
時間がある時に少しずつ修正していますので、スマートフォンをお使いの一部の機種ではプログラム・コードを紹介する箇所で "・" が表示される場合がありますのでご了承ください。

 

 

一括ダウンロード

 

 

 

 

 

 

 

 

 

 

 

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | CSSガイドEX | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.