はじめに

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

追記1

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

追記2

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

注意事項

公式のドキュメントがあります。ここに書かれていない機能もたくさんあるので、一度みにいってみてください。
UIkit公式リンク
また個人の見解です。

使ったもの

配置関連
・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解像度(画面サイズ)早見表

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等、色々と面白いものが公式ドキュメントに乗っているので、是非見に行ってみてくださいね！

おまけ (タイトル追加)

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>

参考

・公式ドキュメント