CSS基本 -htmlでの参照方法

CSSの記述方法をまとめておきます。

１．CSSの記載場所

<html>
< head>


<link rel="stylesheet" type="text/css" href="./css/bmi.css">　


<style>
p {　　　　　　　　　　　　　　　　　　
text-align: center; color:red;　　　
}　　　　　　　　　　　　　　　　　　　
</style>
</head>

< body>


< p style="text-align:center">NIPPON</p>

< /body>

< /html>

・外部のCSSファイルを参照するLinkの記述を<head></head>内で記述した場合、個別のCSSを<head></head>内に記述しても、効果がない。
・Linkの記述していもて、bodyタグ内で個別にスタイルを指定するのは効果がある。

2. 基本の書き方
(記述する場所)

（記述の方法）

例えば

body { text-indent: 1em;
font-family: "ＭＳＰ明朝", "リュウミンライト－ＫＬ", "ＭＳ明朝", Micho, serif; }

等と書く。　それぞれの要素の名前は

セレクタ { プロパティ：値 }

となる。

複数の ”プロパティと値” の組み合わせを指定したい場合は、セミコロン (；) でつなげる。

セレクタ { プロパティ：値 ; プロパティ：値; プロパティ：値 }

セレクタには、(1) タグ名 (2) id名 (3) class名で指定する方法がある。

(1) タグ名で適用先を指定。

p { color: orange} と指定しておけば、html内で <p>こんにちは </p> と記載すれば良い。

(2) id名で適用先を指定。

id名は、 CSS内では、#id名{プロパティ：値} のように記載する

htmlでは<タグ名 id="id名">のように指定する。但し、同じid名はページ内に1回しか使えない。

例）

CSS

# example{color : gray}

html

<div id=”example”> サンプルです。</div>

(3) class名で適用先を指定。

class名でセレクタを指定する場合は.class名{〜}のように.ドット(ピリオド)を前につる。

# ．example {color : red}

html

<div class=”example”> サンプルです。</div>

(注意)

同じデザインを適用させたいタグやclass、idがいくつかあるときは、コンマ,で区切って複数指定することが可能。
p, #example1, .example2 { color : orange}

◇div style
div styleを使えば、CSSファイルをHTMLファイルに埋め込むことなくCSSを適用できる.　<span></span>でも良い。

例）
<div style=”color:blue; background-color:#90ddb4; padding:30px; display:inline-block;”>
< p>Hello World</p>
< /div>

3. 子孫セレクタ（絞り込み指定）

「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」ときに使うものです。タグ名やid名、class名を半角スペースで区切って並べると、どんどん適用先が絞り込まれていきます。

.main p span{ color : red }

Mainクラス内の pタグ内の spanタグ内だけデザインが適用される。

4. 代表的なプロパティ

{font-size: ◯◯px or ◯◯em}

{text-align: center or right}

{ background-color: 色名orカラーコード }

{border: 線の太さ色種類}

上にだけ線を引く：border-top:〜

下にだけ線を引く：border-bottom:〜

左にだけ線を引く：border-left:〜

右にだけ線を引く：border-right:〜

position: relative; (relative or absolute)

overflow: hidden;

margin: 0 auto 1.6%;

transition: height 0.3s ease;

border-radius: 3px;
font-family:

transform: rotate(-26deg);

4. ::after と :: before (疑似要素)の使い方

::afterと::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる。

：：beforeは、タグで囲まれた要素の前に “content” に記載された内容を挿入。

：：afterは、タグで囲まれた要素の後に “content” に記載された内容を挿入。

（書き方）

p::before {

content: 'Hello! ';

color: red}

<html>

<p> World!</p>

<表示結果>

Hello! World!

5. 中央寄せ
（注意）
<p>、<div>、<h1>〜<h6>などのタグはdisplayの初期値がblockとなっています。text-alignでは、これらの中身の「文章」や「画像」を中央揃えにすることはできますが、要素自体を真ん中に寄せることはできない。

display:blockの要素に対しては、margin-leftとmargin-rightのそれぞれの値をautoにすることで水平方向に中央寄せ。

.example {
margin: 10px auto;
width:50px;;
}

4. 参考
◇テーブル表記

■タイトル■

1．ここに本文
２．ここに本文
３．ここに本文

■タイトル■

1．ここに本文
２．ここに本文
３．ここに本文

***横に並べられる***横にならべたら、末尾に
<div style="clear:both;"></div>を書いておく。
********************

< !--見出し-->
< div style="float:left; width:200px;">
< div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);
            background-color:#d94057; border:1px solid #d94057; padding-left:10px;
            font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;
            width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
< font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■</font>
< /div>
< !--本文-->
< div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;
            border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;
            margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
            1．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>

< !--見出し-->
< div style="float:left; width:200px;">
< div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);
            background-color:#d94057; border:1px solid #d94057; padding-left:10px;
            font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:6px;
            width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
< font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■</font>
< /div>
< !--本文-->
< div style="background:#ffffff;border:1px solid #d94057; padding:10px; font-size:1em;
            border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;
            margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
            1．ここに本文<br>２．ここに本文<br>３．ここに本文</div></div>

6. ブログカードをCSSだけで作ってみる。

◇css

.cp_card01 {

font-size: 14px;

line-height: 1.45em;

position: relative;

overflow: hidden;

margin: 0 auto 1.6%;

-webkit-transition: height 0.3s ease;

transition: height 0.3s ease;

border-radius: 3px;

background: #ffffff;

-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);

box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);

}

.cp_card01::after {

font-family: FontAwesome;

content: '\f1b0';

position: absolute;

bottom: 60px;

right: -20px;

color: rgba(236, 239, 241, 0.7);

font-size: 180px;

transform: rotate(-26deg);

z-index: 0;

}

.cp_card01:hover .details {

left: 0;

}

.cp_card01 .photo {

position: relative;

height: 200px;

overflow: hidden;

}

.cp_card01:hover .photo1 {

-webkit-transform: rotate(5deg) scale(1.3);

transform: rotate(5deg) scale(1.3);

}

.cp_card01 .photo .photo1 {

height: 100%;

background: url('images.jpg') center no-repeat;

background-size: cover;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.cp_card01 .details {

font-family: 'Open Sans';

position: absolute;

top: 0;

left: -100%;

-webkit-box-sizing: border-box;

box-sizing: border-box;

height: 200px;

margin: 0;

padding: 10px 15px;

list-style: none;

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

color: #ffffff;

background: rgba(40,53,147, 0.6);

}

.cp_card01 .details > li {

padding: 3px 0;

}

.cp_card01 .details li::before,

.cp_card01 .details .tags ul::before {

font-family: FontAwesome;

margin-right: 10px;

vertical-align: middle;

}

.cp_card01 .details .author::before {

content: '\f007';

}

.cp_card01 .details .date::before {

content: '\f133';

}

.cp_card01 .details .tags ul {

margin: 0;

padding: 0;

list-style: none;

}

.cp_card01 .details .tags ul::before {

content: '\f02b';

}

.cp_card01 .details .tags li {

display: inline-block;

margin-right: 3px;

}

.cp_card01 .details a {

color: inherit;

}

.cp_card01 .details a:hover {

color: #283593;

}

.cp_card01 .description {

position: relative;

padding: 10px;

z-index: 1;

}

.cp_card01 .description h1 {

font-size: 1.4em;

line-height: 1em;

margin: 0 0 10px 0;

}

.cp_card01 .description h2 {

font-size: 1em;

line-height: 1.2em;

margin: 1.2% 0;

color: #9b9b9b;

}

.cp_card01 .description p {

position: relative;

margin: 0;

padding-top: 20px;

}

.cp_card01 .description p::after {

position: absolute;

top: 6px;

left: 0;

width: 20%;

height: 6px;

content: '';

background: #283593;

}

.cp_card01 .description a {

float: right;

margin-bottom: 10px;

color: #283593;

text-decoration: none;

}

.cp_card01 .description a::after {

font-family: FontAwesome;

margin-left: -10px;

content: '\f061';

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

vertical-align: middle;

opacity: 0;

}

.cp_card01 .description a:hover::after {

margin-left: 5px;

opacity: 1;

}

◇html

<li class="author"><a href="#">copypet</a></li>

<ul>

</ul>

</li>

</ul>

<h1>記事タイトル</h1>

<h2>サブタイトルやキャッチコピーなど</h2>

<p class="text">テキストテキストテキストテキストテキストテキストテキスト...</p>

</div>

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2018年6月14日木曜日

CSS基本 -htmlでの参照方法

0 件のコメント:

コメントを投稿

このブログを検索