ラベル レスポンシブデザイン の投稿を表示しています。 すべての投稿を表示
ラベル レスポンシブデザイン の投稿を表示しています。 すべての投稿を表示

2023/02/13

ホームページをbootstrap4を使ってリニューアル

何年ぶりかのトップページ再々リニューアル

何年間もこのまま
何年か前にリニューアルしたホームページのトップページを再リニューアル。このところ毎日bootstrapを使ったレスポンシブページの作り方をYouTubeで見ていたので、少しは以前よりは良いページになるかも?とおもい、少しづつやってみました。

 

DreamweaverからCoda2 そしてVisual Studio Code

以前やった時にはAdobeのDreamweaver を使っていたので、コードの打ち込みは無かったのですが、金の掛かるDreamweaver からCoda2 そして今は Visual Studio Code 。Coda2からはコードの打ち込みだけになってしまい、それまでとは全く違った環境になりましたが、これがDreamweaver 使っていた時より楽しい作業なのです。鈍足のDreamweaver と違い動きが軽いという事も楽しく感じる理由の一つなのかもしれません。 Coda2からVisual Studio Codeに換えたら、動きはより軽くなったような気がしますが、これはパソコンが高性能なものに変わったという事もあるのでしょう。 コードを打ち込んでいくと、リアルタイムでそのページが仕上がっていくのを見る事も出来、これなら金の掛かるDreamweaver など使う人も減っているのかもしれません。 以前はYouTubeに沢山あったDreamweaver関連の新しい動画は全くといって良いほどありませんでした。

 

bootstrap3から4に進化してた!

さて、始めてみようと取りかかったところ、bootstrap のバージョンが以前作った時のbootstrap3 ではなく4になっていて、その文法違いに四苦八苦。 現在の最新パージョンはbootstrap5 まで進化しているようです。 かなりの部分が部品化されていて、それを使えば楽に出来るらしいのですが、そこから少しでも外れようとした途端にわからなくなってしまいます。 文字や画像のセンター表示だけでも一苦労。 こんな単純な事がなぜ出来ないのだ? と言いながら3歩進んでは2歩下がる。

 

何とか完成

苦労の甲斐あって前作よりは少しはまともになったように思うけど、所詮、材料がそれ程ないのだから、大きく変わりようもないのです。 トップページのリニューアルもこれが最後になるのでしょう。
Visual Studio Codeを使ってリニューアル



2018/10/26

Full Page Screen Capture

Google Chrome の拡張機能で良い物を見つけました。
これまでブラウザで閲覧中のページを印刷しようとしてもあまり問題は無かったのですが、モバイル対応したレスポンシブなページでは旨く印刷できなくなってしまいました。

自分の作っているホームページも、見てくれている人から「印刷できない」と言われ、色々やってみたのですが、どれも旨くいかず諦めました。

background で指定したものが全て印刷されずに白くなってしまうというのが一番の問題なのですが、これはカラー指定もダメ、画像を指定したものもダメ。

もうどうでも良い、と思っていた所、Google Chrome の拡張機能で「Full Page Screen Capture」という面白いツールを見つけました。これはページの頭から最期までを繋げてキャプチャーしてくれるもので、ファイル形式はpdfか画像(png)を選べます。

試しにやってみた所、見事に細長い画像ファイルが出来ました。
あとはこれを印刷すれば良い訳で、用紙にあったサイズに分割し印刷されます。

ホームページの中でこのファイルにリンクさせておけば、これをダウンロードして印刷して貰う事が出来る事になります。
ファイルサイズもそれほど大きくはならないので済みます。

試しにブログをキャプチャーしてみたところ、半端でない縦長の画像になりました。あまり長くなると適当なところで分割され、複数のファイルにしてくれるようです。


2018/04/27

bootstrap4 大苦戦

もう少し簡単に理解できるかと思っていたbootstrap4でしたが、変更の度合いが大きく、クラス名も変わっているものも多く、大苦戦です。
ナビゲーションの為のパーツ、navbar など付け加えられたクラスが多く、もう頭の中はパニック状態です。なんで、リンク項目が左に寄っているんだ? これ自分のミスかと思ったら、どうやらデフォルトではそうした仕様のようです。
苦労してbootstrap4 にしたところで、チョット見には、殆どの人は何も気がついてもくれないでしょう。その程度の事の為に四苦八苦しているとなんだかバカバカしく思えてきてしまいます。これまでの3でも良いじゃないか.......
うう、そんな気持ちに負けそう.....

2018/04/21

bootstrap4


これまでホームページ(趣味の範囲)はパソコン画面に応じたデザインでしたが、1年ほど前からモバイルにも対応したレスポンシブなデザインにトライしてきました。

デザインなど全く素人の自分ですからパソコン画面にもモバイル画面にも対応できるデザインなど出来るはずが無いです。
そんな訳で、洒落たデザインのページにはなりませんが、一応はどちらでも何とか見る事が出来るページにはなりました。

1年掛けて少しずつでも進化してきたと思っていたら、今年に入りbootstrap3 からbootstrap4に変わりました。

これから作る新しいページはこれで行けばいい、と思っていたらどうやら互換性は無いらしく、これまでbootstrap3で作っていたサイトを4にするとレイアウトがガタガタに崩れてしまうようなのです。

これから作るページだけでもbootstrap4にするには別のサイトにするしかないらしく、これでは些かギブアップ気味でガッカリ。

そんな時、今契約しているレンタルサーバーで、サービス期間中に新規契約したユーザーには独自ドメインの無料サービスをしている事を知りました。よく調べてみたら自分も資格ありです。管理料も無しでこのレンタルサーバーを使い続ける限り、その間はもう一つの独自ドメインを使えるようなので、さっそくこのドメイン申請をして新しいドメインが使えるようになりました。こちらに新しいサイトを立ち上げ、こちらはbootstrap4で運用すればいいはずです。

問題はここからです。

こうしたやり方は以前にも少しの期間やった事があるので問題は無いはずですが、やはり面倒です。これまでは一つのサイトで纏めてきた自分のHPを分割して、新しく得たドメインはbootstrap4にして、この二つに分かれるサイトを旨くリンクさせて見かけ上は一つになるように運営しようと考えていますが、果たして旨くいくのか?

縦方向の中央配置
bootstrap3のグリッドシステムでは横方向の配置は中央に出来ましたが、縦方向の中央配置はかなり工夫しないと出来ませんでした。

左のカラムに画像、右のカラムにはこれに関したテキストなど入れようとする場面は結構あります。こうした場合、ウィンドウの幅により文章の行数が変わってしまうので、見た目が崩れてしまう事があり、これを何とか上下中央に配置する事が出来れば!とずっと思っていました。
どうやらbootstrap4ではこれがサポートされたらしく、自分にとっては、4にする理由はこれだけでも十分です。
まだ試しはしていませんが、次に新しいページを作る時には bootstrap4で運用するサイトでトライしてみようと思います。
カラム設定もかなり融通が利くようになったようです。

取りあえずはbootstrap4の手引き書くらいは揃えなければ!。
ネット上の無料講座だけではいささか苦しくなってきました!

2018/04/18

bootstrapで5カラム


これまでbootstrap のグリッドシステムでは12を割り切れる整数のカラム数しか出来ないと思っていましたが、5カラムにする方法を知りました。
参考にさせて貰ったのはこちら

自分のHPは元々大したものでは無いので、5カラムになったところであまりどうって事は無いのですが、ずっと「何とか5カラムに出来ないか?」と思っていた自分には大きな出来事?です。

ここまで来ると次にやってみたいのは上の段は5カラム、下の段は上の段の間に入る形で4カラム、といった形にしたいのですが、オフセットを使っても旨くいきそうもありません。
自分のスキルではチト無理そうです。でも、5カラムに出来ただけでも66.5歳の自分には大満足です。

5カラムで作ってみたページはこちら。



2017/10/02

safariのカラム落ち 解決!!

safari でもカラム落ちしていません
半年以上悩み続けてきたBootstrap のグリッドシステムでのカラム落ち、それもsafariだけに起こる現象のため訳が解らず既に半年以上、というかそろそろ1年経ってしまいます。
問題の起きるブラウザはsafariだけなので(iPhoneのsafariやchromeでも起きていましたが..)いささかもうどうでも良くなっていました。
それでも出来る事なら問題解決してスッキリしたいところです。
今までも、原因はこれだ!!思いつく度に何回も試して来ましたが、最終的にはどれもダメでした。再々再々再々再々度のトライでようやく何とかなったような....

まずは各カラムの幅指定を改めてcssの中でしてみました。bootstrap の既成のクラスの中で指定されていると思いますが、cssの中でこの幅指定を変えてみました。




.col-sm-4{
width: 33.2%;
}
.col-sm-3{
width: 24.9%;
}


早い話、全体で100%にはならないようにしただけの事。
bootstrap のcssの中で は4カラム使う場合は33.33333%となっているのだと思いますが、カラム落ちするという事はカラム幅がオーバーしている事なのだろうと、これを少しだけ減らしてみたのです。結果はバッチリ。safariでもカラム落ちは起きませんでした。どうやらsafari の中での画面幅の扱いがchrome や firefox とは少し違うようです。
これで万事解決と思い、これまで作ってきたページを全て修正して一件落着、と思いきや、iPhoneで見てみるとパソコンで見る画面そのままで1カラム表示に切り替わってくれていません。
ここでまたまた頭の悩みが増えました。

ええーー、どういう事なんだ? どうも訳の解らない動作をします。
そこで思いついたのがメディアクエリによる各ブレークポイントでの幅指定。
試しに768pxにブレークポイントを作り、それ以下での表示を100%にしてみました。
具体的なcssは以下のような簡単なものです。

@media (max-width:768px){
.col-sm-3, .col-sm-4 {
width: 100%;
}
}


ナント、これが大当たり!

慣れている専門の方には何でも無い常識的なことなのでしょうが、66歳の頭にbootstrap を理解させるのは結構厄介です。でもまぁ、解決出来たのですから、凄いーーく嬉しい!!!

2017/07/30

グリッドシステムで右端の余白

昨夜、自分のHPのちょっとしたミスに気が付きました。と、言うのはレスポンシブになっているページの幾つかのページで、何故か横スクロールバーが表示されていて、少しだけ表示されていない部分があったのです。このスクロールバーを動かして、右端まで表示させるとそこには訳の分からない余白が出来ていました。こうしたページをiphoneで開いて見てみると、縦スクロールと共に少しだけ横方向へもぐらぐらと動き横スクロールしてしまっていました。
レスポンシブになっているのなら、常に横全体が表示されているからスクロールバーは出て来ない筈です。気が付かなければそのままだったのでしょうが、分かった以上、すぐに直しておきたいものです。そこから深夜、ベッドの上でMacbook Air で悪戦苦闘。上手く行っているページと駄目なページの違いを見つけようと、cssやhtml を調べても何とも分かりません。簡単に解決するだろうと思っていた事が意外に厄介です。ネットで調べてみるとどうやらiphoneやiPadなどのいわゆる iOSで起きる問題のようですが、自分の場合はMacのsafari でもchromeでも同じような症状が出ていたので、これらとは別の原因に思えます。
そんな中で見つけた記事に<body>タグ以降を全部含んだ<div>を作りこのdiv要素にwidth: 100%; とoverflow: hidden; を指定すれば良いとの事。
それまで試してみた事とはだいぶ違うので、これならもしや?と思いやってみたら、一発で解決。でも、この記事の著者もこれで治りはしたけど、原因が何なのかは分からないと言っていました。原因を想像するに、何かがはみ出していると考えられますが、それがどこなのかはただコードを見ただけでは分かりませんでした。
原因がどうであれ、これで解決できたのですから、今度からはcssの最初にまずこいつを、おまじないと思って書いておこうと思います。

でも、safariでのカラム落ちは未だに解決していません。こちらはもう諦め気分です。

2017/07/12

safariのカラム落ち その後

左 safari   中 Chrome  右 Firefox

左から safari  Chrome  Firefox  それぞれのスクリーンショットです。
bootstrap のグリッドシステムを使った場合、safariだけが右端のカラムが落ちてしまう、いわゆるカラム落ちが起きてしまうのですが、なんとしても原因が分かりません。コードを見ても別に問題ないようだし、Chrome や Firefox では問題ないのでやはりsafariの問題なのでしょうか。safari 10.1からは対応しているとの事ですが、もうギブアップ。
因みに、G5 iMac (Tiger)で動いている古い safariでは他の問題はあるにしてもカラム落ちは発生しないので、ますます訳が解らなくなります。
Windows機でのChrome や IE でも問題なく表示されていました。

2017/07/05

Bootstrap グリッドシステムでカラム落ち

トップページは何とかなったものの、不具合もあるのです。ブラウザによってグリッドシステムで複数カラムのレイアウトにすると、パソコンで見ると、chrome やFirefoxでは問題ないのに、Apple のsafariだけは右端のカラムがカラム落ちしてしまいます。それも最初の行だけ。これはいろいろと試してみたけど、どうしても解決出来ませんでした。Safari の仕様と思って諦めたいところだけど、ネットで調べてみてもそのような事例が無い所をみると、自分が何処かで間違っているのかも?
これはiPhoneでも同じで1カラムにすればいいのですが、2カラム以上だとやはりカラム落ちが発生します。 
いささか諦め気分。どちらもApple 絡みで問題発生という事は、safari に問題でもあるのか?
そのうちに何か解決法が分かるかもしれません。取りあえずはモバイルの場合は1カラムにすれば問題は発生しないようだし、パソコンの場合もブラウザはsafari を使わなければいいみたいだし............。
でも悔しい! 何でだろう?

2017/07/03

ホームページ、リニューアル


レスポンシブデザインにしてモバイル対応したトップページ
2000年に立ち上げた私のホームページですが、17年間基本的なレイアウトは変わらずに来ました。しかし、いかにせん時代遅れのお粗末なトップページなので、17年ぶりに大幅に変更しました。
まずはBootstrap を使って、レスポンシブなWebページにするのが一番の目的です。苦労しながらも何とか作り上げてみました。ただ、今までのメインは自分の住む地域を題材にしたもの(当初は)でしたが、これもそろそろ割り切って削除しなければ!と思い進めましたが、やはり捨てきれないものです。
仕方なし、こちらは何とかリンクを残して生き延びました。
他にも、グライダーの訓練していた頃のページとか、旅行のページとかなんやかんやといろいろ残っています。
何とか、いろいろなリンクを張り直し、辻褄だけは合わせたつもりですが、もしかしたらリンクが可笑しくなっている所もあるかも? まぁ、あっても無理はないです。むりやりに17年間誤魔化しながら拡張してきていますから、よくリンク切れも起こさずに何とかあっちこっち飛んで行ってくれていたものです。
まだトップページは完成版ではなく、もう少し継ぎ足す予定。
一応、トップページはレスポンシブページですから、モバイル端末でも見やすいかと思います。
私のHPはこちら