koblog

高校生のWEBデザインブログ

【CSS】テキストが横に流れるようにする方法

おしゃれなブログでは静的なブログパーツだけでなく、動的なブログパーツも設置されています。その中でも最もシンプルなのはテキストを動かすことではないでしょうか。

 

そこで今回はCSSだけで導入できる「流れるテキスト」を紹介したいと思います。

今回の内容は「Web備忘録」さんの記事を参考にさせていただきました。

 

参考:CSS でテキストを流れるように動かす方法(marquee) │ Web備忘録

 

 

デモ

導入するとこんな感じになります。

背景色や文字色は自由に変えられますが、今回は今の僕のブログに合うオレンジのグラデーションにしてみました。

 

具体的な使いみちとしてはこんな感じがあるのではないでしょうか。

(画像を貼り合わせているだけなので、導入したら幅100%になります)

f:id:somethingreview:20190311161029p:plain


上のようにヘッダーの下に設置する使い方はブログなどでよく見かける気がします。

おすすめの記事やニュース、どうしても伝えたいことなどを表示すると良いかもしれません。

(実際はポイントサイトへの誘導やポイント還元系が多い気がしますが...)

 

HTML

HTML
<div class="area">
<div class="marquee">
<p>任意の文字</p>
</div>
</div>

 

CSS

CSS
.area {
    max-width: 100%;
    background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
    background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
    overflow: hidden;
}
/* 表示領域に合わせてサイズと余白を設定 */
.marquee {
    width: 300px;
    padding-left: 300px;
    white-space: nowrap;
    animation-name: marquee;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee a {
    text-decoration:none !important;
    color:#383838;
}
@keyframes marquee {
    from    { transform: translate(0%); } 
    100%,to { transform: translate(-100%); }
}

 

色の変更方法

今回は参考先の「Web備忘録」さんのコードを変えて、背景色だけでなく文字色も変えられるようにしています。

CSS
.area {
    background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);/*背景色*/
    background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);/*背景色*/
}
.marquee a {
    color:#383838;/*文字色*/
}

 

上の部分を変えれば色を変えることができます。

今回はグラデーションにしているので「background」が2行になっていますが、単色なら1行で大丈夫です。

(例)

.area {
    background: #000;/*背景色は黒になります*/
}
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる