2月 122014
 

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

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

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

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

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

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

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月 092014
 

ウェブサービス「TECH-UNLINiTED:特殊文字変換ツール」を利用すると、それこそ「HTML特殊文字」を一発で表示してくれます。

tech-unlimited

私のような素人には、こうしたウェブサービスが無料で提供されていることに本当に感動します。本当に無料で良いのか、と最初は疑ってしまったほど。

利用の仕方は本当に簡単で、単純に「HTML特殊文字」に変換したい文章や文字を入力して、変換ボタンをクリックするだけ。私は、PHPコードを丸ごとコピーして、変換することでPHPコードを紹介する様にしています。ってか、自分用の備忘録としてですけど。