inline-blockですっきり画面に

posted in: Wordpress, ブログ, 運営報告 | 0

にせサギのトップ画面とネット犯罪体験画面を新しくしました!
ネット犯罪体験は下の画像のように縦長でした。

スクリーンショット 2015-05-26 23.38.22

 

新しいネット犯罪体験ではしたのように横並びになりました!

スクリーンショット 2015-05-26 23.47.50

 

 

今回はcssのinline-blockを使って縦長だったものを横並びにしました。

inline-bockを使うことによって画面のサイズで自動的に並びが変わります。
画面を小さくすると下のように3列になり。
スクリーンショット 2015-05-26 23.50.57
スマホだと縦長になります。
inline-blockスマホ

 

ちなみにcssのソースコードは下記の通りです。

.name{
float: left;
width: 200px;
border:1px solid #000;
margin: 5px;
height: 400px;
padding:3px;
display:inline-block;
}

 

スマホファーストと言われる現在。パソコンからも見やすいことはもちろんのことスマホでも見やすい、使いやすいサイト作りが求められています。

今後も両方のユーザーにとって快適なコンテンツをつくれるよう頑張っていきます。

Please Share!Share on FacebookTweet about this on TwitterShare on Google+