HTMLスマホ&PC両対応にはリキッドスタイルが最適

こんばんは! Benです。 今週はいよいよ職場のスマホ対応WEBサイトへの更新です。色々神経を使いますが、スマホやタブレットとか画面解像度が異なる機器で一つのWEBコンテンツで表示させるレスポンシブ対応デザインを使っています。そのうえで大事な基本をノートします。 昔のホームページはこんな感じでtableタグを使ってレイアウトをしていることが多かったです。これは幅を…

続きを読む

WEBページでスマホは幅全体でPCは最適幅で

おはようございます! 会社のWEBサイト刷新中のBenです。今日、1支社の担当者が作業期限を2週間過ぎて催促したら「何をすればいいのかわからない」とメールが 切替まで一週間なのに・・・ということで気を取り直してWEBサイトのスマホ対応の続きです。 IT勉強ノートbyフクロウ こんばんは! Benです。今日は風が強くて道を歩いていたら突風に飛ばさ…

続きを読む

スマホ&パソコン両対応のWEBサイトを作ろう②

こんばんは! Benです。今日は前回の続きで具体的な作業になります。 スマホでホームページを見るとちょくちょくこのように妙に余白が多くて文字が小さいページがあると思います。 にわか管理者のIT勉強ノート にわか管理者のIT勉強ノート こんにちは! Benです。 今日はレスポンシブ対応のWEBデザインについてB…

続きを読む

スマホ&パソコン両対応のWEBサイトを作ろう①

こんばんは! Benでございます。最近連日残業ですが、そのほとんどが職場全体のWEBサイトの更新です。 現在のWEBサイトは5年くらいたつのでデザインも古いし、継ぎ足していくたびにコンテンツがコテコテに 素人の手作りっぽくて嫌だという意見がありつつ、プロに依頼する予算もない…ということでに白羽の矢が立ちました。今回の更新の最大の売りが「スマホ対応」です。それもコンテンツ作成が面倒でないよう…

続きを読む

レスポンシブメニューSmartMenusを実装しよう

こんばんは! Benです。 職場のWEBサイトのリニューアル作業真っ最中ですが、その中でプライベートでも使うjQueryを用いたレスポンシブメニューの実装をノートしたいと思います。 今回使ったのはSmartMenusというものです。以前、Flexnavというものを実装していたのですが、動作確認段階で、ブラウザのウィンドウ幅を変えたりするとメニューの開閉がおかしくなる現象が確認され…

続きを読む