Director's Cut - art project team Blog - http://blog.art-p.com ウェブディレクターの技術的な備忘録 Fri, 16 Dec 2011 10:40:42 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 PHPでJSON形式データを作る方法 http://blog.art-p.com/php/php%e3%81%a7json%e5%bd%a2%e5%bc%8f%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bd%9c%e3%82%8b%e6%96%b9%e6%b3%95/ http://blog.art-p.com/php/php%e3%81%a7json%e5%bd%a2%e5%bc%8f%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bd%9c%e3%82%8b%e6%96%b9%e6%b3%95/#comments Fri, 16 Dec 2011 10:39:24 +0000 art project team http://blog.art-p.com/?p=697 ワードプレスでajaxでデータを扱う必要があり、どうにかしてphpで取得したデータをjson形式にできないかを模索していた所、json_encode()という関数があるということを知ったのでやってみた。


まず、データを取得するためのファイルを作ります(仮にdata.php)。
ファイルの中のスクリプトは下記のような感じ

1
2
3
4
5
6
7
8
<?php
$data = array();

$data = /** ここにデータ取得処理を書く **/;

$json = json_encode($data);
header("Content-Type:application/x-javascript;charset=utf-8");
echo $json;

データ処理を除けばこれだけです。
これをjQueryの$.ajax関数などを使って呼び出して使えばjson形式でデータが返ってきます。
jQueryで設定したパラメータを受け取る場合は$_GET['xxx']や$_POST['xxx']で取得すればOKです。

]]> http://blog.art-p.com/php/php%e3%81%a7json%e5%bd%a2%e5%bc%8f%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bd%9c%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 フェスティバ!!のスマートフォン対応しました http://blog.art-p.com/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%af%be%e5%bf%9c%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/ http://blog.art-p.com/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%af%be%e5%bf%9c%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/#comments Mon, 18 Jul 2011 14:34:47 +0000 art project team http://blog.art-p.com/?p=692 現在運営している「フェスティバ!!」のスマートフォン版をリリースしました。
まだ、一部しか対応してませんが、順次対応していく予定です。

スマホ版の最大の特徴は、現在地からイベント開催地までのルートを表示することが出来ます。
是非、利用してみてください!!

URL：http://sp.festiva.biz/

フェスティバ!! スマートフォン版リリース

]]> http://blog.art-p.com/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%af%be%e5%bf%9c%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/feed/ 0 [ZendFramework]URLを実際のものとは違うカタチで表示する方法 http://blog.art-p.com/php/zendframeworkurl%e3%82%92%e5%ae%9f%e9%9a%9b%e3%81%ae%e3%82%82%e3%81%ae%e3%81%a8%e3%81%af%e9%81%95%e3%81%86%e3%82%ab%e3%82%bf%e3%83%81%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ http://blog.art-p.com/php/zendframeworkurl%e3%82%92%e5%ae%9f%e9%9a%9b%e3%81%ae%e3%82%82%e3%81%ae%e3%81%a8%e3%81%af%e9%81%95%e3%81%86%e3%82%ab%e3%82%bf%e3%83%81%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#comments Wed, 06 Jul 2011 11:21:29 +0000 art project team http://blog.art-p.com/?p=688 フェスティバ!!でも使ってますが、本来はhttp://hogehoge.jp/user?id=1のようなアドレスをtwitterなどのようにhttp://hogehoge.jp/!/usernameというようなアドレスで表示させる方法。

※ZenfFrameworkでの方法

まず、public/index.phpに独自ルートの構築をします。

1
2
3
4
5
6
7
8
9
10
11
12
13
//独自ルート用のコンポーネント呼び出し
require_once 'Zend/Controller/front.php';
require_once 'Zend/Controller/Router/Route.php';

//独自ルートの構築
$front = Zend_Controller_Front::getInstance();
$router = $front->getRouter();
$route = new Zend_Controller_Router_Route(
  '!/:username',
  array('controller'=>'user', 'action'=>'index', 'username'=>null)
);
//独自ルートをルータに定義
$router->addRoute('user', $route);

手順としては、独自ルートのコンポーネントを呼び出し、
どこのコントローラーとどこのアクションをどんなアドレスに変更するかを設定し、
実際に反映できるように定義すればOK

‘username’=>null　はデフォルトの値を設定する場合に記述。
デフォルトがない場合はnullにしておく。

上記の場合、userというコントロールのindexアクションのルートを変更しています。
その際のパラメータ名は[username]と設定しています。
http://hogehoge.jp/user?id=1 というアドレスを http://hogehoge.jp/!/abcd というURLで表示できます。
※abcdがusernameパラメータです。

URLルートを変更する場合 http://hogehoge.jp/xxxxx というのは避け、
http://hogehoge.jp/abc/xxxx のように必ず擬似ディレクトリを置くようにしてください。
その際に、絶対に他のコンテンツと同じものにはしないでください。

値を取得する際は下記で取得できます。
上記を例に本来のコントローラー(UserController.php)のindexActionで値を取得

1
2
3
4
public function indexAction()
{
  $hogehoge = $this->getRequest()->username;
}

余談ですが、「!」は使えましたがtwitterのように「#」は使えませんでした。
制限があるのだろうか？？

ちなみに、フェスティバ!!の場合はhttp://www.festiva.biz/!/artprojectteamというように使っています。

]]> http://blog.art-p.com/php/zendframeworkurl%e3%82%92%e5%ae%9f%e9%9a%9b%e3%81%ae%e3%82%82%e3%81%ae%e3%81%a8%e3%81%af%e9%81%95%e3%81%86%e3%82%ab%e3%82%bf%e3%83%81%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 東日本大震災復興支援サイトをリリースしました http://blog.art-p.com/cm/%e6%9d%b1%e6%97%a5%e6%9c%ac%e5%a4%a7%e9%9c%87%e7%81%bd%e5%be%a9%e8%88%88%e6%94%af%e6%8f%b4%e3%82%b5%e3%82%a4%e3%83%88/ http://blog.art-p.com/cm/%e6%9d%b1%e6%97%a5%e6%9c%ac%e5%a4%a7%e9%9c%87%e7%81%bd%e5%be%a9%e8%88%88%e6%94%af%e6%8f%b4%e3%82%b5%e3%82%a4%e3%83%88/#comments Thu, 14 Apr 2011 07:54:37 +0000 art project team http://blog.art-p.com/?p=674 先日、東日本大震災の復興支援としてart project teamと株式会社ディー・エム・ピーの共同運営で「たがやせ-復興支援プロジェクト-」というサイトをリリースしました。

たがやせ -復興支援プロジェクト-

炊き出し情報やボランティア情報、募金活動など復興支援に関する情報であればなんでも登録できます。
被災地のでの活動だけでなく、遠方での活動でも被災地の復興支援に繋がるのであれば、問題ありません。
当サイトを通じて、少しでも復興支援に役立てばと思っております。

もし、なんらかの事情で情報登録が難しいなどありましたら、連絡していただければ私の方で登録いたします。
その際は、登録してほしい情報やURLをtagayase@festiva.bizまでご連絡ください。

]]> http://blog.art-p.com/cm/%e6%9d%b1%e6%97%a5%e6%9c%ac%e5%a4%a7%e9%9c%87%e7%81%bd%e5%be%a9%e8%88%88%e6%94%af%e6%8f%b4%e3%82%b5%e3%82%a4%e3%83%88/feed/ 0 twitterAPIを利用して複数のタイムラインを表示 http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/#comments Wed, 13 Apr 2011 09:12:24 +0000 art project team http://blog.art-p.com/?p=668 ホームページなどにtwitterのタイムラインを表示するさい、大抵は一つだけのJQueryプラグインですが、複数のタイムラインを表示することができます。

一つはA jQuery TwitterTickerというプラグインを利用すればできます。
ただし、これは一つのボックスに複数のユーザーのつぶやきを表示させるというもの。

もし、上記のようなものではなく、ユーザーごとのタイムラインボックスが複数欲しいという場合の対処法。


A jQuery TwitterTickerを参考にいじりました。
といっても、jquery.mousewheel.js、jScrollPane.jsがあれば別に上記のものを使わなくてもいいのですが。。

コードは下記のような感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(function(){
  var tweetUsers = [
                      ['art project team', 'artprojectteam', 'http://art-p.com/'],
                      ['フェスティバ!!', 'festiva55', 'http://www.festiva.biz/']
                    ];
  $('#twitterArray').slideDown("slow");

  for(var i=0; i<tweetUsers.length; i++){
    $('#twitterArray').append(
        '<div id="tweet-'+i+'" class="tweetArea">'
        +'<div class="tweetIcon"><img src="common/images/twitter_icon/'+tweetUsers[i][1]+'.gif" width="32" height="32" alt="'+tweetUsers[i][0]+'"></div>'
        +'<div class="tweetUser">'
        +'<h3><a href="'+tweetUsers[i][2]+'" target="_blank">'+tweetUsers[i][0]+'</a></h3>'
        +'<h4><a href="http://twitter.com/'+tweetUsers[i][1]+'" target="_blank">@'+tweetUsers[i][1]+'</a></h4>'
        +'</div>'
        +'<div class="tweetConpane"><div class="tweetBox"><ol></ol></div></div>'
        +'</div>'
    );
    getTweet(tweetUsers[i][1], i);
  };
});

/** ツイートを取得 **/
function getTweet(account, i){
  $.getJSON("http://search.twitter.com/search.json?q=from:"+account+"&rpp=50&callback=?",
      function(data){
        for(var j=0; j<data.results.length; j++){
          var text = data.results[j].text;
          text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,'<a href="$1" target="_blank">$1</a>');
          text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/search?q=%23$1" target="_blank">#$1</a>');
          text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');

          $('#tweet-'+i+' .tweetBox ol').append(
              '<li>'
              +text
              +'<br><span class="date">'+data.results[j].created_at+'</span>'
              +'</li>'
          );
          $('#tweet-'+i+' .tweetBox').jScrollPane();
        }

      }
  );
}

JSON形式で取得したデータをループさせてid=”twitterArray”の中に表示するというものです。
あと、リンク(http://)がある場合は自動的にリンクタグにするという処理も付け加えています。

q=from:xxx
の場合はアカウント(@xxx)を取得するようになります。
q=xxx
の場合はxxxという文字列を含むものを取得するということになります。
この辺のオプションはこことかここを参考にするとよいです。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/feed/ 0 ブログをリニューアルしました。 http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%96%e3%83%ad%e3%82%b0%e3%82%92%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/ http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%96%e3%83%ad%e3%82%b0%e3%82%92%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/#comments Thu, 17 Mar 2011 12:51:28 +0000 art project team http://blog.art-p.com/?p=666 最近は宣伝ばかりの当ブログですみません。
今回も宣伝です。

ご覧の通りブログをリニューアルしました。

今回はリキッドレイアウトという手法を使って作成しています。
ブラウザの横幅によってサイズが変わります(最小サイズは決まってますよ)。

最近の流行に乗っかったといえばまぁ、間違いではないですｗ
個人的にはブログやECサイトはリキッドレイアウトに即していると思いますが、コーポレートサイトには合わないと思っています。
これは単純に1ページあたりの情報量の違いがあるからだと思います。

まぁ、そんなこんなで日々勉強の毎日です。
本業ではディレクター一色なので、なかなか制作をする時間はありませんが、いざ「やりたい！｣という時に必要な技術を揮えるように努力していかねばなりませんですな。
まだまだ日進月歩の業界なのでアンテナは常に張り巡らせないと！

]]> http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%96%e3%83%ad%e3%82%b0%e3%82%92%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/feed/ 2 ホームページリニューアルしました http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/ http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/#comments Sun, 27 Feb 2011 13:17:43 +0000 art project team http://blog.art-p.com/?p=659 つい先日、フェスティバ!!をリリースしましたが、それに伴ってホームページもリニューアルしました。
本当はフェスティバ!!リリースと同時にしたかったけど、思い立ったのが1月下旬だったので、残念ながら間に合わず。。。
結構突貫で制作したので行き当たりばったりで制作してます(前の記事にえらそうなことを書いてるにもかかわらず・・・)。

ともあれ、新ホームページもよろしくお願いいたします。

さて、次はこのブログのリニューアルもしなくては…。
1日で作ったデザインなのでかなり欠陥があるので、その辺なんとかしなければ。

]]> http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/feed/ 4 ウェブサイトを制作する前に必要な事 http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%b6%e4%bd%9c%e3%81%99%e3%82%8b%e5%89%8d%e3%81%ab%e5%bf%85%e8%a6%81%e3%81%aa%e4%ba%8b/ http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%b6%e4%bd%9c%e3%81%99%e3%82%8b%e5%89%8d%e3%81%ab%e5%bf%85%e8%a6%81%e3%81%aa%e4%ba%8b/#comments Wed, 23 Feb 2011 11:14:05 +0000 art project team http://blog.art-p.com/?p=653 ウェブサイトを作る上で、「ビジョン」がいかに大切なのかを改めて実感しています。
そのウェブサイトは何のために作成しましたか？あるいは作成しますか？
多くの人や企業の担当者さんと話をしましたが、その「ビジョン」が明確になっていない所が多かったです。
当然、「ビジョン」というのは、サイトの色合いとかイメージとかそういうものではありません。
そのウェブサイトのゴールです。
例えば、問い合わせをして欲しいとか、商品を買ってほしいとか…いろいろあると思いますが、そのウェブサイトで実現したいことはなんなのか？ということを明確にします。

ビジョンがないと、ウェブサイトを制作しても何を訴えたいのかさっぱりわからないということも多々あります。

これはリニューアル時にも当てはまります。
なぜ、リニューアルをするのか？
単に見栄えの問題なのか、コンテンツの問題なのか？構造の問題なのか？
アクセスが少ないからリニューアルしてアクセス増加を見込みたいという相談も受けますが、コンテンツの中身がほぼ一緒なら外側を変えても大した効果は見込めません。

新規制作にしろ、リニューアルにしろ、サイトそのものの役割となるビジョンをもって制作していくことが重要です。

ビジョンが出来たら、次はターゲット層を決めます。
ウェブサイトはCMと同じように不特定多数に見てもらうことが可能です。
ただ、ウェブのいいところは狙ったターゲット層にピンポイントでアクセスしてもらえることも可能です。
それが、検索ワードだったりネット広告だったり…

アクセスはあるけど成果に結びついていない場合、大抵がターゲット層からのアクセスが見込めていないか、ターゲット層の興味を引けてない事が多いです。

結局のところはターゲット層に対するアピールがズレているのです。
欲しい情報がないとか…ね。

ターゲット層を決めたら、次にターゲット層が欲しがる情報をピックアップしていきます。
これがコンテンツです。
そして、そのコンテンツからビジョンを達成するための導線を考える必要があります。

どういうルートでサイト内をアクセスしてもらいたいのか？
そのためにはどんな入り口が必要なのか？出口はどうするか？
その結果、ビジョンは達成できるのか？

これらを考えながらコンテンツをカテゴライズしつつ、サイトマップを作成します。

そして、そこから情報配置やデザインなどを考えるわけです。
デザインだー、最適化だーとかいう前に大きなウェブ戦略が必要というコラムでした。

]]> http://blog.art-p.com/%e9%9b%91%e8%a8%98/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%b6%e4%bd%9c%e3%81%99%e3%82%8b%e5%89%8d%e3%81%ab%e5%bf%85%e8%a6%81%e3%81%aa%e4%ba%8b/feed/ 0 イベントの宣伝・検索サイト フェスティバ!! リリースしました http://blog.art-p.com/cm/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%81%ae%e5%ae%a3%e4%bc%9d%e3%83%bb%e6%a4%9c%e7%b4%a2%e3%82%b5%e3%82%a4%e3%83%88-%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90-%e3%83%aa%e3%83%aa/ http://blog.art-p.com/cm/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%81%ae%e5%ae%a3%e4%bc%9d%e3%83%bb%e6%a4%9c%e7%b4%a2%e3%82%b5%e3%82%a4%e3%83%88-%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90-%e3%83%aa%e3%83%aa/#comments Sat, 05 Feb 2011 15:06:03 +0000 art project team http://blog.art-p.com/?p=641 本日、イベント情報の宣伝・検索サイト「フェスティバ!!」をリリースしました。
キャッチの通り、イベント、セミナー、ライブなど各種イベントの宣伝ができるサイトです。
イベントを宣伝したいという主催者様!!　いろんな宣伝方法がありますが、その中に当サイトも宣伝の一環として使用してみてください。
フェスティバ!! 始まりました

このサイトはZendFrameworkを使用して制作。
CSS3の使用もしていますので、FirefoxやGoogle Chromeで閲覧した時と、IEで閲覧した時では見え方が違います。

]]> http://blog.art-p.com/cm/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%81%ae%e5%ae%a3%e4%bc%9d%e3%83%bb%e6%a4%9c%e7%b4%a2%e3%82%b5%e3%82%a4%e3%83%88-%e3%83%95%e3%82%a7%e3%82%b9%e3%83%86%e3%82%a3%e3%83%90-%e3%83%aa%e3%83%aa/feed/ 7 alt属性とtitle属性 http://blog.art-p.com/html/alt%e5%b1%9e%e6%80%a7%e3%81%a8title%e5%b1%9e%e6%80%a7/ http://blog.art-p.com/html/alt%e5%b1%9e%e6%80%a7%e3%81%a8title%e5%b1%9e%e6%80%a7/#comments Thu, 27 Jan 2011 03:59:14 +0000 art project team http://blog.art-p.com/?p=629 画像を表示する際にaltやtitle属性を表記ですますが、この違いについて。

  • alt属性
    alt属性というのは、代替文字。つまり、代わりに表示する文字の事をさします。
    では、何の代わりに表示するのかというと、「画像が表示されないときに代わりに表示する文字」となります。
    なので、画像の中の文字とaltのテキストが違うというのはあってはいけません。
    画像をダウンロード
    上のような画像だと<img src=”xxx” alt=”画像をダウンロード” />と記述します。
    alt属性は必須なので、必ずimgタグには書くようにしましょう。
    もし、画像に何の意味もない場合(装飾など)は基本はCSSで指定し、それが無理ならばalt=”"とalt属性の中身を空にすれば問題ありません。

  • title属性
    title属性とは、その要素の中身を説明します。
    つまり、title属性というのは画像以外にも使用できます。例えばリンクなど。
    title属性はポインタが画像やリンクに乗った際に表示されるツールチップの事です。
    下記の画像にポインタを乗せてください。
    画像をダウンロード
    「○日限定!超お得画像です」と出てきましたか？
    これがtitle属性と呼ばれるものです。
    画像の中身を説明したり、リンク先の説明をしたりするときに使用します。
    ちなみに、必須ではないのであってもなくても大丈夫です。

上記のようにaltとtitleは全く別物です。
なので、基本的にはaltとtitleが同じになるということはあり得ません。

制作をする際には気を付けましょう。

]]> http://blog.art-p.com/html/alt%e5%b1%9e%e6%80%a7%e3%81%a8title%e5%b1%9e%e6%80%a7/feed/ 2