ブログ・サイトのスマホ対応で役に立ったCSS

当サイトのスマホ対応がようやく完了しました(`-д-；)

ちなみにPC版とスマホ版はこんな感じ！

PC版とスマホ版

見落としている箇所や、まだいじりたい所があるのですが、
他にもやることは沢山あるのでひとまずここでスマホ対応終了ーーー！！！

この記事では今回のスマホ対応で役に立ったCSSなんぞをご紹介しようと思います。

スマホ対応に役に立ったCSS　目次

はみでた画像を縮小して画面に幅をあわせる

画像を画面に合わせたい

画像が大きくてスマホで見ると横スクロールが出ちゃう時の対処法。
スマホの画面に合わせて自動で縮小させるCSS。

img {
max-width: 100%;
height: auto;
}

これでスマホの小さな画面にもピッタリフィット♡

はみでたURLを折り返す

長いURL（英文）が、自動で折り返されず
スマホ画面を突き抜けて横スクロールがでちゃう時のCSS。

body {
word-wrap: break-word;
}

これで画面幅に合わせて自動でテキストが折り返されます。

CSSでグラデーション

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;
}

はみでた文字を「・・・」で省略する

文字を省略

ぱんくずリストとか、文字が２段になってコンテンツが押し下げられるのって嫌じゃないですか。

だからはみ出た部分（２段目に当たる部分）を省略しました。（邪道かも）

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;
}

文字を省略したい要素に以下のの３つのCSSを指定してあげるだけ！

  • overflow: hidden;
  • white-space: nowrap;
  • text-overflow: ellipsis;

中身がインラインの時しかきかないから、 <li> を display: inline; してます。

スマホ対応した感想

ミニチュアなサイトを作ってる感じで楽しかった！

またやりたい！いっぱいサイト作りたい！

コンテンツ作りよりもサイトカスタマイズの方が楽しいですｗ
でもコンテンツも作りも頑張ります〜！

ピックアップ！お小遣いサイト

モッピー

スマホ＆PC対応！ダブルで稼げるポイントサイト
クリック＆ゲームや友達紹介ポイントが高還元！
コンテンツ増量でさらに稼ぎやすくなりました
モッピー