ウェブメモ
Normal | Mobile

ウェブメモ

テキスト(太字・斜体・下線・取り消し線・色・サイズ・フォント)

太字
font-weight: bold
普通の太さ
font-weight: normal
斜体
font-style: italic
下線
text-decoration: underline
下線をなくす
text-decoration: none
取り消し線
text-decoration: line-through
color: 【任意の色】
HTMLカラー見本
サイズ
font-size: 120%
サイズ指定は「px」「%」「pt」の他、「large」「small」などがある。
参考URL:スタイルシートリファレンス > font-size(クイックリファレンス様)
フォント
font-family: メイリオ, Sans-Serif
PCやスマホにないフォントの場合は左から順の優先順位で使われる。どれもない場合のために、総称ファミリ名を最後に指定しておくと○。
フォント名にスペースがある場合は「"」で囲む。(「MS ゴシック」など)フォント名は半角全角含めて正確に。
【メモ】font-famiyでの総称ファミリ名
ゴシック体系 sans-serif 半角:ABCabc123全角:ABCabc123
明朝体系 serif 半角:ABCabc123全角:ABCabc123
筆記体系 cursive 半角:ABCabc123全角:ABCabc123
※日本語は対応していないようです。環境によっては日本語では表示されないこともあるようです。
装飾系 fantasy 半角:ABCabc123全角:ABCabc123
※日本語は対応していないようです。
等幅系 monospace 半角:ABCabc123全角:ABCabc123
【メモ】2015/05/09現在のこのサイトのフォント設定
font-family: メイリオ, "Meiryo UI", "MS ゴシック", "MS PGothic", Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Sans-Serif;

リンク(指定したページへ移動/戻る/進む/リロード)テキスト・ボタン)

指定したページへのリンク
<a href="http://yahoo.co.jp">Yahoo!</a>
戻るリンク
<a href="javascript:history.back()">戻る</a>
進むリンク
<a href="javascript:history.forward()">進む</a>
指定したページへのリンクボタン
<input type="button" value="Yahoo!" onclick="window.location.href='http://yahoo.co.jp'">
戻るボタン
<input type="button" value="戻る" onclick="hisotry.back()">
進むボタン
<input type="button" value="進む" onclick="hisotry.forward()">
リロードボタン
<input type="button" value="更新" onclick="location.reload()">
【メモ】履歴の指定
「history.xxx」のxxxの部分は「go(【任意の数字】)」でも指定できる。
ひとつ戻るなら「history.go(-1)」、ふたつ進むなら「history.go(+2)」など。

リンク先を別窓で開く

ページ全体のすべてのリンクを別窓へのリンクにする
以下をヘッダ内に記述。
<base target="_blank">
ページ全体は別窓リンク(上記設定)+一部のリンクだけ同じウィンドウへのリンクにする
<a href="http://yahoo.co.jp" target="_self">Yahoo!</a>
ページ内の一部のリンクだけ別窓へのリンクにする
<a href="http://yahoo.co.jp" target="_blank">Yahoo!</a>

マウスオーバーでカーソルを変化させる

<span onmouseover="style.cursor='xxx'" onmouseout="style.cursor='auto'">テキストなど</span>
「xxx」部分がマウスオーバー時のカーソル指定。カーソルの指定は
pointer / crosshair / move / text / wait / help / n-resize / s-resize / e-resize / w-resize / ne-resize / nw-resize / se-resize / sw-resize / auto(標準)
など。
参考URL:スタイルシートリファレンス > cursor(クイックリファレンス様)

幅・高さの設定

<div style="width: 250px; height: 30px">テキスト</div>
【メモ】pxの他に使える単位のうちよく使われるもの
「%」ブラウザのウィンドウサイズに対する%でのサイズ
「em」1em=1文字分のサイズ
【メモ】覚え書
・「a」や「span」にはサイズ設定は無効。
・テーブルやセルに「auto」を設定すると、内容に合わせたサイズになる。

背景色の設定

ページ全体
以下をヘッダ内に記述。
<style type="text/css">
body{
background-color: 【任意の色】;
}
</style>
ボックスなど
<div style="background-color: 【任意の色】">テキスト</div>
HTMLカラー見本

背景画像の設定・並べ方

ページ全体
以下をヘッダ内に記述。
<style type="text/css">
body{
background-image: url(【画像のURL】);
}
</style>
ボックスなど
<div style="background-image: url(【画像のURL】)">テキスト</div>
画像を上1列だけ並べる
background-image: url(【画像のURL】) repeat-x
画像を下1列だけ並べる
background-image: url(【画像のURL】) repeat-x bottom
画像を左1列だけ並べる
background-image: url(【画像のURL】) repeat-y
画像を右1列だけ並べる
background-image: url(【画像のURL】) repeat-y right
画像を1枚だけ置く
background-image: url(【画像のURL】) no-repeat
1枚だけ置いたときの配置場所はデフォルトでは左上。
左の中央なら「left center」、左下なら「left bottom」、右上なら「right top」、右の中央なら「right center」、右下なら「right bottom」、上下左右とも中央なら「center」を設定。
記述例:background-image: url(【画像のURL】) no-repeat left center
壁紙がスクロールしないように固定する
background-image: url(【画像のURL】) fixed
【メモ】画像のURLに引用符はなくてOK
あっても可。URLに「(」「)」を含む場合は必要。

枠(ボーダー)の太さ・色・スタイルの設定

枠(ボーダー)の太さ・色・スタイルを一辺ずつ設定する
border-top: 1px #ff0000 solid
border-bottom: 1px #ff0000 solid
border-left: 1px #ff0000 solid
border-right: 1px #ff0000 solid
枠(ボーダー)の太さを四辺まとめて設定する
border-width: 1px
枠(ボーダー)の色を四辺まとめて設定する
border-color: #ff0000
枠(ボーダー)のスタイルを四辺まとめて設定する
border-style: solid
枠(ボーダー)の太さ・色・スタイルを四辺まとめて設定する
border: 1px #ff0000 solid
【メモ】太さ、色、スタイルの違った値をまとめた設定
「上下 左右」
「上 右 下 左」
「上 左右 下」
記述例:border-width: 0 0 2px 10px
【メモ】よく使われるスタイル
solid dashed dotted double

余白の設定(マージン、パディング)

要素の外側の余白を一辺ずつ設定する
margin-top: 10px
margin-bottom: 10px
margin-left: 10px
margin-right: 10px
要素の外側の余白を四辺まとめて設定する
margin: 10px
要素の内側の余白を一辺ずつ設定する
padding-top: 10px
padding-bottom: 10px
padding-left: 10px
padding-right: 10px
要素の内側の余白を四辺まとめて設定する
padding: 10px
【メモ】違った値をまとめた設定
「上下 左右」
「上 右 下 左」
「上 左右 下」
記述例:magrin: 2px 10px 5px 5px

ボックス内の右よせ、左よせ、中央よせ(センタリング)、上下センタリングについて

左よせ
text-align: left
右よせ
text-align: right
中央よせ(センタリング)
text-align: center
【メモ】ボックス内の上下センタリングについて
ボックス内では「vertical-align」が使えない。
上下センタリングしようとすると、内容のサイズが決まっているなど条件が一定なら方法はありますが、そうでない場合はとてもとても複雑になる。
参考URL:CSSでボックスの内容物を上下中央揃えにする方法3種。

ボックスやテーブルのセル内でテキストを折り返す/折り返さないようにする

ボックスやテーブルのセル内で連続する半角英数字を折り返すようにする
word-break: break-all
word-wrap: break-word
どちらも設定しておく。デフォルトは「word-break: normal; word-wrap: normal」。
折り返さないようにする
white-space: nowrap

ボックスで内容物がサイズを越えたときにスクロールバーを表示する/はみ出した部分を隠す

ボックスで内容物がサイズを越えたときにスクロールバーを表示する
overflow: scroll
ボックスで内容物がサイズを越えたときにはみ出した部分を隠す
overflow: hidden

ボックスの角を丸くする

border-radius: 20px
※正方形のボックスで50%を設定すると円になる。
参考URL:border-radiusで角を丸くしてみよう!角丸プロパティの使い方

テーブルの設定各種

キャプション、見出し、セルの結合
キャプション
見出し1 1-1と1-2を結合 1-3
見出し2 2-1 2-2 2-3と3-3を結合
見出し3 3-1 3-2
<table>
<caption>キャプション</caption>
<tr>
<th>見出し1</th>
<td colspan="2">1-1と1-2を結合</td>
<td>1-3</td>
</tr>
<tr>
<th>見出し2</th>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3と3-3を結合</td>
</tr>
<tr>
<th>見出し3</th>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
テーブルの隣り合う枠線や罫線を重ねる
border-collapse: collapse
デフォルトは「border-collapse: separate」隙間が空くか、隣に並んで太くなる。
空のセルも罫線を表示する
empty-cells: show
幅を固定する
table-layout: fixed
【メモ】テーブルのスタイル設定の例
<style type="text/css">
.sample{
width: 100%;
border: 1px solid #cccccc;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.sample th, .sample td{
border: 1px solid #cccccc;
padding: 5px;
}
</style>

フォーム各種

テキストボックス
<input type="text" name="sample_text" value="初期値">
テキストエリア
<textarea name="sample_area">テキスト</textarea>
ラジオボタン
<input type="radio" name="sample_radio" value="1" checked>1
<input type="radio" name="sample_radio" value="2">2
<input type="radio" name="sample_radio" value="3">3
※「checked」デフォルトでチェックを入れる。
チェックボックス
<input type="checkbox" name="sample_check" value="1" checked>1
<input type="checkbox" name="sample_check" value="2">2
<input type="checkbox" name="sample_check" value="3">3
※「checked」デフォルトでチェックを入れる。
セレクトボックス
<select name="sample_select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
※「selected」デフォルトで選択。
パスワード
<input type="password" name="sample_pass" value="">
送信ボタン
<input type="submit" name="sample_submit" value="送信">
リセットボタン
<input type="reset" value="リセット">
ボタンの中に画像を入れたりスタイルシートを使ったりする
<button type="submit" value="値">
<img src="img/pinkborder.gif" style="vertical-align: middle">
テキスト
</button>
設定した値を送る。ユーザーが変えることはできない。
画像を送信ボタンとして使う
<input type="image" src="【画像のURL】" alt="送信">
「alt」は必須。
画像内のクリックした位置(座標)が値として送信される。(例:x=10&y=25)
「name」を設定した場合は、「name="sample"」だった場合、「sample.x=10&sample.y=25」などの値が送信される。
フォームを入力不可にする
disabled
「form」タグに入れるとすべてのパーツが入力不可に。
パーツごとに入れると入れたものだけが入力不可に。
送信ボタンに入れると送信不可になる。
送信しても、入力不可にしたものは値が送信されないことに注意!

リストの設定各種

リストの基本形
<ul>
<li>ひとつ</li>
<li>ふたつ</li>
<li>みっつ</li>
</ul>
数字でのリスト
<ol>
<li>ひとつ</li>
<li>ふたつ</li>
<li>みっつ</li>
</ol>
リストのマーカーを変える
list-style: 【値】
値は「disc」黒丸、「circle」白丸、「square」黒四角、「upper-alpha」など。
「ul」「ol」に入れればリスト全体に、「li」に入れればそのパーツのみに反映。
リストのマーカーをなくす
list-style: none
リストのマーカーに画像を使う
list-style-image:url(【画像のURL】)
複数行になったときのインデントをなくす
list-style-position: inside
参考URL:マーカーの種類を指定する(TAG index様)※マーカー一覧

リストを横並びにする

  • ひとつ
  • ふたつ
  • みっつ
<style type="text/css">
.sample_float{
margin-left: -0.5em;
list-style: none;
}
.sample_float li{
float: left;
width: 100px;
margin-left: 0.5em;
text-align: center;
border: 1px solid #999999;
}
</style>
<ul class="sample_float">
<li>ひとつ</li>
<li>ふたつ</li>
<li>みっつ</li>
</ul>
<div style="clear: left"></div>

エスケープすべき記号、その他よく使う特殊文字

エスケープすべき記号
「<」→「&lt;」、「>」→「&gt;」、「"」→「&quot;」、「'」→「&#039;」、「&」→「&amp;」
その他よく使う特殊文字
「«」→「&laquo;」、「»」→「&raquo;」、「©」→「&copy」

ファビコンを設定する

ファビコンを作り、ファイル名を「favicon.ico」とする。以下をヘッダに追加。
<link rel="shortcut icon" href="favicon.ico">
半透過マルチアイコンfavicon.icoを作ろう!

ツイッターのプロフィール画像URLを取得する [PHP]

オリジナルサイズ
$buff = file_get_contents('https://twitter.com/【スクリーンネーム】');
preg_match("/<a class=\"ProfileAvatar-container u-block js-tooltip profile-picture(\s?)\"(\s+?|\s?)href=\"(.+?)\"/s" , $buff , $match);
$match[3]が画像URL
アイコンサイズ
$buff = file_get_contents('https://twitter.com/【スクリーンネーム】');
preg_match("/<img class=\"avatar js-action-profile-avatar\" src=\"(.+?)\"/" , $buff , $match);
$match[1]が画像URL
小さめアイコンはURLファイル名の「bigger」の部分を「normal」に変えたもの。

折りたたみリンク(開閉で画像が入れ替わる)

(三角の画像をクリック。テキストのリンクはダミー。)
<div id="oritatami">
<div>
<img src="img/right.gif" id="mar_1" onclick="linkopen('mar_1')" onmouseover="style.cursor='pointer'" onmouseout="style.cursor='auto'">
<a href="">メニュー1</a>
</div>
<div id="box_1" class="hid">
<div><a href="">子リンク1-1</a></div>
<div><a href="">子リンク1-2</a></div>
<div>
<img src="img/right.gif" id="mar_1a" onclick="linkopen('mar_1a')" onmouseover="style.cursor='pointer'" onmouseout="style.cursor='auto'">
<a href="">子リンク1-3</a>
</div>
<div id="box_1a" class="hid">
<div><a href="">孫リンク1-3-1</a></div>
<div><a href="">孫リンク1-3-2</a></div>
</div>
</div>
<div>
<img src="img/right.gif" id="mar_2" onclick="linkopen('mar_2')" onmouseover="style.cursor='pointer'" onmouseout="style.cursor='auto'">
<a href="">メニュー2</a>
</div>
<div id="box_2" class="hid">
<div><a href="">子リンク2-1</a></div>
<div><a href="">子リンク2-2</a></div>
</div>
</div>
<script>
(function(){
var box = document.getElementById('oritatami').getElementsByTagName('div');
for(var i = 0 ; i < box.length ; i ++){
if(box[i].className == 'hid'){
box[i].style.display = 'none';/*CSSでは直接タグに入れないと初期は設定なしとして扱われるためここで設定。*/
box[i].style.marginLeft = '30px';
}

}
})();
function linkopen(number){
var num = number.split('_');
var box = document.getElementById('box_' + num[1]);
var mar = document.getElementById('mar_' + num[1]);
if(box.style.display == 'none'){
box.style.display = 'block';
mar.src = 'img/bottom.gif';
}
else{
box.style.display = 'none';
mar.src = 'img/right.gif';
}
}
</script>
※カスタマイズでidを追加・変更する場合は、アンダーバーの後ろのみを変える。
last up date: 2017-03-05
LINEスタンプ作りました!
日常のあいさつや、恋する乙女の一喜一憂をスタンプにしました♪
姉妹サイト
SNS
  • このエントリーをはてなブックマークに追加
ウェブ検索
Pixiv
このサイトについて
リンクはフリーです。
お問い合わせやご意見・ご感想などは、メインサイトのメールフォームよりお願いいたします。
リンク