UIkitを使って、自分用ブログのindexページを作ってみた

# はじめに
自分用のwebページ作りたいけど、CSSのデザインは下手くそだし、自力で良いものを生み出せる気がしなかった。ということで、CSSのフレームワークを使おうと思った次第。`bootstrap`は前に使ったし、他のないかなと思って探したら良い感じのがあったので採用。

# 追記1
タイトルとか諸々入れ損ねています。`Text`や`Heading`を使うといいものが作れそうです。それか、いつか気力が出たらこっそり修正しておきます、、、

# 追記2
修正完了しました。ただもっと綺麗にやる方法はあると思うので、できた方はコメントお願いします。

# 注意事項
公式のドキュメントがあります。ここに書かれていない機能もたくさんあるので、一度みにいってみてください。
[UIkit公式リンク](https://getuikit.com/docs/introduction)
また個人の見解です。

# 使ったもの
配置関連
・`Background`、`Card`、`Grid`、`Height`、`Margin`、`Width`

title関連
・`Text`、`Heading`

# 実践

完成品はgithubに載せておきます。
https://github.com/yCroma/UIkit-blog-indexpage

## CDN

インストールする方法もあったけど、とりあえずで試してみたかったのでCDNを利用します。

```
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.4.2/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.2/dist/js/uikit-icons.min.js"></script>

<!-- normalize CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
```

## コンテンツの配置

まず、どんな風に形取るか決めたいですよね。種類としては以下のものが考えられます。または組み合わせることもできます。

・Column
・Container + Section
・Flex
・Width + grid

自分は`Width`を採用しました。また、色をつけたいので`Background`を利用し、高さはとりあえず`height`を用いることによって指定しました。

```body.html
<body>
  <header class="uk-height-small uk-background-secondary">
    
  </header>
  
  <main class="uk-height-large uk-background-muted">
    
  </main>
  
  <footer class="uk-height-small uk-background-primary">
    
  </footer>
</body>
```

## レスポンシブデザインの作成

今回は`main`の中身をレスポンシブに対応させます。先ほどのはスマホ版でのデザインを想定していて、ipad、PCと大きくなるにつれて、表示するものを追加していくようにします。また見やすくするために、`card`を利用します。

### スマホページの作成

まずスマホページを作りましょう。`main`のところを以下のように修正しました。

```mobile.html
<!-- uk-grid を追加 -->
<main class="uk-height-large uk-background-muted" uk-grid>
    <!-- 以下を追加 -->
    <articles class="uk-width-expand@*">
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test1
      </article>
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test2
      </article>
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test3
      </article>
    </articles>
  </main>
```

ここでもし`margin`が適応されなかった場合、以下のようにすればとりあえずで動かすことはできます。(自分のプログラムはそうなっています。)

```
# uk-margin を以下のように変更

uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
```

ページのイメージとしては、`test`と記述されている部分を記事へのリンクとなるように設定し、ある程度並べてからページネーションをする予定です。


### ipad用ページの作成

以下のリンクで端末ごとのポイント幅を確認することができます。そして、`uikit`では、`640px`以上はipad対応、`960px`以上はPC対応とさせるのがうまくいきそうです。ということで、`main`の部分を以下のように変更しました。
[iPhone/iPad/Apple Watch解像度(画面サイズ)早見表](https://qiita.com/tomohisaota/items/f8857d01f328e34fb551)

```main.html
<!-- uk-grid-match uk-grid-small uk-grid-divider を追加 -->
<main class="uk-height-large uk-background-muted uk-grid-match uk-grid-small uk-grid-divider" uk-grid>
    <!-- uk-width-2-3@m に修正 --->
    <articles class="uk-width-expand@s">
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test
      </article>
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test
      </article>
      <article class="uk-margin uk-card uk-card-default uk-card-body">
        test
      </article>
    </articles>
    <!-- 以下を追記 --->
    <sub-disc class="uk-width-1-3@s uk-visible@s">
      <subprofile class="uk-margin uk-card uk-card-large uk-card-default">
        test
      </subprofile>
      <tags class="uk-margin uk-card uk-card-large uk-card-default">
        test
      </tags>
    </sub-disc>
  </main>
```

ここでのページのイメージは、左側に記事、右側にタグとプロフィールを追加することを想定しています。また、スマホサイズで右側が表示されるのを防ぐため、`visible`のオプションを利用しています。

### PC用ページの作成

最後にPCページのレイアウトを作成していきます。以下の通りとなりました。

```main.html
<main class="uk-height-large uk-background-muted uk-grid-match uk-grid-small uk-grid-divider" uk-grid>
    <!-- PC版で左から表示される順にかかれています -->
    <!-- profile を追加しました -->
    <profile class="uk-width-1-6@m uk-visible@m">
      <profile-card class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-default uk-card-body">
        myprofile
      </profile-card>
    </profile>
    <!-- uk-width-expand@m を追記しました -->
    <articles class="uk-width-expand@s uk-width-expand@m">
      <article class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-default uk-card-body">
        article1
      </article>
      <article class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-default uk-card-body">
        article2
      </article>
      <article class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-default uk-card-body">
        article3
      </article>
    </articles>
    <!-- uk-width-2-6@m を追記しました -->
    <sub-disc class="uk-width-1-3@s uk-visible@s uk-width-2-6@m">
      <!-- uk-hidden@m を追記しました -->
      <subprofile class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-large uk-card-default uk-hidden@m">
        subprofile
      </subprofile>
      <tags class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-card uk-card-large uk-card-default">
        tags
      </tags>
    </sub-disc>
  </main>
```

以上です。お疲れ様でした。
ここでは載せられていない、`pagenation`や、`serch`、`sticky`等、色々と面白いものが[公式ドキュメント](https://getuikit.com/docs/introduction)に乗っているので、是非見に行ってみてくださいね！

## おまけ (タイトル追加)

`header`を以下のように変更しました。

```header.html
<header class="" uk-grid>
    <div class="uk-card uk-card-secondary uk-card-body uk-width-expand@*">
      <h1 class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right
      uk-text-center uk-width-expand@
      uk-heading-large ">
        MyBlog
      </h1>
    </div>
  </header>
```

また、それに伴って`main`のタグも少しだけ増えました。

```main.html
<!-- uk-margin-remove-top を追記 -->
<main class="uk-height-large uk-background-muted uk-grid-match uk-grid-small uk-grid-divider
  uk-margin-remove-top" uk-grid>

  <!-- 中身に変更はなし -->

</main>
```

# 参考
・[公式ドキュメント](https://getuikit.com/docs/introduction)