忍者ブログ
日々の研究生活のメモ書きなど
前回記事
■ 参考 : 【html/CSS】勉強し直しメモ 1日目




■ リンク
a要素のタグで囲って、href属性を付与すれば良い

↑のリンクの場合は、次のような感じ
<a href="http://coffee.guhaw.com/Entry/758/" title="" target=_blank><span style="color: #0000ff; font-size: large;">■ 参考 : 【html/CSS】勉強し直しメモ 1日目</span></a>
a要素にはtarget属性も指定できる
これで、リンク先を新しいウィンドウやタブで開くなどの指定ができる
target=_blankとすると、リンク先は新しいウィンドウまたはタブで表示される
target=_selfとすると、リンク先は現在のウィンドウまたはタブで表示される
target=_parentとすると、リンク先を現在のウィンドウまたはタブで表示される、ただiframeとかを使ってる場合は動作が異なる

a要素は基本的にhrefとtargetのみ


ページ内リンクを貼りたいときは、
■ 参考 : 【html】ページ内リンク, 他のページのページ途中にリンクを貼る方法



■ ルビ
使わない


■ 色の指定方法
black, white, blueなどの英語での指定方法の他に
#ff0000などの2桁の16進法表記をすることもできる

これを2桁ではなくて1桁にして #f00 と書くこともできる
他には rgb(255, 0, 0)

CSS3では、これ以外に透明度を表す要素を追加して
rgba(255, 0, 0, 0.5)
という表記もできる
0.5が透明度を表す、0は完全に透明、1は透過なし

参考例 :
h1 {
color: white;
background-color: black;
opacity: 0.5;
}
■ フォントサイズ
font-size、line-heightなどがある
font-sizeは直接値を10pxとかで指定する以外にも、smaller, largerなど親要素のフォントに対して相対的に指定することもできる

xx-small, x-small, small, medium, large, x-large, xx-large
などで指定することもできる、大きさはブラウザ依存

line-heightは行間を指定できる
150%では重なってしまうので注意
body {
font-size: 10px;
line-height: 150%;
}
h1 {
font-size: 30px;
}
font-family:
でフォントの選択肢を追加できる
実際に選ばれるのは閲覧者がインストールしているフォントのうち、一番左のもの
フォントは" "でくくったほうがいい




■ ベンダープレフィックス
テキストだけに限った話ではないけど・・・・
CSSのレベルが変わると新しい機能が追加される、このときまだ最終版ではない機能を使いたいときはこのベンダープレフィックスを指定する必要がある
Chrome, safariでは-webkit-
Firefoxでは-moz-
IEでは-ms-
Operaでは-o-

なんで全部のブラウザで違うんじゃああああああ



■ CSSの設定

*
.
#などの違いについては以下の記事にまとめた

■ 参考 : 【CSS】idとclassの違い



■ 擬似クラス
ある要素が特定の状態のときに限定して適用できるセレクタ
リンクを貼るのに使うa要素が一番わかりやすい
a要素の設定はこんな感じ
指定する順番が重要になる
a:link { color: #FFFBFB; }
a:visited { color: #FFFBFB; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }

■ 優先度
ある要素に関する設定が複数あった場合は後ろにある方が優先される







■ 画像関連

img要素 :
画像をwebページに組み込むための要素
PNG、JPEG、GIFなど

画像のURLをsrc属性で指定する

alt属性は画像が正しく表示できない場合に画像の代わりに表示するテキストを指定する

title属性は画像の上にカーソルをマウスオーバーしたときに表示される小さい箱に表示される
いるのかは知らんけど、とりあえずつけとく

width属性は表示する画像の幅を指定できる
height属性は表示する画像の高さを指定できる
どっちか1個でいい

■ 参考 : 【html】サムネイルのサイズを変更する方法






■ ボックス

■ margin関連
ボックスの余白を指定できる
ボックスが複数連続している場合、上下のmargin設定は最大値のもののみが有効になって重なり合う
margin-top
margin-bottom
margin-left
margin-right
margin (これで上記4つを一気に変更できる)


■ padding関連
ボックスの外側の余白はmarginで指定する
ボックスの内側の余白はpaddingで指定する
padding-top
padding-bottom
pa....
padding


■ border関連
かなりたくさんあるので省略
ボックスの周りを囲む線の種類や色、太さなどを指定できる


■ 幅、高さ
width
height
min-width
max-width
min-height
max-height

minとmaxについてはnoneとかも設定できる




■ float
ある要素を左または右に配置して、他の要素をその反対側に回り込むように配置することをfloatという
float: left
float: right
float: none
が設定できる
noneは特に何も設定してない状態

floatに設定したら、途中で解除しないといけない
clear: right;
とかすればいいらしい


■ 2段組みレイアウト
このfloatをつかって、htmlページを左右2つに分けることができる
#main{
float: right;
width: 200px;
}

#sub{
float: left;
width: 100px;
}

footer{
clear: both;
}
みたいな感じ
色も指定できる
ここではmainとsubというidを使って別々に指定大きさを指定してる

一番下のfooterは回り込みの設定を解除してる
これがないと左にあるsubのボックスの下だけにfooterが表示されてしまうので





■ 箇条書き
ul :番号はなくて中黒でリストする
ol :通し番号でリストする

li : ulかolの中身はliでリストする







区切り線はhrで出せる





他にもフォームとかあったけど今回は使わないのでパス

おわり〜








PR
この記事にコメントする
Name
Title
Color
E-Mail
URL
Comment
Password   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST

print "python versionにしてみた"
print "python 勉強中"

print "猿でもわかるgnuplot を執筆中"

# 最終更新 2018/11/14
カウンター
ブログ内検索
ツイートするボタン
リンク
相互リンク募集中です (Twitterにてお知らせください)

Demo scripts for gnuplot version 5
(gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)

gnuplotスクリプトの解説
(米澤進吾さんの個人ページ、gnuplotと言えばこのかた)

gnuplot のページ
(Takeno Lab、うちのブログがリンクされていたのでリンク返し)

とある物理の院生日誌~院生は社会へ旅立った~
(研究室の先輩の個人ブログ)

英語例文を見て自然に英語・英会話を学ぶ
(楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)

Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco
(映画の感想をまとめられるサイト、いつもお世話になっています)

Astronomy Picture of the Day Archive
(天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)

今日のほしぞら
(任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)

GNUPLOTとアニメーション
(応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)

読書メーター
(読んだ本をリストできる便利なサイト)

Flickr

Template "simple02" by Emile*Emilie
忍者ブログ [PR]