当サイトのスマホ対応がようやく完了しました(`-д-;)
ちなみにPC版とスマホ版はこんな感じ!
見落としている箇所や、まだいじりたい所があるのですが、
他にもやることは沢山あるのでひとまずここでスマホ対応終了ーーー!!!
この記事では今回のスマホ対応で役に立ったCSSなんぞをご紹介しようと思います。
スマホ対応に役に立ったCSS 目次
はみでた画像を縮小して画面に幅をあわせる
画像が大きくてスマホで見ると横スクロールが出ちゃう時の対処法。
スマホの画面に合わせて自動で縮小させるCSS。
img { max-width: 100%; height: auto; }
これでスマホの小さな画面にもピッタリフィット♡
はみでたURLを折り返す
長いURL(英文)が、自動で折り返されず
スマホ画面を突き抜けて横スクロールがでちゃう時のCSS。
body { word-wrap: break-word; }
これで画面幅に合わせて自動でテキストが折り返されます。
CSSでグラデーション
Ultimate CSS Gradient Generator で簡単にCSSが作れます(^^)♪
グローバルナビと見出しにグラデーションを使いました♪
グローバルナビの横幅を均等にする
HTML
<ul> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul>
CSS
ul { width: 100%; display: table; table-layout: fixed; } li { display: table-cell; }
はみでた文字を「・・・」で省略する
ぱんくずリストとか、文字が2段になってコンテンツが押し下げられるのって嫌じゃないですか。
だからはみ出た部分(2段目に当たる部分)を省略しました。(邪道かも)
HTML
<ol> <li><a href="">HOME</a></li> <li><a href="">親ページ</a></li> <li>現在のページ</li> </ol>
CSS
ol { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ol li { display: inline; }
文字を省略したい要素に以下のの3つのCSSを指定してあげるだけ!
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
中身がインラインの時しかきかないから、 <li> を display: inline; してます。
スマホ対応した感想
ミニチュアなサイトを作ってる感じで楽しかった!
またやりたい!いっぱいサイト作りたい!
コンテンツ作りよりもサイトカスタマイズの方が楽しいですw
でもコンテンツも作りも頑張ります〜!