制作物

サンプルサイト制作2018/05

投稿日:

Bootstrapで有名な
CSSフロントエンドフレームワークというものを使ってサイトを作成してみました。

サンプルサイト

UIkit、すごく便利!!

使ったのはUIkit

UIkit

UIkitの使い方、めっちゃ簡単でした。

配置やデザイン、装飾、アニメーション・・
細かい部分までクラスが設定されているので、適応したい個所にクラスを指定するだけです。

一部、別のcssを組み込んでます。
背景が斜めになってるやつ、とか
footer付近の画像、hoverの動きは別です。

アニメーションも別のものを使ってる個所がありますが、これはUIkitでもパララックスを使用すると可能です。
スライダーの設定も簡単でした。

とにかく簡単に動きや装飾ができます!

アイコンを使うとき

アイコンを使うときは、uikit-icons.min.jsも一緒に読み込みます。

読み込みしてないのに気づかず「何で表示されないの?」となりました笑

フレームワークの気になった点

色々できる事がたくさんあってとても便利なフレームワーク。
ただ、やりたいことがたくさんあるとその分クラス名が多くなり、htmlが見難くなるのがどうも気になりました。

通常ならcssファイルを外部読み込みで、一つのクラス指定でたくさんのスタイルを書くことができるので、同じような見た目の個所がたくさんある場合はオリジナルのクラスを与えてスタイル指定するのが良かったです。

- 制作物
-

関連記事

バナー作成

商品パッケージやサイトのバナーなど制作sample

no image

保護中: 美容院サイトのトップページ

この投稿はパスワードで保護されているため抜粋文はありません。

no image

保護中: 整骨院サイトのトップページ

この投稿はパスワードで保護されているため抜粋文はありません。

企画:バナー作成

企画系のバナー制作sample

レスポンシブ対応サンプルページ

レスポンシブ対応のサンプルページ作成中。 レスポンシブ対応サンプルページ まだPCの見た目しか整えてないけどこれならスマホ用表示のcssも少ない。 実際のサイトになるとこうはいかないのが難しいところ。 …

翻訳する