[HTML] ボタンのアイコンを追加・変更する方法
Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可能です。 このページではボタンにアイコンを追加・変更する方法を紹介します。 ボタ…
2024 / 08 / 20
LP-UIKITの使い方について解説します。レイアウトを3列から2列にしたり、画像のサイズを変更したり実際にデザインテンプレートを作成する方法を紹介します。
Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可能です。 このページではボタンにアイコンを追加・変更する方法を紹介します。 ボタ…
2024 / 08 / 20
おしゃれなWebサイトによくある背景画像はレイアウトがずれていたり、サイズ調整されていますが、基本的なレイアウト方法がわかればやり方自体は簡単です。 このページではHTMLで作ったWebサイトに塗り…
2024 / 08 / 18
LP-UIKITのコンポーネントやテンプレートはBootstrap5に対応したHTMLでコーディングされています。 このページではCSS変数をカスタマイズして新しいテーマを作る方法を紹介します。 C…
2024 / 08 / 16
LP-UIKITで使えるUIコンポーネントは全てHTMLコードが付属しています。コードをコピーするだけでFigmaで作成したデザインを再現することができます。 このページではUIコンポーネントをカス…
2024 / 08 / 15
LP-UIKITではフォントや配色のスタイルがあらかじめ登録されているので、何度も同じ設定をすることなく効率よく一貫性のあるスタイルをつけることができます。 このページでは配色やフォントのスタイルの…
2024 / 08 / 13
Photoshopやイラレの場合、ブロックやコンテンツ間の余白を入れるには必要な分だけ下にずらすことで調整できます。 Figmaでも同じことができますがこのページではオートレイアウトを使った余白の付…
2024 / 08 / 11
LP-UIKITではよくあるコンポーネントを大量に登録しているのでブロックを組み立てるだけでデザインができます。 ブロックをカスタマイズして背景画像を入れる方法を紹介します。 Figmaで背景画像を…
2024 / 08 / 09
LP-UIKITではアセットパネルから選んで配置していくだけでページを作れるブロックを使うことができます。 このページではデフォルトでは縦に並んでいるブロックの見出しを横に配置する方法を解説します。…
2024 / 08 / 07
LP-UIKITではコンポーネント単体だけでなく、見出しとコンポーネントを組み合わせたブロックを使うことができます。 このページではブロック内のコンポーネントを変更・追加する方法を解説します。 ブロ…
2024 / 08 / 05
LP-UIKITで使える横並びのコンポーネントをグリッドレイアウトに切り替える方法を紹介します。 Figmaのオートレイアウトを維持したまま横並びのレイアウトをグリッドレイアウトにします。 横並びの…
2024 / 08 / 03
LP-UIKITで使えるUIコ ンポーネントを横並びにする方法を紹介します。 UIはオートレイアウトで作成されているため、基本的には縦並びを横並びに変更するだけですが、修正も必要になることがあるためそ…
2024 / 08 / 01
LP-UIKITで使えるUIコンポーネント内の要素を横並びにする方法を紹介します。 コンポーネント内の全ての要素を横並びにする コンポーネントを解除する オートレイアウトで「横に並べる」に切り替える…
2024 / 07 / 30
LP-UIKITで使えるボタンコンポーネントにアイコンを追加したり、別のアイコンに変更する方法を紹介します。 Figmaのオートレイアウトを使うことで効率よくアイコンの配置ができるようになります。 …
2024 / 07 / 28
LP-UIKITで使えるUIコンポーネントにボタンやテキストを追加したい場合があります。 このページではFigmaの子コンポーネントにボタンやテキストなどのコンテンツを追加する方法を紹介します。 コ…
2024 / 07 / 26
Figmaのコンポーネント機能では、親コンポーネントのレイアウト変更は自由ですが、親をコピーした 子コンポーネントのレイアウト変更は少し制限がかかります。 このページではLP-UIKITで使えるUIコ…
2024 / 07 / 25
LP-UIKITで使えるUIコンポーネントの中でもCardタイプのコンポーネントは3列になっているものが多く、列数を変更したい場合があります。 このページではUIコンポーネントの列数を簡単に変更する…
2024 / 07 / 23
LP-UIKITのアップデート内容についてはこちらになります。 2024.4.21 v1.7 アセットパネルからUIを選べるようになりました。 HTMLテンプレートにブロックを追加しました。 HT…
2024 / 05 / 21
LP-UIKITののコンポーネントの分類と使い方について解説します。 コンポーネントについて LP-UIKITではFigmaのコンポーネント機能を使ってコンポーネントを作成しています。 コンポーネン…
2024 / 04 / 20
LP-UIKITのテーマとスタイリングについて解説します。 LP-UIKITではBootstrap5を使用してCSSスタイルを作成しています。 変数の値を変更しているカラーパレットとデフォルトにはな…
2024 / 04 / 20
LP-UIKITのFigmaテンプレートを使ったデザインの作り方を紹介します。 デザインについて LP-UIKITではコンポーネント(デザインのパーツ)を組み合わせてデザインを作ることができます。 …
2024 / 04 / 20