「HTML/CSS」カテゴリーアーカイブ

HTML/CSSに関する記事です。

[HTML・CSS]box-shadow(ボックスシャドウ、ドロップシャドウ)の注意点

テーブルのCSSでborder-collapse:collapse;にすると、IE11のみでbox-shadow:が動作しないことに注意する
border-collapse:separate;にすることで解決する。

 

 

 

[確認環境]
Windows 7 SP1 64bit
IE 11.0
Google Chrome 46.0.2490.80 m
Firefox 41.0.2

[HTML/CSS]フォントサイズの%指定について

・作業の最後にDreamweaverの一括置換機能を用いてpx指定を%指定に置換する時は、親要素、子要素の%指定のフォントサイズが掛け算で影響することに注意する
・bodyにfont-size:100%;を指定する(IE11、Chrome、Firefoxの基準フォントサイズは16px)
・小数点第一位までとする(小数点第二位切り捨て)
・フォントサイズの%指定は16px基準の相対表を参照する

以下、相対表
8px 50%
9px 56.2%
10px 62.5%
11px 68.7%
12px 75%
13px 81.2%
14px 87.5%
15px 93.7%
16px 100%
17px 106.2%
18px 112.5%
19px 118.7%
20px 125%
21px 131.2%
22px 137.5%
23px 143.7%
24px 150%
25px 156.2%
26px 162.5%
27px 168.7%
28px 175%
29px 181.2%
30px 187.5%
31px 193.7%
32px 200%
33px 206.2%
34px 212.5%
35px 218.7%
36px 225%
37px 231.2%
38px 237.5%
39px 243.7%
40px 250%

[HTML/CSS]通常のCSSと、印刷用(プリント用)のCSSを分けて作成する方法

メディアタイプを指定して記述することで、通常と印刷用のCSSを分けることができます
プリンター印刷時は印刷用のCSSを読み込むことで、印刷時特有の不具合(レイアウト崩れなど)が修正可能です

一例として、
通常のCSSのパスを、css/style.css
印刷用のCSSのパスを、css/print.css
とします

css/print.css の中身は通常の記述でOKです

 

[参考]
http://on-ze.com/archives/1717

[HTML/CSS]dlタグ、dtタグ、ddタグについて

用語集などで頻繁に使われます。

例)

<dl>タグ
definition list(定義リスト)、description list(説明リスト)の意味合いのようです。<dl>タグで大外を囲います。
<dt>タグ
リストの項目を定義します。
<dd>タグ
リストの内容を説明します。

[HTML/CSS]CakePHPで開発中のWebサイトをDreamweaverでサイト定義する

例)ディレクトリ「sample」にて開発中のとき
C:\xampp\htdocs\sample
\app
\cake
\plugins
\vendors
・・・

システムページ(ctpなど)を編集する際は、トップのディレクトリ「sample」 をサイト定義する
C:\xampp\htdocs\sample
※Dreamweaverの機能(テンプレート、ライブラリなど)は使用できなくなる

通常ページ(htmlなど)を編集する際は、「webroot」 をサイト定義する
C:\xampp\htdocs\sample\app\webroot
※Dreamweaverの機能(テンプレート、ライブラリなど)を使用することができる

[HTML/CSS]PHPのURL引数(URLパラメータ)ついて

URLの「?」以降に続く文字列はPHPのURL引数(URLパラメータ)と呼ぶ

例)http://sample.co.jp/index.php?id=151029
URL引数は「id=151029」

 

引数が複数の場合は、「変数名1=値&変数名2=値」のように「&」で区切る

例)http://sample.co.jp/index.php?id=151029&name=test
URL引数1は「id=1029test」、URL引数2は「name=test」