Webコーディングをするときによく使うタグやスタイルシートの正しい読み方を調べてみた。

2012.06.30 Sat

Webコーディングをするときによく使うタグやスタイルシートの読み方についてあまり気にしたことはなかったんですが、誰かに教える立場になったときに、ちゃんとした読み方で教えたいと思ったので、正しい読み方を調べてみました。

HTML – HyperText Markup Language

p – Paragraph

[読み方]ピー / パラグラフ [意味]段落を示す

pre – PREformatted text

[読み方]プリ / プリフォーマッティッドテキスト [意味]整形済みテキストを示す

ul – Unordered List

[読み方]ユーエル / アンオーダードリスト [意味]順序のないリストを示す

li – List Item

[読み方]エルアイ / リストアイテム [意味]リストの項目を示す

ol – Ordered List

[読み方]オーエル / オーダードリスト [意味]順序のあるリストを示す

dl – Description List ※HTML5から変更

[読み方]ディーエル / ディスクリプションリスト [意味]定義・説明リストを示す

dt – Description Term ※HTML5から変更

[読み方]ディーティー / ディスクリプションターム [意味]定義・説明する用語を示す

dd – Description, Definition ※HTML5から変更

[読み方]ディーディー / ディスクリプション , ディフィニション [意味]用語に対する説明や定義を示す

div – DIVision

[読み方]ディヴ / ディヴィジョン [意味]-

a – Anchor

[読み方]エー / アンカー [意味]リンクを設定する

href – Hypertext REFerence

[読み方]エイチレフ [意味]リンク先の文書を指定する

sub – SUBscript

[読み方]サブ / サブスクリプト [意味]下付き文字を示す

sup – SUPerscript

[読み方]スーパースクリプト [意味]上付き文字を示す

span

[読み方]スパン [意味]-

br – BReak

[読み方]ビーアール / ブレーク [意味]改行する

img – IMaGe

[読み方]アイエムジー / イメージ [意味]画像を表示する

src -SouRCe

[読み方]ソース [意味]画像のURLを指定する

alt – ALTernate / ALternate Text

[読み方]オルト [意味]画像の代わりになるテキストを指定する

iframe – Inline FRAME

[読み方]アイフレーム / インラインフレーム [意味]インラインフレームを設定する

embed – EMBEDding

[読み方]エンベッド / エンベッディング [意味]動画や音声などのコンテンツを埋め込む

object

[読み方]オブジェクト [意味]様々なデータを埋め込む

param – PARAMeter

[読み方]パラム / パラメータ [意味]パラメータを指定する

table

[読み方]テーブル [意味]表を作成する

tbody – Table BODY

[読み方]ティーボディ / テーブルボディ [意味]表のボディを示す

thead – Table HEADer

[読み方]ティーヘッド / テーブルヘッダー [意味]表のヘッダーを示す

tfoot – Table FOOTer

[読み方]ティーフット / テーブルフッター [意味]表のフッターを示す

tr – Table Row

[読み方]ティーアール / テーブルロウ [意味]表の行を示す

td – Table Data cell

[読み方]ティーディー / テーブルデータセル [意味]表のセルを示す

th – Table Header cell

[読み方]ティーエイチ / テーブルヘッダーセル [意味]表の見出しのセルを示す

CSS – Cascading Style Sheets

color

[読み方]カラー [意味]文字の色を指定する

font

[読み方]フォント [意味]フォントに関する設定をまとめて指定する

text-decoration

[読み方]テキストデコレーション [意味]文字の下線、上線、取り消し線、点滅を指定する

text-align

[読み方]テキストアライン [意味]行揃えの位置を指定する

line-height

[読み方]ラインハイト [意味]行の高さを指定する

vertical-align

[読み方]ヴァーティカルアライン [意味]縦方向の揃え位置を指定する

background

[読み方]バックグラウンド [意味]背景に関する設定をまとめて指定する

border

[読み方]ボーダー [意味]ボーダーの色、太さ、スタイルを指定する

width

[読み方]正:ウィズ 誤:ウィドゥス [意味]要素の横幅を指定する

height

[読み方]正:ハイト 誤:ヘイト [意味]要素の高さを指定する

margin

[読み方]マージン [意味]外側の余白の大きさを指定する

padding

[読み方]パディング [意味]内側の余白の大きさを指定する

position

[読み方]ポジション [意味]要素の配置方法を指定する

display

[読み方]ディスプレイ [意味]要素の表示形式を指定する

float

[読み方]フロート [意味]画像やテキストの回り込みを指定する

list-style

[読み方]リストスタイル [意味]リストマーカーの種類、位置、画像を設定をまとめて指定する

:link

[読み方]リンク [意味]未訪問のリンク要素のスタイルを指定する

:visited

[読み方]ヴィジッティッド [意味]訪問済みのリンク要素のスタイルを指定する

:hover

[読み方]ホバー [意味]カーソルが重なったときの要素のスタイルを指定する

:active

[読み方]アクティブ [意味]クリック中の要素のスタイルを指定する

:focus

[読み方]フォーカス [意味]フォーカスされた要素のスタイルを指定する

HTMLは、ほとんど単語の頭文字や頭から数文字をとった略称になっているので、そのままアルファベットを読んだり、単語を読んだりすれば良いですが、複数の単語が組み合わさっている「href」や「iframe」といった頭だけアルファベットを読んで残りは単語で読むという特殊な例もあることがわかりました。

CSSは、略称にはなっていないので単語さえ知っていれば読むことができますが、逆に言えば単語を知らないと読むことができません。その中でも「width」と「height」は間違えた読み方で覚えている人が結構いるようです。実は、僕もその一人でした。恥ずかしい思いをしないためにも、間違えた読み方で教えないためにも、正しい読み方でちゃんと覚えましょう。

今回、厳選して調べましたが、もし読み方の間違いなどがありましたら、ご指摘していただけるとありがたいです。


HTMLを上下中央、上下左右中央に配置する。

2012.06.06 Wed

HTMLを上下中央にしたり、上下左右中央に配置したサイトは最近あんまり見ない気がしますが、フルFlashのサイトが少しずつ減っているところを見ると、そういうレイアウトのサイトが増える可能性もないとも言えません。ということでまとめてみました。

1.HTMLを上下中央に配置する。

下記のようにHTMLとCSSを記述することによってコンテンツを上下中央に配置することができます。コンテンツの高さ(今回は600px)に対して、その半分の高さ(今回は300px)のネガティブマージンをかけているのがポイントです。

<div id="container"></div>

html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#container {
background: #ccffcc;
width: 100%;
height: 600px;
position: absolute;
top: 50%;
left: 0;
margin: -300px 0 0;
}

2.HTMLを上下左右中央に配置する。

先ほどの上下中央に配置したコンテンツを中央揃えにすることによって、上下左右中央に配置することができます。

<div id="container">
  <div id="container_inner"></div>
</div>

html {
height: 100%;
}body {
height: 100%;
position: relative;
}
#container {
width: 100%;
height: 600px;
position: absolute;
top: 50%;
left: 0;
margin: -300px 0 0;
}
#container_inner {
background: #ccffcc;
width: 960px;
height: 600px;
margin: 0 auto;
}

以上の2つを組み合わせることによって、メインコンテンツ部分は上下中央の配置にしてフッター部分は上下左右中央の配置にするということもできます。

この方法はIE6、IE7を含むほとんどのブラウザで使用することができますが、コンテンツの高さを指定しているので、コンテンツの中身をすべて画像にしたり、コンテンツ内でスクロールができるようにしたりするなど、高さが超えないように何らかの工夫が必要になります。


FC2ブログにカスタマイズしたTwitter ウィジェットを表示する。

2012.02.04 Sat

昨年6月に書いた「Twitter ウィジェットをカスタマイズする。」という記事にコメントをいただきました。質問の内容はFC2ブログにカスタマイズしたTwitter ウィジェットを表示するにはどうすれば良いのかということでした。

ただ文章だけで説明するのは難しいと思い、記事として書くことにしました。

1.プロフィールウィジェットをカスタマイズするページにアクセスする。

Twitterのホーム画面です。上の画像の赤く囲ってある部分に「素材」という項目があるのでクリックします。

「素材」ページにアクセスすると、「Twitterボタン」、「ロゴとアイコン」といったものがありますが、その中にある「ウィジェット」を選択します。

「自分のサイト」を選択します。

「検索ウィジェット」、「お気に入りウィジェット」、「リストウィジェット」といったものがありますが、今回は「プロフィールウィジェット」を選択します

2.プロフィールウィジェットをカスタマイズする。

<設定>

■ Twitterのユーザー名

<Preferences(カスタマイズ)>

■ 最新データを取得するか
■ スクロールバーを表示するか
■ ツイートの表示方法(一定間隔で更新するか、全ツイートを取得するか)
■ 表示するツイート数(1~30)
■ プロフィール画像を表示するか
■ 投稿時刻を表示するか
■ ハッシュタグを表示するか

<Appearance(デザイン)>

■ ウィジェットの色(外枠の背景、外枠の文字、ツイート投稿欄の背景、ツイートの文字、リンク)

<サイズ>

■ ウィジェットのサイズ(横幅、高さ)

ここで設定しておくべきことはウィジェットのサイズ設定で「横幅の自動調整」にチェックを入れておくことかと思います。
FC2ブログのテンプレートによってプロフィールや最新記事などを表示しているサイドバーの幅が異なるので、それぞれのテンプレートに合わせるには自動で幅を調整させることが必要です。

それぞれの設定をし、「Finish & Grab Code(完了&コード取得)」ボタンを押すと、下記のようなHTMLコードが表示されます。

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
    background: '#333333',
    color: '#666666'
    },
  tweets: {
     background: '#000000',
     color: '#666666',
     links: '#ff6600'
    }
  },
  features: {
  scrollbar: false,
  loop: false,
  live: false,
  behavior: 'all'
  }
}).render().setUser('Twitterのユーザー名').start();
</script>

この表示されたHTMLコードの中にあるbackgroundプロパティに’transparent’と指定しておくと良いです。これによって背景が透明になるので、どのようなテンプレートにも合わせることができます。

3.FC2ブログにTwitter ウィジェットを表示する。

先のHTMLコードをコピーしておきます。

FC2ブログの管理ページにアクセスし、左サイドバーの中にある「環境設定」から「プラグインの設定」を選択します。上の画像の赤く囲ってある部分にあります。

「PC用」の行にある「公式プラグイン追加」を選択します。

「基本プラグイン」、「お役立ちプラグイン」、「SNSプラグイン」、「FC2プラグイン」といったものがありますが、「拡張プラグイン」の中から「フリーエリア」の「追加」をクリックします。

今回「タイトル」を「Twitter」にし、「フリーエリア内容の変更」にコピーしたHTMLコードを貼り付け、「追加」をクリックします。

すると、FC2ブログの左サイドバーにTwitter ウィジェットが表示されました。

4.Twitter ウィジェットをカスタマイズする。

左サイドバーの中にある「環境設定」の「テンプレートの設定」を選択します。

「HTML CSS」の列にある「編集」をクリックします。

「テンプレート名 のスタイルシート編集」の枠の中に下記のコードを入力します。一番下に入力するのが良いかと思います。

/* ————————————————–
Twitter
————————————————– */
.twtr-widget {
font : normal normal normal 75%/1.8 "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "Helvetica", "Arial", "MS Pゴシック", sans-serif !important;
}.twtr-widget .twtr-tweet {
border-bottom: 1px solid #c9c7c7 !important;
}
.twtr-widget .twtr-tweet-wrap {
padding: 6px 0 !important;
}
.twtr-hd, .twtr-ft {
display: none;
}
.twtr-widget .twtr-tweet:last-child {
border: none !important;
}

FC2ブログにカスタマイズしたTwitter ウィジェットを表示させるために重要なことは「!important」を付けることです。

昨年6月に書いた「Twitter ウィジェットをカスタマイズする。」という記事ではTwitter独自のwidget.cssというCSSを読み込ませたあとに、自分で書いたCSSで上書きをするというかたちを取っていました。

でも、今回のFC2ブログではその方法を取ることができません。そのため今回は、「!important」を全てに付けて最優先にスタイルを適用させる方法を取ります。

これによって下の画像のようなカスタマイズしたTwitter ウィジェットを表示することができるのです。

ただTwitter独自のwidget.cssで英語フォントのスタイルに対して「!important」が付けられているために、英語フォントだけは今、紹介したように自分で書いたCSSで上書きをすることができません。

でも、無理矢理ではありますが、以下のコードを</body>タグの直前に入れることによって上書きすることができます。

<style type="text/css">
<!--
.twtr-widget {
font-family: "ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","Osaka","Helvetica","Arial","MS Pゴシック",sans-serif !important;
}
-->
</style>

今回、紹介したコードのフォントやリンクの色などは「sakanaテンプレート」に合わせたコードになっているので、それぞれのテンプレートに合わせたコードに一部変更をしてください。よろしくお願いします。

※追記(2012.02.09)※
「テンプレート名 のスタイルシート編集」の枠の中に入力するコードに脱字がありました。
申し訳ございません。現在は修正を済ませています。


page 1 of 41234