
「CSSで遊ぼう」のコーナーです。
… そんなのあったんかい (´・ェ・`)
お遊びシリーズは Playground のタグにまとめています。今回はお花背景のシンプルなメッセージボードです。YouTube装飾とお揃いにしましたのでそちらもどうぞ。
旧投稿画面をお使いの方は 改行の扱い「HTMLのみ」 に設定してください。
改行「自動」でもできますが、ソースコードをひと繋ぎ改行不可で書く必要が生じ、メンテナンスが大変だと思います。HTMLのみにすると改行したい文章末尾に <br> と書かないと折り返しませんのでご注意を。
CSSはスタイルシートに記載するか、スタイル用JSとして記事内に記載するか選択してください。
利用頻度が低い場合にはスタイルシートではなく記事内でのJS掲載が良いかもしれません。両方ではなくいずれか一方を選ぶようにしてください。
素材のダウンロード
装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
今回はYouTube装飾とお揃いですので、セットで利用する場合は同じ画像を二度DLする必要はありません。
メッセージボードいろいろ
あまりゴツゴツしていると見た目に鬱陶しいのでごくシンプルに。文章をp要素でマークアップしたい方は テキスト の部位を <p>テキスト</p> に変更してください。そして当然ですがレスポンシブになってます。
青い小花
よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。
知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。
それでまたはご主義に云っのも一応むやみと知らうば
黒背景白い小花
よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。
知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。
それでまたはご主義に云っのも一応むやみと知らうば
野花
よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。
知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。
それでまたはご主義に云っのも一応むやみと知らうば
ある程度の高さが無いと背景画像の上の方が見切れますのでパソコンでは横幅調整をされると良いと思います。
このサンプルでは max-width: 640px を指定しています。スマートフォンでは横100%になります。
桃色桜

よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。
知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。
それでまたはご主義に云っのも一応むやみと知らうば
藍の花
よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。
知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。
それでまたはご主義に云っのも一応むやみと知らうば

お揃いのYouTube装飾はコチラ

YouTubeを飾ってみる その4
今回はお揃いのメッセージボードもあります。...
There are no comments yet.