月別: 2017年6月

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

• 1
• 3
• 2

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ファイルを変更したいとき
・編集する領域の追加・削除を行いたいとき