物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)
前回記事
■ 参考 : 【html/CSS】勉強し直しメモ 1日目
■ リンク
a要素のタグで囲って、href属性を付与すれば良い
↑のリンクの場合は、次のような感じ
これで、リンク先を新しいウィンドウやタブで開くなどの指定ができる
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は透過なし
参考例 :
font-size、line-heightなどがある
font-sizeは直接値を10pxとかで指定する以外にも、smaller, largerなど親要素のフォントに対して相対的に指定することもできる
xx-small, x-small, small, medium, large, x-large, xx-large
などで指定することもできる、大きさはブラウザ依存
line-heightは行間を指定できる
150%では重なってしまうので注意
でフォントの選択肢を追加できる
実際に選ばれるのは閲覧者がインストールしているフォントのうち、一番左のもの
フォントは" "でくくったほうがいい
■ ベンダープレフィックス
テキストだけに限った話ではないけど・・・・
CSSのレベルが変わると新しい機能が追加される、このときまだ最終版ではない機能を使いたいときはこのベンダープレフィックスを指定する必要がある
Chrome, safariでは-webkit-
Firefoxでは-moz-
IEでは-ms-
Operaでは-o-
なんで全部のブラウザで違うんじゃああああああ
■ CSSの設定
*
.
#などの違いについては以下の記事にまとめた
■ 参考 : 【CSS】idとclassの違い
■ 擬似クラス
ある要素が特定の状態のときに限定して適用できるセレクタ
リンクを貼るのに使うa要素が一番わかりやすい
a要素の設定はこんな感じ
指定する順番が重要になる
■ 優先度
ある要素に関する設定が複数あった場合は後ろにある方が優先される
■ 画像関連
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とsubというidを使って別々に指定大きさを指定してる
一番下のfooterは回り込みの設定を解除してる
これがないと左にあるsubのボックスの下だけにfooterが表示されてしまうので
■ 箇条書き
ul :番号はなくて中黒でリストする
ol :通し番号でリストする
li : ulかolの中身はliでリストする
区切り線はhrで出せる
他にもフォームとかあったけど今回は使わないのでパス
おわり〜
ツイート
■ 参考 : 【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;
}
■ フォントサイズ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:font-size: 10px;
line-height: 150%;
}
h1 {
font-size: 30px;
}
でフォントの選択肢を追加できる
実際に選ばれるのは閲覧者がインストールしているフォントのうち、一番左のもの
フォントは" "でくくったほうがいい
■ ベンダープレフィックス
テキストだけに限った話ではないけど・・・・
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; }
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;
}
みたいな感じ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
この記事にコメントする
プロフィール
ＨＮ：coffee
職業：物理屋（自称）
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
職業：物理屋
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
カウンター
カテゴリー
ブログ内検索
リンク
相互リンク募集中です
(Twitterにてお知らせください)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
最新記事
(11/20)
(03/05)
(02/29)
(02/21)
(02/21)
(02/21)
(02/21)
(01/13)
(01/05)
(01/05)