はじめに
自分用の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>
<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のところを以下のように修正しました。
<!-- 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解像度(画面サイズ)早見表
<!-- 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 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 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のタグも少しだけ増えました。
<!-- 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>