2月 172014
 

昨年末(2013年12月)に購入したミラーレス一眼デジタルカメラの影響もあって、本ブログでは結構画像をアップロードしています。単純に撮影した写真をサイズのみ修正して添付していますが、修正した時に画像タイプを選定する必要があるんです。

画像タイプ・・・ウェブにはどんなフォーマットが良いの?

最近では、GIF、JPG、PNG の 3 つ位が一般的なようですが、使い分けが理解できていません・・・そこで、調べてみたので、下記に「HTML クイックリフェレンス:WEB画像について-GIF・JPEG・PNGの特徴」より引用しておきます。

GIF・JPG・PNG の特徴
GIF JPG PNG
GIF (Graphics Interchange Format) は最大8ビット(256色)までの色を扱うことのできる圧縮画像形式です。256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。 JPEG (Joint Photograph Experts Group) は圧縮画像形式ですが、24ビット(1670万色)まで扱うことができます。 このため、多くの色数を必要とする写真などの表現に向いています。 また、グラデーションのように色調が連続して変化する画像にはJPEGが適しています。 反対にアイコンやアニメ調の平坦なイラストなどをJPEGで保存するとにじんだように汚くなります。PNG(Portable Network Graphic) は「ピング」と読みます。 PNGは、特許使用の解釈に不安のあったGIFに替わるライセンス・フリーの画像形式として開発されました。 PNGには、「フルカラーにも8bitカラーにもすることができる」「圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなる」 「圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している」「複数の透過色を指定できる」「ライセンス問題の不安がない」等の長所があります。

なるほど!上記から、写真には「JPG」が向いていて。通常の画像は「PNG」が良いって結論が良さそうですね!上記の参照サイトには「PNGはW3C(World Wide Web Consortium)が推奨する画像フォーマットです。 最近ではブラウザやグラフィックソフトのサポートも進み、標準的な画像形式になっています。」とありますから、大方、これまでの私のやり方で正しいような気がします。

2月 112014
 

20140211_BlogTitleなんだかのっぺりした感じのするブログタイトル。これをちょっと立体的に見せたいな、と考えて「影」を付けてみることにしました!立体的に見せるために影を付けるのが正しいのかは不明ですが・・・

本ブログのタイトルに利用している「酔」という文字が影の具合によってかなり潰れた感じになってしまうので、立体的になったかどうかは判断できませんし、影を付けたのが良いのかもちょっと疑問ですが、そこは許して頂きたいな~なんて謝罪をして。

これまでのブログタイトルに関する CSS は以下の通り。

.blogtitle {
	font-size: 280%;
	font-weight: bold;
	float: left;
	line-height: 47px;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
	letter-spacing: 0.2em;
}

上記に対して、たったの 1 行を書き加えるだけで「影」を付けることができるんですよね~参考にしたのは「text-shadow-CSS3リファレンス」というウェブページ。実際には以下の通り。

.blogtitle {
	font-size: 280%;
	font-weight: bold;
	float: left;
	line-height: 47px;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
	letter-spacing: 0.2em;
	text-shadow: 1px 1px 3px #3454b4; /* 「影」を付けてみた! */
}

たったこれだけ!ちょっと参考までに上記のウェブページから重要と思う個所を引用しておきます。

text-shadow プロパティでは、スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。長さの値には、px や em や ex などの単位が利用できます。

1 番目の長さの値は、水平方向の影のオフセット距離を表します。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。

2 番目の長さの値は、垂直方向の影のオフセット距離を表します。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。

3 番目の長さの値は省略可能ですが、指定した場合には影のぼかし半径を表します。ぼかし半径が指定されない場合はゼロとなります。尚、ぼかし半径とは、ぼかし効果の境界までの距離のことですが、ぼかし効果を計算する厳密なアルゴリズムは定義されていません。

色の値は省略可能ですが、指定した場合には影の色を表します。長さの値の前か後に任意で指定します。色の値が指定されない場合には、ブラウザが選択した色が使用されます。

一回で上手くいくことはないようですから、何度も数字を変更してトライ・アンド・エラーを繰り返す必要がありそうですが、それでもちょっとだけ達成感があります。

2月 102014
 

週末の大雪で、思わぬ時間ができてしまったので、「HTML5 と CSS3 をじっくり勉強しようかな」と考えて、しこしことコーディング。もともとウェブプログラミングに関しては、とっても中途半端に知っているので、勉強すること自体はあまり苦にならないのですが、何せ記憶力に欠けるので、何度も何度も同じことを失敗して。

ただただコーディングするのも面白くないので、昨年公開した「ばら空間」の内容をウェブサイトにしてしまえと考えて・・・そこで、週末に完成したところまでを公開しました!って、偉そうに言えるものではありませんが。

題して「俺流!バラ栽培」です。

20140209_OreryuRose

自己満足の世界ではありますが、それでも 2 日間でここまでできれば「自分で自分を褒めてあげたい」なんちゃって。時間を掛けて充実させていこうと思っていますが、まずは「HTML5 と CSS3」をマスターして、その後は JavaScript をマスターして・・・なんちゃって。

最終的にはPHP でサイトを構築したいな~って考えていますが、どこまでできますやら・・・ただ、公開したトップページは、「The W3C Markup Validation Service」「CSS Validation Service」とを無事に合格しています。

2月 062014
 

以前、HTML や CSS を勉強している時に、同じウェブサイトを閲覧する時に Internet Explorer と FireFox とでは見え方が違うと知った時の驚きは表現できないほどでした。インストールの仕方が間違っているのかと一生懸命ブラウザの不具合を調べていました・・・

今や常識なんでしょうか・・・「ブラウザ間で実装しているスタイルが違うので違ってみえて当たり前」ってこと。

そこで、この「違ったスタイル」ってやつをリセットするのがウェブ制作者にとっては常識になっているらしいのです。「HTML初心者が知っておくべきリセットCSS と3つのポイント | 3streamer blog」がそれを明確に説明してくれています。ちょっと引用しておきましょうね。

HTMLとCSSを学び始めた人がまず覚えなければいけない大事な事は「ブラウザごとにデフォルトのCSSは異なる」ということです。(デフォルトのCSSとは初期状態で適用されているCSSのこと)

そこで登場するのが「リセット CSS」というものらしい。以下、更に引用文を掲載します。

HTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる「reset.css」と呼ばれるものです。これは上書きができるcssの特性を利用した方法です。一度リセットして、まっさらな状態からCSSを書き始めればブラウザ間のスタイルの差異に頭を悩ませたり、余計なハックを使う必要も少なくなります。CSSリセットする場合は必ず一番最初にリセットの設定を書いて下さい。何故ならば「CSSは上書きができる」ので、同じ設定であれば後から書かれたものが優先されるからです。

いろいろとリセットの仕方があるようですが、ここでは「YUI3を使ったリセット方法」にします。理解し易いし、どうやらグローバル標準のようだし。「Yahoo! User Interface Library (YUI)」「cssreset-min.css」を適用しましょう。

以下にコードを表示しておきましょう。

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.  http://yuilibrary.com/license/
*/

html { color:#000; background:#fff; }

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
th,td {
	margin:0;
	padding:0; 
	}
table {
	border-collapse:collapse;
	border-spacing:0; 
	}
fieldset,img {
	border:0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
	}
ol,ul {
	list-style:none;
	}
caption,th {
	text-align:left;
	}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	}
q:before,q:after {
	content:''
	}
abbr,acronym {
	border:0;
	font-variant:normal;
	}
sup {
	vertical-align:text-top;
	}
sub {
	vertical-align:text-bottom;
	}
input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
	}
legend {
	color:#000;
	}
#yui3-css-stamp.cssreset {
	display:none;
	}

上記のコードをダウンロードして利用しても良いし、HTML のヘッダー部分に以下のコードを加えてもよさそうです。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">

なるほど!どうやら上記を参考に自分流のリセット方法を習得するのが良さそうですが、私個人はあくまでも「趣味」の領域ですから、本投稿記事程度知識で十分でしょう。

ただ、「YUI 3: CSS Resetの問題 – Weblog – Hail2u.net」というのもあるようですので、「リセット CSS」の後のオリジナル CSS には、以下を加えるのが良いそうです。

html {
  background-color: transparent;
  background-image: none;
}

これで万全ということではないでしょうけど、それでもこれまでに比べれば、安心感は倍増すると思いますが・・・

1月 302014
 

理系出身・・・というわけではありませんが、本ブログでは。投稿記事の中で「表」を多用しています。何かと言うと「表」にまとめたいと考えてしまう。

本ブログで適用している「Suffusion」というテーマ・・・あまりにも「表」に関してシンプルな設定しかありません。つまり「table 要素」に関してのスタイル設定がほとんどないに等しい。

そこで、現在利用している「Suffusion」の「子テーマ」に対して、table 関連のスタイルを設定しました。適用された表が以下のサンプルです。

サンプル(表のタイトル)
サンプル(ヘッダー1) サンプル(ヘッダー2) サンプル(ヘッダー3)
サンプル サンプル サンプル
サンプル(データ1) サンプル(データ2) サンプル(データ3)

上記を達成するためのスタイルは以下の通りです。特に何かを工夫したわけではありませんから、どなたでも理解できると思いますが。とりあえずは、このスタイルで行こうかな。

.entry table {
	width: auto; /* 小さい Table 小さく。余計な余白を設定しない。 */
	border-collapse: collapse;
	border: 1px solid #8da5ed;
	margin: 5px auto; } /* auto で投稿記事やページで中央に table を配置 */
.entry caption {
	font-weight: bold; }
.entry th { /* table のヘッダー設定 */
	background: #a0b4f0;
	font-weight: bold;
	text-align: center;
	padding: 6px;
	border: 1px solid #8da5ed; }
.entry td { /* 通常のセルの設定 */
	padding: 5px;
	border: 1px solid #8da5ed; }
.entry td.data { /* セルがデータの場合の設定 */
	padding: 2px;
	text-align: center; }

もうちょっと何か良いアイディアは無いかな・・・ネットももう少々探してみますが、実際には結構満足していたりします。