ホームページのデザインに関することですが、現在PC、タブレット、スマートフォンと対応すべきデバイスが増えています。
wordpressやjavascript、CSS等で対応できますが、どれを使っていいのか悩みます。
ブログであればwordpressで良いかと思いますがサイトとなると中々理想にマッチしたデザインがないということが多々あります。
実際私もwordpressのテンプレート探しにかなりの労力を費やしたり、javascriptでレスポンシブを実現しようと頑張りましたが断念しました。なぜならば全てのデバイスがさまざまなサイズの為対応することが難しいのです。
そこで私が出会ったのが「purecss」です。
Yahoo産ですが、とても使いやすくレスポンシブなサイトが作成できます。
私が作成したマルチメディア系のこちらの「サイト」もまたPureで作成しています。
コードの記述方法としては下記のように書きます。
いくつかのCSSファイルを読み込むだけで簡単にレスポンシブなサイトの作成ができます。
<!DOCTYPE html>
<html>
<head>
<!-- メタ情報 START -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="index,follow,noarchive" />
<meta http-equiv="content-language" content="ja" />
<!-- メタ情報 END -->
<title>サンプル1</title>
<!-- CSS インポート START -->
<link rel="stylesheet" href="./build/pure-min.css">
<link rel="stylesheet" href="./build/baby-blue.css">
<link rel="stylesheet" href="./build/main.css">
<!-- CSS インポート END -->
</head>
<body>
<!-- グローバル START -->
<!-- メイン START -->
<!-- メニュ -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li><a href="#">Home</a></li>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
</ul>
</div>
<!-- ヘッダー -->
<div class="header">
<h1>メニューのレスポンシブ</h1>
</div>
<!-- 本文 -->
<div class="content">
<h2 id="horizontal-menu" class="content-subhead">サンプルページ</2>
</div>
<!-- メイン END -->
<!-- グローバル END -->
<script src="./build/1.6.1"></script>
</body>
</html>
