CSSテクニック

WEB制作基礎知識

イラストレーターでSVG画像を作ろう!

SVG画像を作ろう!スマホ対応が必須となった現在の状況では綺麗に表示できるSVGを利用することが非常に有用です。今回はイラストレーターによるSVG画像の作成方法についてまとめたいと思います。今回はイラストレーターでこのような画像を作ってみま...
CSSレイアウトテクニック

画像にテキストをちょい被せ

画像の横にちょこっと文字を重ねますposition:absolute;でやりたくなるところですが、position:relative;で最小限の移動に収めるとレスポンシブ等にも柔軟に対応できるようになります。デモはこちらまずは普通に横並びに...
WEB制作基礎知識

Basic認証をかける ※中級者向け

サイトの閲覧に簡易のパスワードをかけようWebサイトの確認用ページなど、限られた相手だけに見せたいディレクトリにはBasic認証を設定できます。ただし、これは簡易的な閲覧制限です。個人情報や機密情報の保護、会員ログインの代わりには使用しない...
CSSレイアウトテクニック

背景色を交互にする

背景を交互にしましょうデモはこちら背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。HTML<div class="bg-gray"> <div class="container"> <h2>ダミーテキ...