ゆきんこゲーム日記

音楽ゲームでクリアしたものとか気になったゲームとかをメモしてゆくブログ

Simply DesainにPopular がついた。

Simply Design - テーマ ストア - はてなブログ

どうやらこのブログに使っているテンプレート(テーマ)にPOPULARが付いたみたい。
使ってくださってる方々感謝です(*´ω`*)

他の人に比べるとインストール数が2桁なので実際どういう状況で付くのかも解りませんがインストールされてると嬉しくてたまりません。

レスポンシブデザインについて

レスポンシブデザインとは縦横の大きさが固定されたデザインとは違い、
パソコンのブラウザーで大きく見た時の状態と小さくした時に違うデザインにしたり
「メディアによって適した大きさ・形」で表示するようにするデザインです。

導入の仕方

CSSでの導入の場合は

@media (max-width: size){
  body{
    width:100%;
  /* ここにcssを書く*/
  }
}

のように書くと横を小さくした時に変化するような動的CSSが作れるようになります。
このブログも小さくするとちょっと見た目が変わるのもそういう理由です!

レスポンシブデザインの欠点

レスポンシブデザインの欠点としては日本語の場合だと途中で句読点や文字が切れてしまう様なことが起きる。レスポンシブデザインにした時に文字が長くなって見た目が悪くなってしまうような問題点を抱えます。

お手軽なレスポンシブデザイン

html

<html>
 <head>
  <body>
   <div id="main">
    <div id="Column">
     /*ここにテキスト*/
    </div>
   </div>
  </body>
 </head>
</html>

と記入しながらCSS側にこのように記入すると良いと思います。

CSS

body,div#main{
 width:100%;
}

#Column{
 wifth:80%;
 margin:0px auto;
}

これだけでも縮小した時に小さくなるようなデザインは作れたりします。

実際html,cssの世界を知るにはソフトを使うのではなく全て手打ちでWebを作ってみる努力は必要かと思います。他にもレスポンシブデザインにする方法はありますが、今回はこの二種類で終わらせてみたいと思います(´・ω・`)

広告を非表示にする