最短を目指すWEB制作者の技術ログ
HTML･CSS･PHP･jquery＆将棋

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition（切り替える時間）を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...続きを見る

今日は将棋を始める方にオススメの無料対局サイトをご紹介。 ※パソコンユーザー限定の記事になります。 ズバリ「ヤフー将棋」はかなり昔から存在する無料の対局サイトです。 元祖シェアNo.1フリーメールのYahooメールのアカウントで始められる気軽さが嬉しい。 が、パソコン専用です…。スマホは適当なアプリを探してください。 それでは早速、ヤフー将棋にログインして、対局ロビー一覧に進みます。 下記の画面が対局ロビーです。 いつも人で埋まるロビーは決まってます。 上一行が初心者から中級者用です。そして、右下のロビーが上級者用です。 初心者用のロビーをクリックしてください。 ...続きを見る

身近にケータイの料金を高く支払ってい人がいて、気になって、 ネットでdocomo、au、softbankの３大キャリア利用者が支払ってる平均料金を調べました。 端末代のローンが組まれている場合は月々9000円ほど。 端末代が含まれていなくても7000円以上になっているようです。 最新型のスマホ端末を、うまいこと言われて、買わされた人は月々13000円くらいだそうです。 次買い換える時に下取りできるからお得ですよーってね。 こういうのはね、客を縛って囲い込みをする営業トークなので、乗らないほうがいいですよ。相手は一番高いスマホ買わせたいだけ。 毎度のこと、スマホの最新型ってカメ...続きを見る

スマホサイトでボタンを作る時の汎用リンクマークを作成しました。1ピクセルのビットマップでのマークもおまけに。 1ピクセルのリンクマークはPC用サイトで、使いこなせる人は上級者かも。 個人的にはポータルサイトなどの細々したサイトで重宝してます。リストタグに背景指定で使って見て下さい。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ...続きを見る

WEB制作の業界で飯を食ってきて10年目になった。 10年前の2005年頃はインターネットの普及率がグングン伸びていて、 WEBの技術者もそれに伴い増加傾向にあったと思われる。 この頃はガラケーサイトを作るが面倒だった。 絵文字は必要だし、機種によって文字コードや文字サイズが違うので、 WEBエンジア（SE）は実機チェックに奔走せざるを得なかった。 その5年後の2010年にはガラケーサイトの需要が縮小し、スマホの時代に突入。 スマホのブラウザはJavascriptが使用でき、機種による差も多くなく、 SE的にはガラケーサイトを作るよりはかなり楽になった。 が、...続きを見る

2013年9月にロリポップサーバーで、なんと8,438件ものサイトがハッキングされ、サイトが改ざんされた様子。前に、GMOクラウドのサーバーからもワードプレスのハッキングについてのメールが届いていた。ワードプレスは利用者が多いので、信頼してしまいがちだが、利用者が多ければ多いほど強者のハッカーに狙われてしまう。だからもうワードプレスは使用しない方が得策だろう。 サイトの改ざんだけで済めばいいが、データベースを初期化されたりしたらもうおしまい。ワードプレスに依存している会社は倒産するかもしれない。そんな会社は急いでワードプレスを普通のHTMLに戻さないといけない。かなり面倒臭いけどね。ワー...続きを見る

インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか？ 「IE」「google chrome(以下、クローム)」「firefox（以下、狐）」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」（以下、プニル）がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2％ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

年々進化続けるパソコンなどのメカニックな技術。 しかし、それ必要か？それ面白いか？と思ってしまうどうでもいい進化が多すぎではないだろうか？ まず、ゲーム機の３ＤＳ。３Ｄモードを切ってプレイする人がやたら多いとか…。アバター以来３Ｄ画面の話題はさっぱり。全然需要がない技術のようである。ゲームはスーファミやゲームボーイのように２Ｄの時が一番面白かったような気がする…。 エクセル2010なんかは特にひどい使いにくさ。エクセルは2003で完成しちゃってるからそれ以降は余計な機能しか追加されてない。そんな余計な機能は必要ナッシング！ アイコンを増やして、直感的に分かりやすくしている工...続きを見る

Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart http://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られるの...続きを見る

今回はスマホ版サイトのヘッダーの部分でよく見かけるアイコンの素材。今回配布しているPSDファイルでは、ホームやメールなど全てがベクターなので拡大縮小が自由です。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 スマホ版サイトをデザインする時の強い味方となる参考サイトをついでにご紹介。 ■絶対見ておきたい有名企業のスマホサイトまとめ http://ascii.jp/elem/000/000/590/590502/ ■優れたiPhoneサイトデザイン集 - ...続きを見る

あくまで簡易的な携帯・スマホ版サイトの振り分けコードです。携帯版のページを絶対にＰＣで見せたくないという場合は、下記の方法では実現しません。ＰＣ版のインデックスファイルの先頭に下記のコードを追加すれば導入完了です。 phpStart // ユーザーエージェントの取得 $ua = $_SERVER["HTTP_USER_AGENT"]; if(preg_match("(UP\.Browser|KDDI|DoCoMo|J-PHONE|Vodafone|SoftBank|MOT-|L-mode|DDIPOCKET|WILLCOM|PDXGW|ASTEL)", $ua)){ ...続きを見る

現在、WEBの画像ファイルはJPG（ジェイペグ）・GIF（ジフ）・PNG（ピング）の３つが標準規格で一般的に使用されている保存形式です。 それぞれ違う特徴があるので、ちゃんと知っておけばサイトの高速化を計ることが出来ます。画像はなるべく綺麗にできるだけ軽い容量で保存することが大切で、画像の容量が軽ければWEBページの表示速度が上がりますし、重ければ表示に時間がかかってしまいます。PCサイトでは気にならないかもしれませんが、通信速度の遅いモバイルやスマホ版のサイトでは表示速度が大きく違ってきます。 サンプル画像の上段は写真画像のケースの出力結果です。３つともほぼ見た目が変わりませ...続きを見る

スマホ用素材をネットで探しましたが、なかなか大きいサイズのものがなかったので、結局自分で作っちゃいました。スマホは解像度がPCより2倍大きいので、例えば300pxのボタンを設置する場合は600pxの画像を使わないと画質がにじんでしまいます。指でボタンを押すのでボタンを大きく作るのがスマホサイトの基本ですね。 ＜スマホで画像を綺麗に表示する＞ htmlStart htmlEnd ＜スマホで背景を綺麗に表示する＞ htmlStart sample htmlEnd 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使...続きを見る

コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね？ マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評がある...続きを見る