回れよ回れ!!

20150312-2
開発途中でローディングGIFや、プログレスバーのデザインが出来上がるのを待っている間 デバック用にとりあえず処理中の状態を見えるようにする時、css3のtransformを使って遊んでいます。 何をするかというと、単純にトリガーになった要素を transform:rotate で回転させているだけ。 transformもアイデア次第で色々利用できると思います。 具体的には、 var ...
続きを読む

facebook「いいねボタン」の正しい設置方法「アプリ登録編」※2015年3月版

20150304
●ソーシャルプラグインの一般化 サイトをつくった際に、 ソーシャルプラグインを実装する機会も増えましたよね。 その代表的なものに facebookの「いいねボタン」 があります。 いまや、どのサイトにいっても「いいねボタン」を目にします。 その設置が手軽なのも流行したひとつの要因と言えるかもしれません。 しかし、、、それら「いいねボタン」含むソーシャルプラグインは た...
続きを読む

セマンティックWEBなホームページ制作

23
「セマンティックWEB」、言葉はどっかで読んだような聞いたような気が・・・ という程度しか分からなかったので、最近、会社でも話題となったので、もう少し掘り下げて調べてみることにしました。 まず、「セマンティックWEB」という単語を検索してみました。 wikipediaも上位に引っかかったのですが、ちょっと分かりにくかったので、 IT用語辞典を参考にしました。IT用語辞典によると、 ...
続きを読む

WEBサイトでメインアイキャッチ画像に動画を利用してみる。

22
回線速度の水準が上がってきたので動画を利用したwebサイトを 多く見かけるようになった。 いままで静止画が当たり前だっただけに、 動画を使ったサイトに出会うとちょっと印象に残ったりします。 サンプルサイト http://h-print.co.jp/ 実装の手順は実に簡単!html5のビデオタグを利用するだけです。 再生できる拡張子はこちらの3種です。 mp4 ...
続きを読む

キャメルかスネークかハイフンかそれが問題だ

0012
自分の中でwebアプリ開発でよく悩むシリーズの1つにcssのセレクタ名とファイル名がある。 名前をキャメルケースにするかスネークケースにするかハイフンにするかです。 自分なりに考えて先に結論から言うとケースバイケース! あっちの有名なライブラリはハイフンか、なるほどね。 いやあっちのフレームワークはキャメルでないといけないのなど、ほんとにバラバラかつ、ケースバイケースな...
続きを読む

PNG画像を圧縮しサイトを作成して比較してみた

08
今回はPNG画像の圧縮について書きたいと思います。 サイト作成を長年していますが、昔はテーブルレイアウトで、画像はJPEGとGIFこの2種類だけで製作したものです。 テーブルレイアウトの性質上、画像をちょっとずらして重ねたような表現をするときは一枚の画像にして使用していました。 しかしPNG画像の出現、CSSのでレイアウトをするようになってから、画像を二枚重ねた表現なども凄く楽になり...
続きを読む

javascript ページの離脱

06
今見ているページから別のページに移動しようとすると、 「このページを離れる」、「このページにとどまる」といった確認ダイアログが出てくるページを(ボタンの文言はブラウザ ごとに異なる) よく見かけるようになった。 これは、onbeforeunload イベントを利用しているが利用シーンは問合わせ時に何かを入力していて問い合わせが 完了していない。 そんなときにページを移動すると入力した...
続きを読む

cssのid、class名について

cssレイアウトをする際に必要になってくるidやclassの名前。 あまり変な名前を付けると後で見た時に何を意味しているわからず、ごちゃごちゃになってしまいます。 またjavascriptなどが関わってくるとネーミングはとても重要なものとになります。 名前の付け方はこれが正解というものはないですが、誰が見ても何があるか分かりやすいものがいいですね。 今回はそんなidやclass名の一般...
続きを読む

IEでおこるIMGタグの隙間

先日、リストタグについてIEだと隙間があくっていうネタを書きましたが、 あの後また同じような現象にぶち当たりました。 紹介した方法の なにをやっても解決せず。。 よくみるとHP上のimgの下に全て1px隙間があるではないか。。 リストタグのせいだとばっかり思ってたんですが。 宣言を見るとhtml4です。 今回は既存のHPの修正だったため、気付かなかったのですが この...
続きを読む