• ホームページ制作者の云々
• CSS・CSSフレームワーク
• もはやCSS書くのも面倒なので、UIKitだけでなんとかしてみる

なんとなくでこのブログを始めてみたんですけど、いざやろうと思ったら、画面周りが汚すぎるのも嫌だなぁ、なんてちょっとしたデザイナー臭のする欲望に駆られてきました。（ま、そのままでもええか、とも思いつつ。）

んで、何とか邪魔臭くない方法は無いか、と思っていたら、昨今は

「CSSフレームワーク」！（ドラえもん風）

という便利なものがあるじゃないですか！と、いうわけで、もう面倒くさいから、フレームワークだけで何とかならへん？と思っている次第です。使うフレームワークはUIKitに決めました。

もちろん、何となくです。

ナビゲーションはNavbarで何とかなりそうな気がする

公式サイトの作り方に倣って、以下のように構成します。何となくロゴ中央がいいので、uk-navbar-centerを使うって感じかな。

<div class="uk-navbar-container" uk-navbar>
 <div class="uk-navbar-center">
   <div class="uk-navbar-item">何やらかんやら</div>
 </div>
</div>

うむ。何となくできている。感じがする。

ロゴを表示させて、元々のタイトルをサブタイトルにして、パディングをつけて、、、

<header class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center uk-padding">
<div>
<div class="uk-logo">
<img src="" class="uk-width-small">
</div>
<div class="uk-navbar-subtitle">何やらかんやら</div>
</div>
</div>
</header>

はい、ざっくりこんな感じのヘッダーができました。本当はナビメニューとかを作るのに便利そうなんですけど、このブログ全くメニューとか必要なさそうなので、、、ま、とりあえず次いこう！

コンテナ、セクション、グリッド、この辺り、ややこしそうやからちゃんと把握する。（container/section/grid）

UIKitにはレイアウトに関する仕組みがいくつかあるので、ちゃんと把握していかないと思ったような結果にならないような気がするので、まずは意味の把握から。

container – センター揃えでmax-widthを設定

まぁ、タイトル通りなんですけど、containerはコンテンツに対して幅（max-width）を設定させる感じですね。なので、コンテンツ幅を決定する項目、ということになります。

section – 縦に並ぶレイアウトブロックを形成する

まぁ、つまりセクションを縦に並べて中にコンテナを入れる感じになります。

grid – ネスト可能な、リキッドレイアウト

まぁ、横並びにブロックが並ぶあれですな。UIKitにはWidth componentとFlex componentというのがあって、これはこのグリッドの中に入る要素の幅や並び方を定義します。まとめるとこんな感じ

あれ？ちゃうやろか？まぁ、こんな感じかと。よって、このブログの主コンテンツのレイアウトはこんな感じになっています

<div class="uk-section-large">
<div class="uk-container uk-container-large">
<div class="uk-grid uk-grid-divider">
<div class="uk-width-2-3 ">
</div>
<div class="uk-width-1-3">
</div>
</div>
</div>
</div>

はい、まぁ、何となくできました。次に、細かいところをやっていきましょう。

まず、モバイル対応

以下のようなクラスをつけます。何もつけないと、全ての大きさ対応となります。

• @s：640px以上のサイズのときに
• @m：960px以上のサイズのときに
• @l：1200px以上のサイズのときに
• @xl：1600px以上のサイズのときに

まぁ、ほとんどのクラスはレスポンシブが最初から設定されているのですが、widthクラスなんかは切り分ける必要がありますしね。

、、、というところで、疲れてきたので細かいやつはまた次回！

• wordpressのheader、wp_head()を整理したり、不要なやつを削除する。
• UIKit、細かいところに準備されてるものが便利すぎる