おびやまロボット研究所ブログ

レスポンシブ対応について：
スマホやタブレットの画面に合わせて表示させるレスポンシブ対応について。
PC画面でフルスケール出せるときは文字は横４０文字になっているが、幅が狭くなると文字が入らなくなる。
記事が、pre　で書かれてると、横を４０文字以内で改行をして記事を作っていても、画面の横幅を狭くすると画面が崩れる。

で書いて、改行は、
でないとレスポンシブル対応にならない。
プログラムリストは横幅が広いことが多いので、書き換えるのはかなり面倒。

youtube動画の埋め込みのレスポンシブ対応について：
youtubeで埋め込みリンクを表示させると縦横の幅固定値になってる。
https://hirashimatakumi.com/blog/6601.html
に書いてある通り、横幅100％、アスペクト比を設定しておき、iframe の外側を

で囲むと、
画面サイズに合わせて自動で100％にしてくれる。

そのほか：
アコーディオンメニューの幅が狭かったので、SP.cssを書き換え。
横幅を100％」にする設定。　PC用画面、タブレット画面、　スマートフォン画面それぞれで幅の設定が適応されるように書かないといけない。
スマホのアコーディオンメニューの文字サイズが小さい。これについては不明でこれから。
CSSを変更してもキャッシュが残ってることが多い、
PCだとSHIFT+F5、スマホだと、ブラウザのプライバシー設定のところで履歴を消す。


今見たページのアコーディオンメニューを開きっぱなしにするための改良：
contents.php　でコンテンツを読みだした後にサイドメニューを表示するので、コンテンツ内でスクリプトでチェックを入れても、サイドメニューに反映されない。
サイドメニューが表示された後にチェックを入れるようにスクリプトを書かないといけない。
ためしに、メインコンテンツとサイドメニューの順番を入れ替えると、表示がおかしくなった。また、レスポンシブ対応にするとメニューが先にきてコンテンツが後になるのでおかしくなる。
リンクで飛んだ後にもチェックボックスにチェックを入れた状態にするために、コンテンツ最初にアコーディオンメニューの番号を取得するように
スクリプトで記述
例


contents.php　のサイドメニュー表示後に、番号を調べてメニューのチェックボックスをチェックするスクリプトを書いたら上手くいった。
この処理は、コンテンツ表示時だけでよいので、トップとヘッドメニューのページにはこのスクリプトを書く必要なない。