2月 122014
 

「HTML」は多少知っているし、ネット調べれば何とかなる・・・「CSS3」も同じような状況だけど、自分一人ではかなり不安だな~ってレベルの方にお勧めの参考書・・・

即ち私のように中途半端な知識しかない」方がにとって、基本から「HTML」や「CSS」を勉強するのはとってもかったるい。時間も掛かるし。そんなレベルの方々にとってもお勧めの参考書として、外間かおり著「HTML & CSS3 レイアウトブック」(ソーテック社:2013年5月)が良い感じです。

これまでも、何度も何度もウェブ開発に関して勉強したことがありますが、なかなか良い参考書に巡り合いませんでした。最初から読んでいくと飽きちゃったり、肝心の知りたいことに関する記述がなかったり・・・「中途半端に知っている人向けの参考書はないかな」と思っていました。

書店へ行けば、小さな書店であっても必ず 数冊は置いてあるウェブ関連の書籍なのですが・・・

個人的に、この書籍は「ズバリ!これだよ、これが知りたかった!」という Know-How が満載です。大部分がウェブ開発で言う「段組み」という部分に記述が割かれていますが、随所随所にポイントが掲載されていて、それが「痒い所に手が届く」って感じです。

本サイトでは、多くを上記の書籍を参考にしています。

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; }

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