気ままに綴る独学メモ帳
「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？
スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。
下へスクロールするボタンとトップへ戻るボタンを１つのボタンで実装するサンプル。
スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。
500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。
同タイトルの質問より。 もうちょっと具体的にソースを書いてみる。 index.html（フレームを呼び出すページ） iframeのsrc属性で、ファイル名に続けて適当にパラメーターをつける。 inner.html（フレー … 続きを読む
clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、
::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
大きく分けると３つです。
ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。
名称はページングだったりページネーションだったりしてますが、海外だとpaginationの方が一般的なようです。
先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。
１０周年記念にVue.js版を書きました！
[Vue] ページネーション機能の作り方とコンポーネント作成入門
2019/09/12 Vue版に合わせて全面的に書き換え＆動作サンプル追加しました
スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ（class-wrapper）と同じだから、マウスホイールで微調整したくなる場合もある。
使い方はファイル落とせば分かると思うので省略。
オプションは次の通り
options: {
className:'slide', // スライドするエリアのクラス名
prevArrow:'-previous', //前にスライドする矢印の接尾語
nextArrow:'-next', // 後にスライドする矢印の接尾語
removeArrows:true, //先頭と最後にスクロールしたとき矢印消すかどうか
fadeArrows:false, // 矢印にフェードエフェクトつけるかどうか
startOpacity:0.5, //フェードエフェクトがスタートした時の矢印の透明度
endOpacity:1, //フェードエフェクトが終わった時の矢印の透明度
mouseoverBox:true, //スライダー内にあるULとLI要素にクラスを追加するかどうか
startClass:'normal', // マウスアウト時に追加するクラス名
endClass:'over', //マウスエンター時に追加するクラス名
speed:5, //スクロールスピード（10:fast 1:slow）
transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},
カスタマイズ部分のソースのみ掲載してます。
inoccoさんが作成されたリンクに新しいウィンドウを開くアイコンを自動で追加するプラグイン
AutoExternalLinkをVicuna用に修正してみた話。
プラグイン添付のjsファイルはLogJETさんが作成されたそうなんですが、
そのまま使えなかったので変えてみますた。
修正箇所は次の通りです。
１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。
左：１行間隔でセルの背景色変える
右：３行間隔で線を引く
メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。
見てるページのメニュースタイルを変更すると
ロールオーバースクリプト（画像名のOn/Offで判別）を足したソースです。
プリロードはついてません。
放置してたメールボックスを受信してみたら1000通もスパムが溜まってた。さすがに驚いた。
スパマーはWebサイトに記載されてるメアドをgoogleのクローラのようなbotで拾っていくとか。
直接メアド書くのは最早時代遅れとなりつつあり、お手軽な方法としてはエンティティ化が流行ってる様子。
でも唐突にエンコード文字があると逆に怪しいと思うんだけどどうでしょう。
個人的にはあのクソ長い文字の羅列はあまり好きじゃない。ソフトが勝手にデコードしたりするし。
そこでmailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプルを。
前にmootoolsで書いたけど、今回は普通のjavascriptで。
リンクの説明、Javascriptのコード表示、バナーのURL表示に使えるテクニックです。
ページがロードされたn秒後に非表示にしてた要素を表示するサンプル。 エフェクトつけてもいい感じ。 <div id="disp" style="display:none"> … 続きを読む
使用頻度の高いフォームボタンのメモ。
主にJavascriptを使用したものです。
XHTML形式のinputとbuttonの２タイプ用意してみた。
onclickとonkeypressを別のタグ（aとか）に書いても機能します。
ウィンドウを閉じる
<input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" /> <button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button>
季節（４カ月おきくらい）でイメージ画像を自動更新するスクリプトのサンプル。
しかしこの間隔ならスクリプト使うこともない気がする。
<img src="images/00.png" alt="季節で変わります" id="change" width="500" height="200" border="0"/>
変更したい画像にIDをつける。サンプルではchangeとつけた。
お問い合わせフォームの先頭のテキストエリアとかに、ページが開いた時フォーカスを合わせる方法について。
name、ID、配列の各サンプルを挙げてみる。
name値の場合
window.onload=function(){document.formID.inputName.focus()}
formIDがフォームタグのID値
inputNameがフォーカス合わせるフォームのname値。
bodyでイベントハンドラでもいい。
<body onLoad="document.formID.inputName.focus()">