Nuxt.js を使って手軽にサーバーサイドレンダリングを試してみよう！ ｜ SiTest (サイテスト) ブログ
Nuxt.js は、 Vue.js をサーバーサイドレンダリングするアプリケーションを構築するのに便利なフレームワークです。 最初は React.js をサーバーサイドレンダリングするためのフレームワークとして Next.js が登場しましたが、 Nuxt.js はその Vue 版です。 Vue.js の公式にも紹介されているフレームワークです。 ではさっそく Nuxt.js でサーバーサイドレンダリングを試してみましょう！ 公式にアクセスして、「はじめる」から順次進めていきます。 ※日本語で翻訳されているので、英語に苦手意識がある人でも安心です。 すぐに試すために、 vue-cli で「スターターテンプレート」をインストールし、アプリケーションを立ち上げます。 インストール手順を順次進めればあっと言う間に構築することができます。 $ vue init nuxt/starter <proj
Vuetify.js を使ってマテリアルデザインに挑戦しよう！ ｜ SiTest (サイテスト) ブログ
「マテリアルデザイン」という言葉を Google が発表してから既に3年が経過しましたが、みなさんは実際にマテリアルデザインを使ったことはありますか？ 今ではかなり浸透しており、メジャーな JavaScript のフレームワークには、マテリアルデザインをベースにした CSS フレームワークが登場しています。（React.js はフレームワークというよりライブラリですが） ・ Angular ： Angular Material ・ React.js ： Material-UI ・ Vue.js ： Vuetify.js マテリアルデザインのルールに則れば、直感的で使いやすい UI が作れる！ そこで今回は、 Vue.js の CSS フレームワークのひとつ Vuetify.js を使って、ゼロからマテリアルデザインを適用していきたいと思います。 前述の通り、 Vuetify.js とは、
最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法 ｜ SiTest (サイテスト) ブログ
今回は、高さの異なるコンテンツを隙間なく敷き詰めるレイアウトを CSS だけで実現する方法をご紹介します。 Javascript や CSS のライブラリは使わず、ピュア CSS のみで手軽に実装してみました。 まず、はじめに今回作るレイアウトについて確認しておきます。 百聞は一見にしかず、ということで実際のウェブサイトを例に見てみましょう。 STUDIO LEMON DENCHI インテリアショップ unico | ブランドサイト ご覧のような、高さの違うパネルがタイル状にびっしりと敷き詰められたレイアウトが今回作ろうとしているものです。 画像が多く、あえて整然とした配置のリズムを崩しているので、楽しげに見えるレイアウトですね。 これを CSS の float や flex-box を使って実装しようとしても、なかなか困難です。 また、こうしたレイアウトを実現するためのライブラリが色々と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
