CSSフレームワークUIk...webリソースフレームワークCSSフレームワークUIkitの使い方、レイアウト編2014-03-05TweetPocket現在様々なCSSフレームワークが公開され、web制作やコーディングが非常に楽になってきています。代表的なCSSフレームワークにはTwitterBootstrapがありますが、今回紹介するUIkitもそれらの内の1つ。UIkitはBootstrapにはない便利な機能がたくさん内蔵されており、ぶっちゃけ乗り換えてもいいくらい。基本的な使い方もBootstrapを使ったことがある人なら、すぐに使いこなせるくらい簡単です。この記事では便利なCSSフレームワークの1つであるUIkitの使い方を紹介します。UIkitのはじめ方まずはこちらの公式サイトからファイルをダウンロード。zipファイルを展開してフォルダ内にindex.htmlを作成します。動作確認ということで以下のように簡単なテンプレートを作成しておきます。src="js/uikit.min.js"></script></body></html>UIkitの基本的なグリッドレイアウトUIkitのブレークポイントUIkitのデフォルトでは以下のようなブレークポイントが設定されています。Desktops設定は変更可能なので必要に応じてカスタマイズしておきましょう。個別のカラムの前に全体を囲む.containerを作ります。センタリングする場合は.uk-container-centerも入れておきます。uk-container-center"></div>また、カラムを作る場合は.uk-gridで囲むようにします。Bootstrapでは.rowでしたね。</div>Bootstrapの場合は.col-md-4のように書きましたがUIkitでは以下のようになります。各カラムをuk-gridクラスを付けたdivで囲み、カラムにはグリッドの分子と分母を指定すればOK。分母は1,2,3,4,5,6,10が使えるようです。class="uk-width-3-10">.uk-width-3-10</div></div>グリッドのネストグリッドはBootstrapと同様ネストして使うことが可能です。ネストをうまく使うことでより柔軟なレイアウトを作ることができるようになります。</div>グリッド間の罫線UIkitでは.uk-grid-dividerを入れるだけで横だけでなく、縦の罫線も簡単に作ることができます。ordering機能。.uk-width-middle-*と組み合わせなければいけないので注意。.uk-pull-1-2</div></div>UIkitのレスポンシブレイアウトレスポンシブのクラス画面サイズごとにカラム幅を変えたい場合などに使う機能。変更したいカラムに各クラスを追加すればOK。えばPCサイズとタブレットサイズでは表示するが、スマホサイズでは非表示にしたい場合などに使う。使い方はこんな感じで、表示を変えたいところにクラス名を入れるだけ。Hidden非レスポンシブ化グリッドの機能は使いたいけどレスポンシブにしたくない、というときは以下のようにCSSに1行加えるだけでレスポンシブを解除することが可能です。960px;}このあとは・・・?今回はグリッドとレスポンシブの基本的な使い方を紹介しましたが、まだまだ使える機能がたくさんあります。このあとはUIkitのナビゲーションやパネル、フォームなどのコンポーネントについて紹介していきます。SugimoriフリーランスのWebエンジニア。現在はテンプレート職人としてTetraThemesでテンプレートを開発中。ブログや個人に関するお問い合わせはTwitterかFacebookへ。2017-06-26Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。Web制作に限らずWebライティングでも必ず必要なのが写真素材。2017-06-21カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。2017-06-21カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。2017-06-19カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。2017-06-16カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。USTetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。