Webデザインに関する個人的メモなど
色や文字の大きさ、余白など全てお好みに応じて改変してください。
このエントリーにあるサンプルはInternet Exploler7～、FireFox、Chrome、Safariで動作確認をしています。
英語を横に配置した見出し
画像だと見出しごとに作らなければいけませんが、CSSコードだけならその手間も省けます。
HTML
頭に縦線が入った見出し
この縦線の幅を広くすると、また違った印象になります。
HTML
CSS
下線が入った見出し
また、線の太さも変える事が出来ます。
HTML
CSS
サンプルSample
日本語と共に英語で装飾した見出しです。画像だと見出しごとに作らなければいけませんが、CSSコードだけならその手間も省けます。
HTML
<h2 id="midashi1">サンプル<span>Sample</span></h2>
CSS
#midashi1{
border-bottom: 5px #66cdaa solid;
padding:5px 0 2px 0;"}
#midashi1 span{
margin-left:20px;
font-size:60%;
color: #ccc;
position: relative;top: -5px;}
頭に縦線が入った見出し
サンプル
創作系のサイトではよく見かける気がします。この縦線の幅を広くすると、また違った印象になります。
HTML
<h2 id="midashi2">サンプル</h2>
CSS
#midashi2{
border-left:#66cdaa 5px solid;
margin:10px 60px 0 0;
padding:2px 0px 2px 4px;}
下線が入った見出し
サンプル
サンプルでは二重線ですが、点線や破線など多種あります。また、線の太さも変える事が出来ます。
HTML
<h2 id="midashi3">サンプル</h2>
CSS
#midashi3{
border-bottom:#66cdaa 6px double;
margin-top:10px;
padding:2px 0px 2px 4px;"}
PR
この記事にコメントする
<< 画像を使った見出し
| HOME |
カテゴリー
ブログ内検索
最新CM
最新TB
プロフィール
ＨＮ：
アラタ
性別：
女性
自己紹介：
関西在住。昭和と平成跨いできました。
広過ぎる趣味が高じてWebデザインとカメラマンを副業に色々と手を出す日々。ただの下手の横好き。
広過ぎる趣味が高じてWebデザインとカメラマンを副業に色々と手を出す日々。ただの下手の横好き。