正しいショートハンドの書き方のまとめ

LINEで送る
Pocket

コピペ用、ショートハンドのまとめです。
まずはややこしい【background】プロパティから。

【background】 〜color・image・repeat・position(x/y)/ size〜

#WebDesign-ABC{
  background: #ABCABC url(../images/JUN_Always_Be_Cool.jpg) no-repeat fixed left top / 123px 456px;
}

最後の【background-size】は、autoも使用可です。
【background】のショートハンドの詳細は『こちら

次はよく使うけど覚えられない【border】プロパティ。

【border】 〜width・style・color〜

/*四辺が同じ場合*/
#WebDesign-ABC{
  border: 1px solid #ABC;
}

/*四辺それぞれがバラバラな場合*/
#WebDesign-ABC{
  border-width: 0 1px 2px 3px;  /* top right bottom left 以下全部同じ*/
  border-style: none dotted dashed solid;
  border-color: red green blue #ABC;
}

/*border-radiusの場合*/
#WebDesign-ABC{
  border-radius: 0 1em 2em 3em;  /* 左上、右上、右下、左下 */
}

borderついでに、これはショートハンドとは関係ないですが、border-styleプロパティの種類もいつもどれがどれか忘れるので、ついでに書いておきました。次はborder-colorの色々な書き方も。

【border-color】について

上 :5px dotted red;
右 :5px dashed green;
下 :5px solid blue;
左 :5px double #ABC;
上 :10px groove rgb(0%,50%,100%) ;
右 :10px ridge rgb(100,50,0);
下 :10px inset #123;
左 :10px outset #112233;

下の(↑)4つは、それぞれ全部に指定しないと違いがわかりにくそうなので、全部 border-width:10px; border-color:red; で、
border-styleだけ変えたのを作ってみます。

groove
ridge
inset
outset

う〜ん。これでもわかりにくい。ちなみにブラウザ毎で見え方はぜ〜〜〜んぜん違うので、色んなブラウザで見てみてください。
そうそう。このborderのプロパティ、width、style のプロパティを省略すると、ボーダーの表示がなくなるようですので、ボーダーを指定する場合は、border-width、border-style の省略をしないようにした方がよいようです。

では次。使用時、注意が必要な【font】プロパティ。

【font】 〜style・weight・size/line-height・familly〜

#WebDesign-ABC{
  font: italic bold 1em/1.5 Arial, sans-serif;
}

ちなみに【font】プロパティのショートハンドは、他のショートハンドよりも記述順や省略可能な個別プロパティ等が厳密に定められているため、利用しない方がコード量が少なくなったり、色々と上書きされてややこしくなるようなので、ショートハンドは使用せず、bodyに簡単なものを使用し、あとは個別に記述して行く方がよいようです。

【margin】と【padding】プロパティ。これはおまけかもしれませんが、一応書いておきます。

【margin】と【padding】〜top・right・bottom・left〜

#WebDesign-ABC{
  margin: 0 auto 2px auto;/* top right bottom left */
  padding: 0 1px 2px 3px;
}

とりあえずこんなものかな?
まだまだありそうですが、また追加して行きます。

このサイトを参考にしました。
https://developer.mozilla.org/ja/docs/Web/CSS/Shorthand_properties



関連記事

GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


Comment

  1. […] 他のショートハンドはこちらからどうぞ。 正しいショートハンドの書き方のまとめ […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP