■html
テキストテキストテキストテキストテキストテキストテキスト
文章内の最初の文字を1文字下げる
■css
text-indent: 1em;
2行目以降の文字を1文字下げる
■css
text-indent: -1em;
padding-left: 1em;
長いURLの表示を途中で…にする
■css
white-spce: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
ブラウザのウィンドウの横幅や高さを指定出来る単位vw、vhを使えば、JavaScriptを使用しないで全画面表示を実装することが出来ます。
vw
ビューポートの幅の1/100
vh
ビューポートの高さの1/100
「vw」はビューポートの幅に基づき、サイズを決定します。ビューポートの幅は、ブラウザのスクロールバーを含むサイズで計算されます。
「vh」は要素をページの高さいっぱいにする時に使い、パーセントを使用するよりビューポートの単位が適しています。
フルスクリーンの背景
.test {
position: relative;
width: 100%;
height: 100vh;
background: url(‘background.jpg’) center/cover;
}
cssに「+」を追加することで隣接している要素にスタイルを適用することができます。
■html
テキスト
//隣接するテキストにcolor:green;を適用//
■css
h2 + p {
color:green;
}
更に「~」で要素の後にスタイルを適用することができます。
■html
テキスト
適用されるテキスト
//後ろのテキストにcolor:green;を適用//
■css
h2 ~ p {
color:green;
}
見出しなどのテキストの左右に水平線を画像を使わず、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;
四隅の丸みを変えることで様々な図形を表現できます