2016年 6月 の投稿一覧

画面がはみ出す(iframeタグ)

ラグビーボールを転がしてそれを追いかける。自分のWEBサイトのTOPページにそのありさまを載せたくて、バタバタと canvas のお勉強をし直し、ボールが壁に当たって跳ね返るサンプルコードをネットで見つけてそのボールをラグビーボールと私のおじんラガーアイコンに置き換えて背景を芝のグランドにして完成したのでちょっぴり満足しておりました。

スマホで見れるWEBサイトの構築を目指しているのでパソコンのブラウザで幅を最小にしてチェックし、Nexus7でも見え方をチェックしてうまく動いているので安心していました。

pctab

ところが、急に起動しなくなって放置していた IPHONE5 がこれまた突然復活したのでコレでTOPページを見たらボール転がしの画面がはみ出ているのです。

iphone

iframeタグを使ってTOPページにボール転がしの画面の HTML を呼び出して表示しているので、背景画像の大きさや canvas の表示部分の幅と高さの調整をしましたがうまくいきません。

facebook でぼやいていたら HTML5 のなかしまぁ師匠から救援のコメントがありました。画面が css では可変、iframe では可変ではないので表示するデバイスの幅が小さくなるとはみ出ることがわかりました。

そこで転がし画面の HTML の viewpoint の設定を調整しましたがダメダメでした。どうも wordpress でこのサイトのTOPページを作っているのでこの wordpress のテーマのcss のほうもいぢらないと転がし画面のはみ出しは治らないようです。

プログラムは基本サイクルがありますよね。”定義”→”調整”→”実装”→”修正”と回しエラーがでたら元に戻ります。今まさに ”修正”の局面で元に戻るところです。gengen33ドットコムのTOPページはHTML5 の修行の場(道場)なのではみ出したところはそのままにしておいてどうしたら奇麗な見栄えになるのか新しい ”定義”→”調整” です。

最後に私の拙いWEBサイトに来てくださる皆様、画面がはみ出たままでガメンなさい。






JavaScript実戦演習(画像の切り替え)

HTML5 レベル2 の試験勉強も教科書を順繰りに読んで問題演習を繰り返してもコードリーディング主体の問題には太刀打ちできそうにないですよね。そこで JavaScript のお勧め書籍(文末にリンクあります。)のサンプルコードを叩いて自分流にアレンジ(改悪かぁ?)して gengen33 ドットコムのTOPページに取り込んでおります。

今日はサムネイルの ”クリックによる画像の切り替え” です。

image

大きな画像に id属性、サムネイル画像に class属性をつけて、マッチする要素すべてを取得するには documentオブジェクトの querySelectorAllメソッドを使用するところがポイントですネ。

成果物はこんな感じ。

サムネイル画像のサイズが不揃いなのが私らしいとろですよね。

うーーーん。これをTOPページに載せるとなるとなるとサイズ調整が大変そうだなぁ……。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

新品価格
¥2,678から
(2016/6/10 13:41時点)