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

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

[HTML/CSS]代表的なHTML特殊文字について

2015年10月15日 yellow

&quot;　""" ダブルクォーテーション
&amp;　 "&" アンパサンド
&lt;　　"<" 小なり
&gt;　　">" 大なり
&nbsp;　" " 空白
&copy;　"(c)" コピーライト

"　""" ダブルクォーテーション

&　 "&" アンパサンド

<　　"<" 小なり

>　　">" 大なり

 　" " 空白

[参考]
http://pst.co.jp/powersoft/html/index.php?f=3401

HTML/CSS

[HTML/CSS]縦中央寄せ（縦中央揃え、センタリング）で使うプロパティを列挙

2015年10月15日 yellow

・vertical-align:middle;

・position:relative;とposition:absolute;

・display:table;とdisplay:table-cell;とvertical-align:middle;

[参考]
http://bashalog.c-brains.jp/11/10/13-200523.php
http://teamsanta.info/web/2399/
http://taneppa.net/display-inline-block/
http://creatorclip.info/2014/05/css-layout-center/
http://ideahacker.net/2015/02/14/9779/

HTML/CSS

[HTML/CSS]横中央寄せ（横中央揃え、センタリング）で使うプロパティを列挙

2015年10月15日 yellow

・text-align:center;

・margin:0 auto;

・position:relative;とposition:absolute;

HTML/CSS

[HTML/CSS]横中央寄せ（margin:0 auto;）の動作条件

2015年10月14日 yellow

条件1. 対象がブロック要素である
条件2. 対象にwidthが規定されている
条件3. 親要素にwidthが規定されている
※htmlデフォルトでbodyにwidthが規定されており（子要素に継承されているとのこと）

.sample {
	width:300px;
	display:block;
	margin:0 auto;
	background:yellow;
	border:solid 1px;
}

.sample {

width:300px;

display:block;

margin:0 auto;

background:yellow;

border:solid 1px;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
.sample {
	width:300px;
	display:block;
	margin:0 auto;
	background:yellow;
	border:solid 1px;
}
.sample--block {
	display:block;
}
.sample--inline-block {
	display:inline-block;
}
.sample--inline {
	display:inline;
}
.sample--table {
	display:table;
}
</style>
</head>
<body>
<div>
  <span class="sample  sample--block">display:block;</span>
</div>
<div>
  <span class="sample  sample--inline-block">display:inline-block;</span>
</div>
<div>
  <span class="sample  sample--inline">display:inline;</span>
</div>
<div>
  <span class="sample  sample--table">display:table;</span>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

<style>

.sample {

width:300px;

display:block;

margin:0 auto;

background:yellow;

border:solid 1px;

}

.sample--block {

display:block;

}

.sample--inline-block {

display:inline-block;

}

.sample--inline {

display:inline;

}

.sample--table {

display:table;

}

</style>

</head>

<body>

<div>

<span class="sample sample--block">display:block;</span>

</div>

<div>

<span class="sample sample--inline-block">display:inline-block;</span>

</div>

<div>

<span class="sample sample--inline">display:inline;</span>

</div>

<div>

<span class="sample sample--table">display:table;</span>

</div>

</body>

</html>

HTML/CSS

[HTML/CSS]favicon.icoの作成について

2015年10月7日 yellow

[要件]
・正方形
・背景透明png
※Fireworksではpng32を選択する
※Photoshopではpng24を選択する
※16×16などは手作業でドットに色を足したりする

[必須サイズ]
・16×16（Windows XP以前必須）
・32×32（Windows XP以前必須）
・48×48（Windows XP以前必須）
・152×152（iOS7以降のiPad Retina、旧OSは144×144とのこと）
※iPhone Retinaの114×114は、152×152の自動縮小で対応するので不要

[作成作業の流れ]
→素材はIllustratorの.aiファイルから得る

→画像が荒れないようにアウトライン化データファイルからパス情報を拾う

→Fireworks＞ファイル＞新規作成
　キャンバスカラー：透明
　幅、高さを任意で決める

→パス情報をペースト

→手作業で修正

→png32を選択して書き出し
　16.png
　32.png
　48.png
　152.png

→以下、ファビコン作成サイトを利用する
http://ao-system.net/alphaicon/index.php
http://ao-system.net/favicon/

[参考]
http://blog.excite.co.jp/spdesign/19798730/
http://www.tam-tam.co.jp/tipsnote/html_css/post1937.html
http://www.nda.co.jp/memo/iconscale/
http://memo.goodpatch.co/2013/03/mac-win-ios-android-app-icns-size/
http://liginc.co.jp/designer/archives/7300
http://www.hp-stylelink.com/news/2014/02/20140213.php

[Web検索キーワード]
favicon png 透過
favicon サイズ OR 解像度 Android OR iPhone OR iPad
favicon サイズ 16 32 48

HTML/CSS

[HTML/CSS]HTML内にスタイルシートを記述する方法

2015年10月7日 yellow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
p.sample {
	color: #00CCFF
}
-->
</style>
</head>
<body>
<p class="sample">サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

<!--

p.sample {

color: #00CCFF

}

-->

</style>

</head>

<body>

<p class="sample">サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

</body>

</html>

HTML/CSS

[HTML/CSS]スタイルシート記述の優先度について

2015年10月7日 yellow

優先度順（上の記述が最も優先される）
・HTML内にスタイルシートを記述して!important付加
・外部CSSにスタイルシートを記述して!important付加
・HTML内にスタイルシートを記述
・外部CSSにスタイルシートを記述

HTML/CSS

IE11の「このWebページはスクリプトやActiveXコントロールを実行しないように制限されています。」を出ないようにする方法

2015年9月28日 yellow

Windows 7、IE 11.0の環境にてローカル保存したHTMLファイルを開くと、「このWebページはスクリプトやActiveXコントロールを実行しないように制限されています。」が現れます
「ブロックされているコンテンツを許可」を毎回押すのが面倒なので、設定を変更してダイアログが出ないようにします

[操作手順]
→IE11を起動する

→画面右上メニューより、メニュー＞インターネットオプションの順にアクセスする
※Alt＞T＞O の順にキーを押しても同様です

→インターネットオプション窓が現れるので、「詳細設定」タブを開く

→セキュリティ項目の「マイコンピュータのファイルでのアクティブコンテンツの実行を許可する*」をONにする（デフォ：OFF）

→OKを押してIE11を終了する

→PCを再起動する

[確認環境]
Windows 7 SP1 64bit
IE 11.0

HTML/CSS