無料背景素材の最近のブログ記事

今回は以前の記事に続き、複数行の見出しに対応した画像の装飾に付いての解説です。

ポイントはHTMLは前回と同じものを利用して、違うデザインにすることです。前回と同様、横幅のみ固定して、縦に伸ばしてもうまく背景画像内にテキストが収まるようにします。

CSSの初心者向けの本や記事は「背景画像を使って見出しを飾ろう」という感じで、繰り返しのない一枚の画像を置く方法書いてくれていることはあっても、繰り返しについてはあまり詳しく触れられていないことが多い気がします。

逆に上級者向けのものを見ると、この辺りはできて当然というレベルで、説明を飛ばしてしまっています。

こんな状態なので、今ばりばりコーディングをやっている人でも初級者から中級者への移行期は結構悩んだりしたんじゃないでしょうか。

そんな風に思い、これから何回かに分けて見出しの装飾方法を紹介して行こうと思います。

まずはブログなどで見出しを書くと横幅も縦幅も固定された背景画像を利用すると、長いタイトルの時など背景画像からはみ出てしまいますが、それを画像の分割とCSSでうまく回避する方法を紹介します。

今はまだ全体を覆うdiv要素の中にマルチカラムでレイアウトされているものが多いと思うので、比較的横への繰り返しは制限されている一方、縦は自動的に繰り返される仕様になっていることが多いですから、縦への繰り返しを使ってテキストのはみ出しを回避したいと思います。

フォトショップ用パターン素材です。

サイトを作成するたびに色々背景を作るのが面倒になってきたので、とりあえずシンプルなものからパターン素材にしました。

黒のドットで30種類入っています。ダウンロードは以下からどうぞ。

ページがめくれたような効果を出すための素材です。

1種類ですが、AIファイルとPNGの両方を用意しました。四角い領域の隅に配置することで、効果がでると思いますが、その時に使う四角い領域そのものにもドロップシャドウを適用したほうが雰囲気がでると思います。

ダウンロードは以下からどうぞ。

カラーのラインです。見出しの背景や区切り線として使えそうです。CSSで"repeat-x"したい方は左端から幅6px・高さ5pxで切り出すとちょうどいい感じになるはずです。

透過gifで10色用意しました。

少し暗めの花柄背景パターンです。和風サイトなんかにどうぞ。

H2やH3といったタグの背景画像として使えるウェブ素材です。

サイズの関係で右端が切れていますが、DLしたらちゃんとなっています。上のサンプル画像をクリックすると、全体を見ることが出来ます。

オリジナルのパターン素材です

オリジナルのパターン素材です。

シンプルな斜線の背景用素材です。

17色分用意しました。

背景画像のコーナーを追加しました。長いことカテゴリーを作っておきながら放置していましたので、漸くの追加になります。初めて作ったのでかなり気を使いつつの作業になりましたけど、何とか背景に敷き詰められるようになったのでほっとしています。