0%

Designデザインワークショップ

Posted:2015.04.22

ウェブサイトコーディングでよく使用するCSSプロパティのまとめ(2)

前回の記事【ウェブサイトコーディングでよく使用するCSSプロパティのまとめ(1)】 に引き続き、今回もCSSでよく使用されるプロパティをまとめていきたいと思います。たくさんあるCSSのプロパティも難しく考えず必要なものから覚えて、サイトコーディングに活かしていきましょう。

 

 

1. 配置・表示
float:; 要素を左右に配置し、続く内容を回り込ませる指定をする。
clear:; 要素の回り込みを解除します。先述のfloatプロパティと合わせて使用します。
display:; 要素の表示方法を指定します。ブロック要素、インライン要素、非表示などを設定できます。
overflow:; はみ出した領域の処理を指定します。表示、非表示、スクロールなどを設定できます。
visibility:; 要素の表示・非表示を指定します。
position:; 要素の配置を指定します。絶対位置、相対位置、位置固定などを設定できます。
top:; 上からの要素の位置を指定します。pxなどの絶対指定や、%などの相対指定が設定できます。
bottom:; 下からの要素の位置を指定します。pxなどの絶対指定や、%などの相対指定が設定できます。
right:; 右からの要素の位置を指定します。pxなどの絶対指定や、%などの相対指定が設定できます。
left:; 左からの要素の位置を指定します。pxなどの絶対指定や、%などの相対指定が設定できます。
z-index:; 要素の重なり順を指定します。数値が大きいほど表面に配置されます。
clip:; 要素の切り抜き範囲の指定をします。上下左右の端からの距離で設定します。

 

2. リスト・テーブル・コンテンツ
list-style-type:; リストのマーカーの種類を指定します。箇条書き、数字、記号など設定出来ます。
list-style-position:; マーカー表示位置を指定します。リスト範囲の内側もしくは外側を設定できます。
list-style-image:; リストのマーカーに使用する画像を指定します。
table-layout:; テーブルの幅の表示方法を指定します。内容に合わせた自動可変と数値に合わせた固定を設定できます。
border-collapse:; セルの表示方法を指定します。セル同士の境界線を隣接して表示させるか、間隔をあけて表示させるかを設定できます。
border-spacing:; セルの表示方法を指定します。テーブルとセルの境界線に対しての間隔を設定できます。
content:; 要素の前後に文字や画像などを挿入します。after擬似要素及びbofore擬似要素のみ適用されます。

 

3. ボックス
box-shadow:; ボックスの影を設定します。水平、垂直方向への距離や影のぼかし半径、影の色の指定ができます。
box-sizing:; ボックスのサイズ算出方法を指定します。widthとheightにパディングとボーダーを含める設定ができます。
box-orient:; フレキシブルボックス内における子要素の表示方法を指定します。フレキシブルボックス内で子要素を水平方向や垂直方向に配置します。
box-pack:; フレキシブルボックス内の子要素の水平方向への配置の割付方法を指定します。

 

4. 透過色・グラデーション
opacity:; 要素の透明度を指定します。0.0〜1.0の数値範囲で設定し、0.0が完全な透明になります。
background:linear-gradient(); 線形のグラデーションを指定します。backgroundプロパティに適用され、開始色と終了色及び位置を設定します。
background:radial-gradient(); 円形のグラデーションを指定します。backgroundプロパティに適用され、開始色と終了色及び位置を設定します。

 

5. 変形・変化・アニメーション
transform:; 要素への平面・立体変形を指定します。各関数を使って設定します。
transition:; 要素の時間的な変化を指定します。変化させるCSSの効果や変化にかかる時間などを設定します。
animation:; 要素へのアニメーション効果を指定します。キーフレームルールに基づき、アニメーションの内容や変化する時間や速度を設定します。

 

6. その他
cursor:; カーソルの形状を指定します。

 

 

いかがでしたでしょうか。今回は第2回にわたってCSSのプロパティをまとめてみました。CSS3に移行したことによりCSSを使って表現出来る幅が広がり、リッチなコンテンツのサイトを作成することが可能になりました。またそれぞれのプロパティを把握することで効率よくコーディングをすることができます。ぜひ参考にしてみてください。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】