WEBサイト制作上、CMS(私は最初MovableTypeでのちにWordpress)のお陰で、どんどん新しいHTMLとCSSに出合えて刺激になっていた。
「こんなことが出来るんだ」と目にするだけで感動。でも、どうヤルのかは分からないまま、いつか自分もヤってやるぞと。
昔のまんまの静的ページでも一応表示されるし、ブラウザが違うと多少崩れるところがあっても、自分の環境ではフツーなこともあって、詳しく調べずにそのまま放置してた。
だって一般人向けの分かりやすい本もそうなかったしね。
ネット検索は私にとって中途半端な理解しか得られず限界あった。
スマホやタブレットなどが普及して、一番困るのはブラウザでのwidthだった。レスポンシブWEBデザインと言うらしい可変ワザを今日はやった。
本を読み進めながら頑張ったお陰で首、肩、腰がハンパなく痛い。
また、JavaScriptのスライドショーも端末ごとに表示されるワイズの調整ガンバったね。.jsファイルはそのままでCSSやHTMLを書き換えて試しながら。
このメタタグは端末のブラウザ表示サイズに合わせてくれるそうだが。
meta name=”viewport” content=”width=device-width,initial-scale=1″
スライドショーは縦にスライドするのや、横にスライドするの、両方作ってみた。スマホで見ることを考えたら縦スライドがいいかと思うが、横スライドで画像にテキスト乗せるのもカッコいい。以前に借りていたフラッシュみたいになるし。
jQueryのスライダーで有名なslickはカスタムし、一応は画像サイズをデバイスごと可変に、テキストも乗せられた。
画像枚数が多いので下のドットはいらんワ、と思いscript内でdots:trueは削除したけど、やっぱりdots:falseにした。だけどそこが空白になって場所をとってるみたい。
variableというスライダーは、ブラウザサイズが縮小されると縦の長さはちゃんと出るが横幅が途中で切れているので、script内のvariableWidth:true;も削除。あ、その前にCSSの.slider img {width:100%;}に加えてheight:auto;を入れた。ここに起因してるのかも。
「バーンヘイブン ダブルプリムローズ」のスライドショーのページ
でもここまで来るのは大変だった。HTMLもCSSもほとんど忘れてたし、W3Cのバリデーションやりながら苦難の連続だった。
HTML5・CSS3のほかに新しいことも覚えた。
ブラウザのデベロッパーツールの使い方が多少分かってきたし、HTML・CSSのエディタとしてBracketsというのもちょっとずつ出来るようになってきた。まだまだ使いこなせてはいないが、少し使いだしてみるととても便利なのが分かる。
W3Cのバリデーションでは、imgにalt=””を入れろとエラーが、sectionにタイトルとなるh2~6のいずれかを入れろと警告出た。
imgにはalt=”Double Primroses image”をつけ足した。
が、section.sliderの中にh2を入れると一枚目の画像が横スライドさせないと出てこない。よってこれだけはムシさせてもらう。エラーじゃなくて警告だし。
参照させるjQueryサイトの.jsだが、最新版が良いかと思ってURLを書き直したらスライドしないで画像が並ぶだけになってしまった。なんでもかんでも最新版が良いわけじゃない事もあるらしい。
また、スクリプト内 src=”＊＊＊/jquery-2.2.1.min.js” の次に以下を書き足した。jQueryサイトに書いてあったから。
integrity=”sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=”
crossorigin=”anonymous”
（ここから翻訳）この属性integrityとcrossorigin属性は、SRI（Subresource Integrity）チェックに使用されます 。これにより、ブラウザは、サードパーティ製サーバでホストされているリソースが改ざんされていないことを確認できます。SRIの使用は、ライブラリがサードパーティのソースから読み込まれるときは常にベストプラクティスとして推奨されます。srihash.orgでもっと読む（ここまで翻訳）script内のtype=”txt/javascript”とcharset=”utf-8″も削除した。