気になる

アフェリエイト旅行

自動車

家庭菜園

« ちくわを、マヨカレー醤油でカリッと頂く | トップページ | ニンニク、背丈が軽く20cm越えになりました »

2015/03/26

HTML5&CSS3を始めてみよう!サクサク作れてPC版もスマホ版も1つでOK♪

ホームページ作成方法はいくつも変化を遂げ、難解な時代に突入時チトくじけて放置状態にあったHTML言語ですが、ようやくブラウザとかも一つの方向に対応してきたようなので、久しぶりに技術取り入れのために、HTML5&CSS3に挑戦。w

本屋で平積みされていた「HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)」が、パラパラっと見た感じ良さげだったので購入。

ここ3日程で、書籍に書かれている指示通りにホームページ・サンプルを作ってみました♪

<IEでのブラウザ確認>

おぉ!サクサク作れてPC版もスマホ版も1つでOK♪簡単に出来るようになったじゃないかー。w ヾ(=^▽^=)ノ で、問題の多いIE8で確認してみると・・ガックリ。おぃおぃー右メニューがそっくりカラム落ちしてるしぃ。

Chapter3サンプルをIE8に対応させるべく、IE11バージョンで確認すると
表示が崩れてる。≡≡≡≡≡ヾ(>▽<ヽ)エッ!?

━━━━━━━━━━━━━━━━━━━━━━━━━━━

<つまづき:1>
IE8表示で右側メニューが見事にカラム落ち。ヾ(≧◇≦)

───────────────────────────

.jsファイルを利用して見るも・・

  • HTML5を利用できるように「html5shiv.min.js」
  • CSS3でのメディアクエリを利用できるように「respond.min.js」

※Media Queries(メディアクエリ)で適用対象:
ユーザーの画面サイズに合わせてCSSが切替可能

理想は・・

やってみたが、あれ?変わらない。w ・・カラム落ちって。原因はカラム設定が間違ってる???根本的に私の記述ミス?f(^^;)

<どこでつまづいたか確認作業>

しょうがないので・・新規ファイルを用意して、Chapter3で作ったファイル再現をしていく。

  1. Chapter3ファイルを、別名で新規保存。
  2. スタイルシート部分全て消去して、きれいなHTML文だけにする。
  3. そこにスタイルシートを足していく作業、確認したいのはカラム落ち部分
    なので・・その部分のみ書き加えてみる。

<style type="text/css">
   
/*Box3とBox4を横並びさせる設定*/
.boxA:after {content:"";
            display:block;
            clear:both;}
            
.box3        {float:left;
            width:70%;}

.box4        {float:left;
            width:30%;}   
</style>

で、IE8で確認すると・・おぉ!待望の(メニューがちゃんと右横に)表示されてカラム落ちをしていないことが分かった。(*- -)(*_ _) ちなみに.js 無しで十分OK。

が、IE7とIE5はカラム落ち状態。
ちなみに.js 書き込むと・・IE5ではグレーの枠しか出現しなかった。なんじゃこりゃ。使い所ちゃんと考えないとなのかなー。でもいい加減IE5使っている人は居ないっしょ。w

次に、@mediaを利用して768px以上の時に表示されるように設定すると・・

/* ############################# 768px以上 ### */
@media (min-width:768px){
/*Box3とBox4を横並びに配置*/
.boxA:after {content:"";
            display:block;
            clear:both;}
            
.box3        {float:left;
            width:70%;}

.box4        {float:left;
            width:30%;}

}

なるほど、再現のカラム落ちしました。

でわ、この部分を<link href="common/css/media-queries.css" rel="stylesheet" type="text/css">として外に出すと・・

カラム落ちすること無く、希望通りの表示が出来ました。。。(/。\)(/。ヽ)
面倒だからと1つのファイルの中にずーっと記述してたことが、カラム落ちの原因?

教書P101のパーツ間隔を調整するで、下記の部分を追加すると・・DWでは表示がカラム落ちとなりましたが、IE8では希望通りの表示が出来ました。

/*Box3とBox4をの左右の間隔*/
.box3 {padding-right:50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;}   

DWで表示崩れるとやりづらいなぁ。。。

.box3 {padding-right:0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;}   

太字部分「0px」にするとOKだけど、「1px」だとすぐに落ちちゃいます。
どう考えても、幅オーバーってこと。。。

思い出しました。≡≡≡≡≡ヾ(>▽<ヽ)!?
リストを好みの画像を設定して、パディング勝手に付けてたこと!!!その部分をコメントにして「/*Box3とBox4をの左右の間隔*/」数値を元の「50px」にすると、見事に表示できました。ガーン、やっぱりCSSはルールが厳しいなぁ。。。

━━━━━━━━━━━━━━━━━━━━━━━━━━━

<つまづき:2>
.boxAの中の「.box3の写真の上に、右半分.box4が載った状態」で表示される。。。

───────────────────────────

IE11と比較すると「.box3の写真」が想定外にデカイ!から、.box4が乗ったように見えている?多サイトをググってみてもimgの記述方法は間違ってないみたい。まさかと思いつつ「[if lt IE 9]」の位置を「</head>」真上に書き直したら・・表示がキレイになりましたとさ。f(^^;)

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

ファイルを読み込まれる順番で表示が変わってしまう。ってことなんですね。

※img {max-width: 100%;}
画像が表示領域枠に合わせて縮小してってくれる。便利ですねー。

━━━━━━━━━━━━━━━━━━━━━━━━━━━

<つまづき:3>
.box4の.osusume img、画像がデカイっ。(*- -)(*_ _)
と、共に表示画面ブラウザ幅を小さくするとカラム落ちは正解だけど、画像もっとデカ!

───────────────────────────

先ほどの学習で・・img {max-width: 100%;}としたら、希望通りの表示になりました。ホッ

.osusume img {
/*width:100%;*/
max-width: 100%;
height:auto;
border:none;
vertical-align:bottom;}

━━━━━━━━━━━━━━━━━━━━━━━━━━━

<つまづき:4>
「関連記事」とする、liで横並び4つ表示OK。
が、表示画面ブラウザ幅を小さくしても2ツ並び2段にはならず。

───────────────────────────

うーん、.kanren li:nth-child(3) {clear:both;}ってCSS3だから?IE8では無理?

------------------------------------------------------

<どうして未だにIE8のサポートが必要?>

WindowsXPサポート終了期間が終わっても未だに使われていることに問題があるんですが、このOSってIEは8までしかバージョンアップできないんですよね。(Windows Insider用語解説:IE8との互換性を向上させるIE11のエンタープライズモード - @IT

« ちくわを、マヨカレー醤油でカリッと頂く | トップページ | ニンニク、背丈が軽く20cm越えになりました »

趣味」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/114130/61339986

この記事へのトラックバック一覧です: HTML5&CSS3を始めてみよう!サクサク作れてPC版もスマホ版も1つでOK♪:

« ちくわを、マヨカレー醤油でカリッと頂く | トップページ | ニンニク、背丈が軽く20cm越えになりました »

google検索

  • Google


    このブログを検索
    ウェブ全体から検索

カテゴリー

ニュース

  • 日経平均(長期)

    株価ミニチャートのブログパーツ
  • 経済指標(発表と内容)へのリンク
    http://jp.investing.com/economic-calendar/
  • 経済指標
  • . . .
  • 日経平均チャート
    by 株価チャート「ストチャ」
  • 株指標
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30