Webサイト制作

投稿日:2017年4月17日 更新日:

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml
<h1 class="sitename"><a href="http://~">サイト名</a></h1>
で、こちらがスタイルシート
.sitenameS a{
	display:block;
	width:320px;
	height:320px;
	background:url(http:画像のパス)no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	}
widthとheightは置換画像のサイズに合わせて指定してください。

- Webサイト制作
-

関連記事

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 目次1 まずはhtml2 cssを追加します。3 テキストの背景指定も まずはhtml 何でもいいので適当なクラスか何かあた ...

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

no image

Video要素の縦横比を変更する

目次1 やりたいこと2 原因3 対策3.1 対策13.2 対策23.3 問題点 やりたいこと Videoファイルが横長で見にくいので縦幅を調整したい 原因 Video要素のobject-fitがデフォ ...

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...