HTMLで作られたLPテンプレートをCMS化する方法
HTMLで作られたLPテンプレートをWordpressやBASEのようなCMSで表示(移植)する方法を紹介します。 CMSでゼロからLPを作らなくてもHTMLで作ったものを移植することで効率よくLP…
2023 / 08 / 15
コーディング
コーディング方法
ShopifyでHTMLテンプレを使ってLPを作る方法
Shopifyでノーコードでレイアウトの組み立てだけでLPを作れる方法とHTMLのLPテンプレートをShopifyに移植する方法を紹介します。 ShopifyではすでにあるページにLPを作ったり、新…
2023 / 08 / 01
BASEのトップページをLPにカスタマイズする方法
BASEにHTMLのLPテンプレートを移植してトップページをLPにする方法を紹介します。 移植の際に必須タグや強制的に表示されるBASEメニューの対応が必要なのでそちらも合わせて解説します。 BAS…
2023 / 07 / 28
ホームページにカレンダーを実装！テンプレート付きで解説
この記事ではHTMLとJavascriptでホームページにカレンダーを設置する方法をテンプレート付きで紹介します。 レスポンシブに対応した自動更新機能付きのカレンダーテンプレートなのでコピペして使っ…
2023 / 07 / 25
HTMLでファイルダウンロードする方法とうまくいかない場合の原因と対策
HTMLでファイルをダウンロードする方法とうまくいかない場合の原因と対策について紹介します。 Webサイト上でPDFファイルやZIPファイルをダウンロードしてもらうときは簡単な方法でリンクを作成して…
2023 / 07 / 24
初心者のためのHTMLのLPをElementor化する手順をわかりやすく解説
HTMLで作られたLPテンプレートをElementor化する手順を初心者の方にもわかりやすく解説します。 HTMLテンプレートをWordpress化する場合はテーマファイルを作成する必要がありますが…
2023 / 07 / 23
初心者のためのHTMLのLPをWordpress化する手順をわかりやすく解説
HTMLで作られたLPテンプレートをWordpress化する手順を初心者の方にもわかりやすく解説します。 HTMLコードを分割してテンプレートファイルに分けたり、Wordpressにテーマフォルダを…
2023 / 07 / 20
HTMLのpictureタグの基本的な使い方と表示されない原因の対策
このページではHTMLのpictureタグの書き方やimgタグとの違い、表示されない原因などについて解説します。 HTMLのpictureタグって何？ pictureタグの基本的な使い方 pictu…
2023 / 07 / 18
HTMLのページ内リンクを作る方法を基本から詳しく解説
HTMLのページ内リンクを作る方法を基本から詳しく解説します。 基本的にはIDを使う必要があるのですが、Javascriptを使うことでclassでもページ内リンクを作ることができるので、そのサンプ…
2023 / 07 / 17
HTMLのfigureタグの基本とdivタグの入 れ方、スタイル方法を解説
HTMLのfigureタグを使って画像だけでなくpタグやdivタグを使ったレイアウト方法を解説します。 figureタグはあまり使用例がないので使い方がわかりにくいタグでもあるので、基本的な使い方と…
2023 / 07 / 11
HTMLで行間を調整したりCSSを使わずに改行する方法
HTMLで行間を詰めたり、Pタグで改行したり、CSSを使わずに行間を調整する方法を解説します。 HTMLコードで行間を詰めるには、を調整することができます。 指定した場所で改行したい場合や、CSSを…
2023 / 07 / 10
HTMLで作ったサイトやファイルが文字化けする原因と対策
HTMLで作ったサイトやCSSに文字化けが発生したときの原因と対策方法を解説します。 文字化けにはいくつか原因があり、その対策方法もあるのですぐに治すことができます。 このページではWebサイトで発…
2023 / 07 / 04
HTMLにCSSを直書きする3つの方法とデメリットまとめ
HTMLにCSSを直接書き込む方法とデメリットについて紹介します。 CSSスタイルを直書きすることで簡単にスタイルを反映させることができ、レスポンシブレイアウトの作成も可能。 でも注意しないと後から…
2023 / 07 / 03
CSSグリッドを使ったページレイアウトの作り方
CSSグリッドは縦と横の線で分割して要素を配置す ることができる便利なプロパティ。 Bootstrap5のような12カラムのレイアウトを作れるのでページレイアウトを作成する場合に使えます。 このページ…
2023 / 05 / 05
CSS box-shadowを使いこなす！基本の使い方と実践テクニック
CSSのbox-shadowの使い方からよくある実装パターン、box-shadowを簡単に作れるCSSジェネレーターも合わせて紹介します。 box-shadowとは box-shadowの基本的な使…
2023 / 05 / 04
CSSフィルターのエフェクトマスター！色調整からブラウザ対応まで詳しく解説
この記事では、色調整からブラウザ対応まで、フィルターを活用したさまざまなエフェクトの作り方をわかりやすく解説していきます。 CSSフィルターで使える効果とその違いやよく使われるおすすめCSSフィルタ…
2023 / 05 / 03
スクロールバーのデザインと表示方法をカスタマイズ！CSS完全ガイド
この記事では、スクロールバーのデザインや表示方法をカスタマイズする方法を解説します！ ブラウザの標準デザインだといまいちなスクロールバーもCSSを使うことでおしゃれにデザインすることができます。 ク…
2023 / 05 / 02
CSSで作るおしゃれな下線パターンいろいろまとめ
この記事では文字の下にシンプルな下線を引いたり、下線の位置や長さ、色、太さなど をカスタマイズする方法まで詳しく解説します。 おしゃれなマーカー風のアンダーラインや点線などを作る方法も紹介します。色々…
2023 / 04 / 27
CSS横並びの全て！配置・整列するコツとうまくいかない原因も解決！
この記事ではやなどのCSSプロパティを使って様々な要素を横並びにする方法を紹介します。 単に横並びにするだけでなく、均等に配置したい場合や横並びにしたコンテンツを中央に配置する方法もサンプルコード付…
2023 / 04 / 26
CSS Transformの使い方と事例で学ぶアニメーション効果！
Webデザインで要素の移動や回転、拡大縮小をさせるときに使うtransformの使い方を解説！ 基本的な使い方からCSSが効かないときの対処方法、transformを使ったアニメーション効果の事例と…
2023 / 04 / 25