制作物

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

投稿日:

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

サンプルサイト

UIkit、すごく便利!!

使ったのはUIkit

UIkit

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

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

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

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

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

アイコンを使うとき

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

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

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

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

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

- 制作物
-

関連記事

バナー作成

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

no image

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

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

企画:バナー作成

企画系のバナー制作sample

no image

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

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

サンプルサイト制作

パララックスやjQueryを使って動きのあるサイト制作。 作成時に調べたことや迷ってなかなかできなかったことは「サイト作成メモ」に記載。 次のサイト作成の参考に。 思うような動きをつけるのが難しい キ …

翻訳する