コピー2013.10.06(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・)一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。いうわけでまとめてみました。Webサイト“color”や”background-color”などの色の指定のプロパティで利用する。それぞれ左から赤、緑、青の値を意味し、0%は0、100%はff(255)をあらわす。LifeCSS3から追加した色の指定方法。RGB値と同じく、”color”や”background-color”などの色の指定のプロパティで利用する。表し、彩度と輝度を%で指定する。色相は色みを角度であらわす(なので、範囲は0~360)。jQueryにおいて、HSL値で色を指定すると、rgb指定に変換されてしまうっぽい。Walker親要素のフォントサイズに対する割合をあらわす。100%なら、親要素のフォントサイズと同じ。0%なら、何も表示されない。MDNその要素のline-heightプロパティの値に対する割合を表すよう。baseline(初期値)を指定した時の場所を基準に、正の値なら上に、負の値なら下に移動する。line-heightが100%(もしくは1.0)で、親要素と同じフォントサイズであれば、-100%の時に一段下に、100%の時に一段上になる。bagフォントサイズに対する割合をあらわす。100%とすると、行の高さが、フォントサイズと同じ高さになる。数値のみの表記にしてもフォントサイズと同じくフォントサイズに対する割合という意味になるが(1.0は100%と同じ)、子要素への影響が違ってくる。パーセント表記だと子要素の行の高さは親要素の行の高さと同じになり、数値のみの表記だと子要素にも適用され、子要素のフォントサイズに対する割合となる。親要素のフォントサイズが20px、子要素のフォントサイズが15pxのとき、親要素のline-heightを100%と指定すると子要素の行の高さは20pxになり、親要素のline-heightを1.0と指定すると子要素の行の高さは15pxになる。text-indent説明:一行目のインデントの幅を指定する範囲:どんな数値でもOK指定方法:X%例:text-indent:80%参考:text-indent-スタイルシートリファレンス親要素の幅(width)に対する割合をあらわす。今回調べるまで、自分自身の幅と勘違いしてました。このtext-indentを100%と指定した場合の利用方法として、CSSでテキストを画像に置き換える場合に使うことがある。コリスつまり、text-indentを100%に、overflowをhiddenに、white-spaceをnowrapと指定してbackground-imageを指定すると、テキストが表示されず、画像のみが表示される。昔はtext-indentに-9999pxと指定する方法がよく利用されていたようなのですが(うちの会社のサイトにもそういう指定があります・・・)、それだとパフォーマンスが悪いということで編み出されたそうです。横幅と高さwidthmin-widthmax-width説明:幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。MDN親要素の横幅(width)に対する割合をあらわす。最近流行りのレスポンシブウェブデザインでは、widthをパーセント指定で表記することが多い(画面サイズと横幅の比率を同じにするため)。昔の自分は、imgタグだと実際の画像サイズに対する割合だと勘違いしてたことがありますが、そんなことはありません(width属性も同じ)。親要素とぴったしあわせたいとwidthを100%と指定しても何か表示がおかしい場合、borderやpaddingの指定がないかチェックしましょう。width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。Ginpen.comheightmin-heightmax-height説明:幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。Web標準普及プロジェクト親要素の高さ(height)に対する割合をあらわす。ブラウザの表示枠ぴったしにレイアウトしたい場合は、bodyすぐ下の階層のタグのheightを100%にするだけでなく、html要素とbody要素のheightも100%にする必要がある。親要素の横幅(width)に対する割合をあらわす。注意したいのが、上下マージンも高さ(height)ではなく、横幅に対する割合をあらわすということ。marginはマイナスの指定も可能。親要素の横幅(width)に対する割合をあらわす。marginと同じで、上下パディングも高さ(height)ではなく、横幅に対する割合をあらわす。Stylesheet解説]基準となるボックスの幅や高さに対する割合をあらわす。50%にすると、要素の左上座標位置が、基準となるボックスの真ん中に表示される。ボックスを上下左右中央位置に表示させたい場合は、leftに50%、topに50%と指定し、margin-leftにその要素のボーダーとパディングを含む幅を2で割った値のマイナス値を、margin-topにその要素のボーダーとパディングを含む高さを2で割った値のマイナス値をいれると上下中央配置になる。MDNこの指定は、『何かの割合』と、一言であらわすのは難しいです。100%”にすると、ボックスの外側の右下というわけではなく、ボックス内側の右下に表示されるからだ。なる(ポジションのtopやleftでもこういう仕様だったら、上下中央配置が簡単だったのに!)。いうなら、『ボックスの幅(padding含む。背景領域と同じ)から背景画像の幅を引いた値』の割合らわす。background-positionには、横と縦を別々に指定する方法はないので注意。後、一つだけの指定だと横方向のみ適用され、縦方向は50%とした時と同じ位置になります。0%”と同じ位置です。MDNCSS3で追加されたプロパティ。背景領域に対する背景画像の幅・高さに対する割合をあらわす。100%”とすると、ボックスと同じサイズの背景画像となる。実際の背景画像ファイルの大きさに対する割合ではないので注意。MDNボーダーボックスの幅と高さに対する割合の半径の楕円と同じ形の弧をあらわす。/をつけることによって、水平方向と垂直方向の指定もできる。とも同じになるようだけれども、その場合、50%以降は変化なし。キレイな円を描きたいなら、widthとheightを同じにし、border-radiusを50%にすると円になる。Spiceなお、Androidの一部端末ではパーセント指定ができないそうなので注意。console.lealog();ボーダー関連だと他に、”border-image-slice”や”border-image-width”というプロパティもパーセント指定できるようなのですが、自分がよく分かってないうえに対応ブラウザも少ないみたいなのでパスします。100%”なら左下を軸の基準として要素が回転する。試しに、jsFiddleで動作サンプルを作ってみました。説明不足なんで使い方は分かりにくいかもしれませんが、いろいろいじって確かめてみてください。コピーamyuをフォローするamyuwhile(isプログラマ)関連記事まとめここ1年以内(2011年5月以降)に読んだラノベ風ビジネス小説まとめもしドラ(もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら)以降増えている気がするラノベ風ビジネス小説。ここでいうラノベ風ビジネス小説とは、小説家(ラノベ作家含む)ではなく、ビジネスの専門家(コンサルタントや会計士など...CSS:active疑似クラスは右クリックでも適用する?しない?今やってるプロジェクトでは、ボタンやら画像やらがあるウェブアプリを作っているのですが、先日お客さんから右クリックしてもコンテキストメニューがでないようにしてほしいとお願いされました。ようは、画像を簡単に保存できないようにしてほしいと...まとめ今までもらった粗品・贈呈品まとめこの2,3年、会社説明会やセミナー、展示会などにいろいろ参加してきたのですが、それらに参加している中でときどき何か物をもらうことがありました。今回はその中で、ある程度知名度のある企業(IT企業中心)でかつ、その会社名や製品名が入って...CSSCSSとJSで要素の背景にcanvas画像を設定する方法WebKit系とFirefox限定です(IEでは利用できない)。CSSのbackgroundプロパティにおいて、WebKit系のブラウザにはcanvas()関数、Firefoxではelement()関数という値が指定できます。can...CSSCSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE...まとめnavigatorオブジェクトによるブラウザ識別まとめJavaScriptには、navigatorオブジェクトという、ブラウザ等の利用環境を識別するオブジェクトがあります。22:17positionのパーセンテージ参考になりました。ありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。(幻冬舎文庫)(ブクログレビュー)カテゴリーPR2Web制作76CSS16HTML8HTML512jQuery17Vue.js14WebAPI2WordPress6まとめ13フリーソフト7プログラミング101JavaScript61PHP5R10SQL10UiPath7VBA3クラシックASP1日記11イベント5書評1未分類2豆知識19雑記25アーカイブ2023年4月12023年3月12023年1月12022年12月12022年11月32022年10月22022年9月12022年8月12022年6月22022年5月12022年4月32022年3月22022年2月52022年1月82019年9月22019年6月32019年5月12019年2月32019年1月32018年12月42018年11月12018年10月22018年9月22018年8月22018年7月32018年6月12018年5月22018年4月22018年3月52018年2月12016年11月32016年10月62016年2月12016年1月32015年12月22015年11月32015年10月12015年9月12015年7月12015年5月22015年4月22015年3月22015年2月22015年1月22014年12月42014年11月92014年10月62014年9月52014年8月72014年7月62014年6月52014年5月52014年4月62014年3月62014年2月92014年1月132013年12月82013年11月92013年10月82012年8月12012年6月32012年5月42012年4月42012年3月62012年2月82012年1月17タイトルとURLをコピーしました。