CSSデザイン枠テンプレート（コピペで使えます！） | WPnavi
.block { padding: 20px; background: #ffe5e9; background: linear-gradient(to bottom, #fff, #ffc0cb); -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ffc0cb)); -moz-linear-gradient(top, #fff, #ffc0cb); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFffc0cb'); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
padding－スタイルシートリファレンス
スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {background-color: #f8dce0; padding: 10px;} p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;} p.sample3 {background-color: #f8dce0; padding: 10px 20px;} p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; padding: 10px 20px 30px 40px;} HTMLソース <html> <head> <link rel="stylesheet" href="sa
[CSS]先頭に戻るボタンを常に右下に表示する方法 | アイスケット | 神奈川県相模原市ホームページ制作、SEO対策、運用なら
データを表などを使って表示すると縦に長いページになってしまったりすることがあります。データを下にスクロールしながら閲覧している時に、先頭に戻りたい場合はパソコンのブラウザであれば、スクロールバーを移動させることで高速に移動することもできますが、スマホ、タブレットの場合は指でフリックを何度もしなければならず、相当面倒なことになってしまいます。 このような問題を解決する1つの方法として、右下に「先頭に戻る」ボタンを常に表示しておくという方法が考えられます。今回は「先頭に戻る」ボタンを常に表示しておく方法をご紹介します。 まずはHTMLです。「先頭に戻る」ボタンを押した時の戻り先をdivタグで作っておきます。bodyタグのすぐ下で良いでしょう。さらに「先頭に戻る」ボタンをbodyタグを閉じる前に入れておきます。スタイルシートでデザインするので、class名を入れてあります。 <! DOCTYPE
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
画像を横に並べる４つの方法
さて本日は、HTMLで画像を横に並べて配置する方法を４つご紹介します。 なにかと忘れやすいので、簡単なものから説明していきます。 １．何もしない 何もせずimgタグを並べます。imgタグはインライン要素なので、画像の大きさと表示場所にスペースがある限り横並びで表示されます。 ・サンプル＆コード <img src="画像のＵＲＬ" /><img src="画像のＵＲＬ" /><img src="画像のＵＲＬ" /> ２．align属性を利用した画像の並べ方 align="左右"を追加すると、横方向の位置を指定できるようになります。CSSプロパティのfloatと同じ効果です。最後にclear="both"で回り込みを解除するだけのシンプルなもの。これだけでは細かい配置の自由度はありませんが、簡単さがミソ。 ・サンプル＆コード <img align="left" src="画像のＵＲＬ" />
Web Safe Color一覧表/カラーチャート
Home | 目次 | Prev | Web Safe Color | Next ■ Web Safe Color (カラーチャート) Wabにおける SafeColorパレット #0000ff #00f RGB(0,0,255) #0033ff #03f RGB(0,51,255) #0066ff #06f RGB(0,102,255) #0099ff #09f RGB(0,153,255) #00ccff #0cf RGB(0,204,255) #00ffff #0ff RGB(0,255,255) #0000cc #00c RGB(0,0,204) #0033cc #03c RGB(0,51,204) #0066cc #06c RGB(0,102,204) #0099cc #09c RGB(0,153,204) #00cccc #0cc RGB(0,204,204) #00ffcc
Webデザイナーなら知っておきたい、CSSの便利なプロパティ16選 | BULK SERVER blog
CSSにはたくさんのプロパティがあり、すべてを網羅することは大変です。 しかし、中には覚えておけばとても便利なプロパティや記述法があります。 WebデザイナーならばCSSにおける便利テクニックを知っておけばスキル向上に役立つし、デザインの幅が広がるでしょう。 今まで画像を使ったり、無理やり色んなプロパティでスタイルしていたのもコードをすっきりさせることでスマートにすることができます。保守・管理も向上して便利なプロパティを使うメリットは盛りだくさんです。 今回は使用頻度が多い便利なプロパティをまとめたので、デザイナーの方ならばぜひ一読してください。CSS3も含まれています。それではどうぞ。 背景画像 1．背景画像を枠に収める 【background-size】 背景画像を使用することは多いですが、問題はその大きさです。画面の大きさに合わせて画像を作ることが多いですが、最近ではスマートフォンの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jimdoヘッダーカスタム - Jimdo[みんビズ]カスタム![Jimdoヘッダーカスタム - Jimdo[みんビズ]カスタム](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1f12268615f208a58f3decacc9e13ddce5e8af9/height=288;version=1;width=512/http%3A%2F%2Fu.jimdo.com%2Fwww56%2Fo%2Fs139a9769038ff2b0%2Fuserlayout%2Fimg%2Flogo.png%3Ft%3D1330105647)