✨ キラキララインって何？

ねえ、みんな！ツムピロだよ！🌟 ライン（区切り線）は、サイトの文章やセクションを「ここで区切るよ！」って分ける可愛い線だよ！💖 ブログやホームページで、内容をスッキリ見やすくするのに超大事！このページでは、ツムピロのキラキラなラインをコピペで使えて、コードは下にそのまま書いてあるよ！✨ 初心者でも大丈夫、すぐ試せるから一緒にキラキラにしちゃお！

✨ ライン一覧

下にいろんなラインを並べたよ！🌈 各ラインの下にコードをそのまま書いてあるから、コピーして自分のサイトに貼れば、キラキラな区切り線が完成！💫

1. キラキラ流れるライン

ピンクやシアンがキラキラ流れる、ツムピロらしいライン！✨ 動くアニメーションでサイトが目立つよ！

このラインのコードは、まず「hr class="kirakira-flow"」を入れてね！「hr」は線を引くためのタグだよ！その後に、デザインの魔法をかけるコードを書くよ！「style」タグの中に、「.kirakira-flow」という名前で、線の太さを3ピクセル（height: 3px）、色をピンク（#ff00ff）からシアン（#00ffff）、ゴールド（#ffd700）に戻ってピンク（#ff00ff）とグラデーションにして、流れるアニメーション（animation: neonLineFlow 5s infinite）を入れてるよ！アニメーションは「@keyframes neonLineFlow」で、背景の位置を動かしてキラキラ流れるようにしてるんだ！✨

以下のコード Spots toコピーして使ってね！

<hr class="kirakira-flow">

<style>
.kirakira-flow {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ffd700, #ff00ff);
    background-size: 400%;
    animation: neonLineFlow 5s infinite;
    margin: 20px 0;
}
@keyframes neonLineFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
</style>

2. オーソドックスなライン

シンプルで可愛いピンクのライン！💖 どんなサイトにも合うよ！

このラインのコードは、「hr class="classic-line"」だよ！デザインは「style」タグの中に、「.classic-line」という名前で、線の太さを2ピクセル（height: 2px）、色を可愛いピンク（#ff69b4）にしてるよ！シンプルだけど、めっちゃ可愛いよね！💖

以下のコードをコピーして使ってね！

<hr class="classic-line">

<style>
.classic-line {
    border: none;
    height: 2px;
    background: #ff69b4;
    margin: 20px 0;
}
</style>

3. アニメ風ライン

漫画みたいなギザギザライン！📖 ポップで元気なサイトにピッタリ！

このラインのコードは、「hr class="anime-line"」だよ！デザインは「style」タグの中に、「.anime-line」という名前で、線の太さを6ピクセル（height: 6px）、ピンク（#ff69b4）とシアン（#00ffff）を交互に繰り返すギザギザ模様（repeating-linear-gradient）を入れてるよ！ポップな感じが最高！🌟

以下のコードをコピーして使ってね！

<hr class="anime-line">

<style>
.anime-line {
    border: none;
    height: 6px;
    background: repeating-linear-gradient(45deg, #ff69b4, #ff69b4 10px, #00ffff 10px, #00ffff 20px);
    margin: 20px 0;
}
</style>

4. 光るライン

ゴールドがキラッと光るライン！🌟 高級感を出したい時にバッチリ！

このラインのコードは、「hr class="glow-line"」だよ！デザインは「style」タグの中に、「.glow-line」という名前で、線の太さを4ピクセル（height: 4px）、色をゴールド（#ffd700）、光る効果（box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700）を入れてるよ！キラキラ光って豪華だよね！✨

以下のコードをコピーして使ってね！

<hr class="glow-line">

<style>
.glow-line {
    border: none;
    height: 4px;
    background: #ffd700;
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700;
    margin: 20px 0;
}
</style>

5. グラデーションライン

ピンクからシアンに変わるグラデーションライン！💫 モダンでオシャレな雰囲気！

このラインのコードは、「hr class="gradient-line"」だよ！デザインは「style」タグの中に、「.gradient-line」という名前で、線の太さを5ピクセル（height: 5px）、色をピンク（#ff00ff）からシアン（#00ffff）のグラデーション（linear-gradient）にしてるよ！オシャレな感じがいいよね！🌈

以下のコードをコピーして使ってね！

<hr class="gradient-line">

<style>
.gradient-line {
    border: none;
    height: 5px;
    background: linear-gradient(90deg, #ff00ff, #00ffff);
    margin: 20px 0;
}
</style>

✨ ラインで区切るメリット

ねえ、ツムピロだよ！🌟 ラインってただの線じゃないんだ！サイトをめっちゃ良くする秘密のアイテムだよ！💖 初心者のみんなに、ラインのスゴさを簡単にお話しするね！

✨ 使い方実用編

ツムピロだよ！🌟 ラインの使い方を、超初心者のみんなにもわかるように教えるね！💖 サイトにラインを入れると、どんな風に良くなるか、実際の例で説明するよ！

1. ブログ記事を分ける

ブログで「朝の出来事」と「夜の予定」を書きたい時、ラインで区切るとスッキリ！例：キラキラ流れるラインを入れると、記事がキラキラ輝いて、読む人が「次は何？」ってワクワクするよ！✨

例：朝の話 → [キラキラ流れるライン] → 夜の話

2. ホームページのセクションを分ける

ホームページに「自己紹介」「作品」「連絡先」がある時、ラインで分ける！アニメ風ラインなら、ポップで楽しい雰囲気になって、読む人が「このサイト可愛い！」って思うよ！🌈

例：自己紹介 → [アニメ風ライン] → 作品 → [アニメ風ライン] → 連絡先

3. メニューやフッターを目立たせる

サイトの上や下にメニュー（例：ホーム、ブログ）やフッター（例：© 2025）があるよね。そこに光るラインやグラデーションラインを入れると、「ここ大事！」って目立つ！💫 高級感もアップ！

例：メニュー → [光るライン] → 記事 → [光るライン] → フッター

4. シンプルにしたい時

派手なラインはちょっと…って時は、オーソドックスなライン！ピンクのシンプルな線で、どんなサイトにも合うよ！初心者でも「これなら簡単！」って使える！💖

例：記事1 → [オーソドックスなライン] → 記事2

✨ どの部分にコードを貼り付けるの？

ツムピロだよ！🌟 ラインのコードをどうやって使うか、超初心者のみんなにめっちゃ簡単に教えるね！💖 ステップごとに見ていこう！

ステップ1：コードをコピーする

上のライン一覧で、好きなライン（例：キラキラ流れるライン）のコードが下に書いてあるよ！✨ コードを全部コピーしてね！コピーは、マウスでコードを選んで、右クリック→「コピー」だよ！例えば、キラキラ流れるラインなら、「hr class="kirakira-flow"」と、その下のデザインのコード（styleタグの中）をコピーしてね！

ステップ2：自分のHTMLファイルを開く

サイトを作るファイル（例：`index.html`）を、メモ帳やVS Codeみたいなアプリで開いて！これが君のサイトの「設計図」だよ！🌈 初めてなら、メモ帳でOK！

例：メモ帳で「新しいテキストファイル」を作って、「mysite.html」って名前で保存してね！保存する時は「すべてのファイル」を選んで、名前が「.html」で終わるようにして！

ステップ3：ラインを入れたい場所に貼る

コピーしたコードの「hr class="kirakira-flow"」を、ラインを入れたい場所に貼り付けて！例：文章と文章の間、メニューと記事の間とか！

どんな感じ？：メモ帳で新しいファイルを開いたら、まず「!DOCTYPE html」を書いて、次に「html」タグ、その中に「head」タグと「body」タグを書くよ！「head」タグの中には「title」タグで「私のキラキラサイト」って書いて、「body」タグの中に「h1」タグで「ようこそ！」、その下に「p」タグで「ここは私のブログだよ！」って書いて、その下に「hr class="kirakira-flow"」を貼って、最後に「p」タグで「次の話題は明日！」って書くんだ！これを「mysite.html」って名前で保存してね！🌟

ステップ4：スタイルを貼る

ツムピロだよ！🌟 ラインをキラキラにするには、デザインの「魔法」を追加するよ！💫 コピーしたコードの「style」タグの中身（例：キラキラ流れるラインなら「.kirakira-flow」のデザイン）を、HTMLファイルの「head」タグの中に貼り付けて！「head」タグは、サイトの「頭」の部分で、「html」タグのすぐ下にあるよ！

どうやるの？🌈

どんな感じ？：メモ帳で「mysite.html」を開いたら、「head」タグの中に「style」タグを追加して、その中に「.kirakira-flow」のデザインを貼り付けてね！「style」タグの中には、さっきコピーした「.kirakira-flow」のデザイン（線の太さ3ピクセル、グラデーション、流れるアニメーション）をそのまま貼って、「body」タグの中にはステップ3で書いた「h1」や「p」、「hr class="kirakira-flow"」が書いてあるよ！これでラインがキラキラになるよ！🎉

メモ帳での貼り付け例：メモ帳で新しいファイルを作ったら、ステップ3で書いた内容（「!DOCTYPE html」から始まって「body」タグの中身まで）を書いて、「head」タグの中に「style」タグとその中身を貼り付けて、「mysite.html」って名前で保存！「すべてのファイル」を選んで、名前が「.html」で終わるようにしてね！🌟

次のステップは？✨：コードを貼ったら、サイトをブラウザでチェック！その方法は次のページで教えるよ！

続きはこちら！🌈

✨ スポンサー ✨

PR