見出しなどのテキストの左右に水平線を画像を使わず、CSSのみで線の上に文字をのせたい時、
1 本の水平線を横幅全体に配置し、テキストに重なる部分を隠す方法があります。
h2 要素の外側に擬似要素で水平線を作った後、内側の span 要素に背景色を指定してテキスト部分を隠します。
■html
■css
h3 {
position: relative;
text-align: center;
}
h3:before {
border-top: 1px solid;
content: “”;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
h3 span {
background-color: white;
display: inline-block;
padding: 0 0.5em;
}
問い合わせページなどに使用できる、brを使わずに改行する簡単な方法。
改行させたい文字をspanで囲み、display: block;でOK。
■html
名前（入力必須）
■css
span{
display: block;
}
spanは一部の文字の色を変えたりなど便利なのでマスターしたいと思います。
orderプロパティを使って、コンテンツの順番を入れ替えることができます
■例
html
css
#box{
display: -webkit-flex;
flex-flow: column wrap;
}
#test1{
order: 1;
-webkit-order: 1;
}
#test2{
order: 3;
-webkit-order: 3;
}
#test3{
order: 2;
-webkit-order: 2;
}
上記のように記述することで123と並べることができます。
JavaScriptyajQueryを導入して、HTML の各要素に［style属性］が書き加えられることがあります
そのとき追加されたstyle属性を削除する方法は
if文のwidth,height指定などを疑うことでコメントアウトし
/*if(mfObj){
for(i=0;i
レスポンシブデザインの作成するには、HTMLのヘッダー内のmetaタグにスマホ向けにビューポートを設定します。
ブラウザの表示領域を、各端末の画面幅に合わせて、調整してくれます。
またと書くと
幅480pxの仮想的な画面幅が作られます、幅480pxのスマートフォンの画面があることをイメージするとわかりやすいです、これをviewportと呼びます。
em（エム）
文字の高さを基準に、1emは1文字分の高さになります。
bodyでfont-sizeの指定をしていない、またはfont-size:100％なら「1em=16px」になります。
また、font-sizeはなるべく相対単位のemか%で指定するほうが良いとされているようです。
border-radiusは、border プロパティーの指定がなくてもbackground によって与えられた背景や、img 要素で指定された画像の四隅も丸めることができます。
■css
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
四隅の丸みを変えることで様々な図形を表現できます
擬似要素（pseudo-element）とは、要素の一部を対象としてスタイルを適用出来るセレクタのことです。 例えば、文章の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが可能です。
■要素名
:first-line
:first-letter
:before
:after
同じフォーマットのページを多数作成するとき、テンプレートを使って同じスタイルを共有することができ、サイトのページを統一することができ、数十秒の間に、多数のファイルのリンクアンカーを修正することが可能です。
テンプレートを使用すると、head開始タグの直前に
が付き
■利用場面
・共通部分を変更したいとき
・DWTファイルに適用された外部css/JSファイルを変更したいとき
・編集する領域の追加・削除を行いたいとき
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
1番左の数値が「横」の値で、5pxと設定すると右に5px影が移動 -5px”と指定すると左に5px移動します。
2番目の数値は「下」の値で、”10px”と指定すると下に10px移動し”-10px”と指定すると上に10px移動します。
3番目の数値は「ぼかし具合」で、”0″を指定すると輪郭がはっきりし、数値を上げるとぼかし具合を強めます。
最後は「色の値」で指定した色が影の色になります。