[PHP] ページング機能の仕組みとか作り方とか

by

ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。
名称はページングだったりページネーションだったりしてますが、海外だとpaginationの方が一般的なようです。

先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。

１０周年記念にVue.js版を書きました！
[Vue] ページネーション機能の作り方とコンポーネント作成入門

2019/09/12 Vue版に合わせて全面的に書き換え＆動作サンプル追加しました

続きを読む

[CSS&JS] 上下２つに分かれてるヘッダーナビゲーションを１つのリストで

by

次の画像のようなヘッダー部分にある上下に分かれてるナビゲーションメニューを作るとき、

上下に分かれてるナビの例

上に並んでるHOME・サイトマップ・個人情報保護方針とその他のulを別にする手法がよくあると思うけど、
普通に１つのリストに書いてクラス振ってfloatとposition駆使して配置するという手もあります。
その方が分けるよりもなんとなく美しい感じがするじゃないですか、XHTMLソース的に考えて。

続きを読む

WindowsVista(Home Premium SP1)が再起動を無限に繰り返す

by

日曜日、家のVistaマシン（dynabook Qosmio WXW/79GW）を起動した所、「更新プログラムを構成しています：ステージ 3/3 – 0%完了」云々と表示されたので放置して様子を見る。
しかし暫く経って見てもまだ更新プログラムを～と出て再起動を繰り返している始末。
こ　れ　は　お　か　し　い　と思い、すかさず冬眠してたMacでぐぐってみた所、
自動インストールされる更新プログラムにバグがあり、起動すると延々再起動を繰り返して抜け出せなくなる…というVista特有の現象らしかった。

続きを読む

[mootools]　スクロールバーを画像でカスタマイズする

by

スクロールバーを画像で作ることが出来るMootools Powered Scrollbarというcoolな関数をちょっと拡張してみた話。

custom_scrollbar

このオリジナルの関数ちょっとクセがありまして

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

上記のようにスクロールさせる要素とスクロールバーを兄弟にした場合、contentに#wrapperを指定しないとスクロールされません。
これで#wrapperにposition:relaviteしてあるとスクロールバーまで一緒にスクロールしてしまうわけです。

次のような入れ子のソースで、#wrapperの中身の#scrollareaをスクロールさせたいとした場合

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>

スクロールする要素包んでスクロールバーを作れば何も考えずに済む 😀 

<div id="wrapper">
<div class="scroll-wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

ので、そういうもの作ってみたというわけです（自分用に）
空要素作らなくて済むし一石二鳥かなぁと。

ViewDemo »

続きを読む

[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する

by

mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。

jQuery版も追々書き換えたい…。

こんなことします。

  • リンクの前にファイルタイプアイコンを追加
  • 別窓で開くアイコンと属性を追加
  • PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加

上記３つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて２～３文字のものです。オプションで設定してない拡張子にはアイコンは出ません。

拡張子以外にhrefの内容で判別するものは次の通り

  • mailto:　→mail
  • https://　→https
  • window.print() →print

矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。

ViewDemo »

続きを読む

[html] HTML5のサンプルソースと仕様メモ

by

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5　demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素 – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。（MIMEをXHTMLのにすればおｋらしい）
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性 – ping (a 、area要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性– id, tabindex, hidden
  • 廃止された要素 – center, font, strike

Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle＝各記事という扱いになるらしいが…。

続きを読む

[CSS] buttonタグの中に画像だけを入れる場合

by

フォームのボタンをカスタマイズする場合にオーソドックスなのは、

  1. type="image" を使う（タイプ属性にimageを指定する）
  2. inputやbutton要素にbackground-imageを指定する

の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。

普通に入れたらこうなるけれども、

CSSをちょっと弄れば…

中の画像入れ替えるだけでokな代物に。

続きを読む

[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ

by

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第３次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。

XHTML Basic　» Kanzakiさんの解説
XHTML Basic　» W3C仕様書

XHTML Mobile Profile » Openwaveのリファレンス

  Docomo au Softbank
表示対応機種 FOMAシリーズ
※機種によりimode-XHTMLの対応バージョンが異なる
（FOMAでも古い機種は未対応の様子）		 WAP2.0ブラウザ搭載端末 3GC型（SoftBank 3G series）
※頭文字が7-9の機種
文字エンコード Shift-JIS・UTF-8 Shift-JIS・UTF-8 Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8
※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される
DOCTYPE

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

(Locale/Ver.=ja/1.0)の数字がバージョンによって変化。
1.0、1.1、2.0、2.1、2.2、2.3

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">

※端末はDTDのチェックをしない

 <!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
"xhtml-basic10-plus.dtd">
対応画像フォーマット

iモードブラウザ1.0(XHTML)：JPG・GIF
iモードブラウザ2.0：JPEG・GIF・BMP

 JPEG・PNG・GIF
※256色インデックス以上は減色表示		 JPEG・PNG・GIF
最大ファイルサイズ imodeブラウザ1.0：100KB
imodeブラウザ2.0：500kb 		9KB（画像データ等除く）
画像込みではDocomoとほぼ同等		 300kb
絵文字 公式一覧ページへ
code.cside.com		 一覧ページへ 一覧ページへ
IPアドレス帯域 一覧ページへ 一覧ページへ 一覧ページへ
ユーザーエージェント 一覧ページへ
iモードブラウザ1.0機種の一覧ページへ
iモードブラウザ2.0機種の一覧ページへ		 一覧ページへ 一覧ページへ

Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考：全キャリア絵文字比較表（絵文字を使いこなして見るためのページ）

公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

続きを読む

[wp]投稿された画像のサムネイルが表示される記事一覧ページを作る

by

以前書いた記事　[WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。

Sample

表示するのは、記事に投稿された画像（のサムネイル）・記事タイトル・カテゴリー名、の３つとします。
記事に関連付けられていない画像（ライブラリから引っ張った画像）は表示されません。
※上記のサンプル画像のwordpressでは、サムネイルの最小サイズを100x100pxの切り抜き設定にして、それを表示しています。

※記事のギャラリーに投稿された画像のサムネイルを利用するもので、
2.9で実装された投稿サムネイル機能とは全く別物です。ご注意ください。

続きを読む