FC2ブログ
021234567891011121314151617181920212223242526272829303104

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

具材ミックス パン

ミックスフルーツ画像 PROFOODSで、(ドライ)フルーツミックス1kg、1300円弱を買いました。勿論、ミックスフルーツ パンを焼くためです。一回に使う量は70gですから、ざっと14回焼けます。スーパーなどで売っているフルーツミックスは、100g前後の小袋入りで200円位ですのでコスト高な感じがありました。1回分が100円以下ならお得気分が充満に成ろうというものです。取り敢えず4~5回も焼ければと思い、味見、コーヒー・紅茶の請けに、と大半を食っちまいました。もたもたしているとパンに使う分が無くなってしまいます。
気合を入れて、焼きましたq(^_^)p、と言っても基本の食パンを焼く手順にミックスフルーツの自動投入をセットするだけで、あとはベーカリーにおまかせなのですが。何かオリジナリティーをと思案の末、3段階ある焼き色を薄いレベルにしてみました。
ミックスフルーツパン画像 ミックスフルーツパン画像
PROFOODSの"送料無料サービス"が待ち遠しいなあ~。
あっ、商品代金が壱萬円以上のお買いものは、送料無料なんですけどね。

スポンサーサイト
2014-03-30(日) |  Neutral |  コメント(0)  | Top▲

粉、好きです

日清製粉カメリア3kg、リスドォル6kg、グラハム粉1kg、全粒強力粉500g、ライ麦粉500g。
粉いろいろ消費増税対策の"駆け込み買い溜め"ではありません。
ホームベーカーリーでフランスパンを焼くのに、準強力粉の代わりに強力粉と薄力粉を22対3の割合で混ぜて使ったのですが、どうも気に入りません。それで、大好きな「価格com」でリスドォルを探しました。粉ですから値段にそれほど違いはありませんし、何処も送料別ですので購入意欲が湧きませんでした。そんな最中、5000円以上購入の条件付きながら三日間限定で送料無料の販売店に遭遇しました。粉のほか、ドライフルーツも1kg単位で買い物かごへ。送料無料期限への駆け込み買い溜めにまっしぐら。
作りたかったのは、リスドォルのフランスパンだけだったのですが、こうなったからにはホームベーカリーを極めたい。まずは、オイル不使用レーズンをマイヤーズラムで浸けたラムレーズンパンを焼きました。
自家製ラムレーズン ラムレーズンパン ラムレーズンパン
フランスパンとは全く逆の"クタッ"とした軟派なパンですが、軟派は軟派なりの味わいがあります。
次は、ドライフルーツを使ったカラフルな具材ミックスパン、作るぞ o(^o^)o
と張り切りつつ、本物の"引き籠り"になりそう (^_^;)

PROFOODS Logoお世話になった販売店

2014-03-28(金) |  Neutral |  コメント(0)  | Top▲

CSS事始め 3

CSSの書式

CSS事始め1で、p要素へstyle属性を追加して、段落の表示幅を600pxに設定しました。

<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>


p要素が二ヶ所ですので、それぞれのp要素にstyleの属性を付加してあります。同じ要素に、同じ属性を記入するのは効率が良くないですね。実は、styleを要素とするタグが用意されています。

<style type="text/css">
  p {width: 600px;}
</style>


style要素タグに括られた内容は、p要素の"表示領域の幅は600px"という属性の付加を意味します。これは、html書類の情報になりますので、つまりブラウザに表示しない内容ですので、head要素内に文書の情報として記入します。
pはHTMLの要素名ですが、style要素の内容では"セレクタ"と言います。呼び名が変わるのは、セレクタにはHTMのL要素名以外の物もあるからです。ただ、スタイルの適用対象がHTMLの要素であることは変わりません。まずは、書式に慣れましょう。
セレクタ {プロパティ: プロパティ値;}
widthを"プロパティ"(特性)、その具体的な性質を"プロパティ値"いいます。そして、プロパティとプロパティ値を:(コロン)で区切り中括弧{ }で括ります。プロパティを複数設定するときは、;(セミコロン)で区切ります。最後の;は省略できます。また、語中以外の半角スペース及び改行は無視されますので、記入時に読みやすいように適宜入れている方もおります。
もう、お気づきかと思いますが、HTMLタグのstyle属性値は"プロパティ: プロパティ値;"になります。styleというワードは、タグの要素名、属性名に使われています。混乱してしましそうですね。
余談ですが、titleも要素名、属性名に使用されています。styleは使用の対象が同じですが、ttitleは要素としての役割と、属性としてのそれは関係がありません。ちょっと、ややこしいことになっていますが、不便が無ければtitle属性を無理に使わなくても構いません。

2014-03-23(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 4

タグの書式

タグの書き方について整理します。タグとは、要素の範囲の始まりと終わりの付ける印で、印は要素の名前を山括弧< >で括ったもの、ということには少し慣れたでしょうか。タグで挟んだ範囲を"要素"と言います。

<html> 
  <head>
    <title>新田氏滅亡の地</title>
  </head>
  <body>
    <h1 align="center" style="font: bold larger serif;">うつぶしの森 </h1>
    <p style="width: 600px;">延元3年(1338)新田義貞が越前で亡くなり
 …忽ち劣勢に追い込まれてしまいます。<br>
 …落馬して最期を遂げました。</p>
    <p style="width: 600px;">地の民は、義宗の霊を「うつぶし明神」として祀り…</p>
  </body>
</html>


山括弧内のhtmlやh1などを"要素名"と言います。<h1>うつぶしの森 </h1>全体がh1要素です。タグに挟まれた"うつぶしの森"をh1要素の"内容"と言います。要素は、内容に別の要素を含むこともあります。body要素の内容は、h1要素とp要素です。また、終了タグのないbr要素のように内容を持たない要素もあります。
タグで、要素に性質(具体的には表示の装飾)を追加することができます。例題には要素名h1に続いて、align="…" style="…" の表記があります。alignは、行揃えの性質を追加するものです。この追加の性質を、"属性"と言います。表記の仕方は、align(行揃え)=(が)center(中央揃え)のようにします。=の左側(align)に属性(名)を、右側(center)に性質・特徴を具体的に表わす"属性値"を記入します。属性値は、連続した英数字以外は(")で括らなければなりません。なお、全て(")で括っても有効です。XHTMLの影響なのでしょうか、全て括っている方が多いようです。
<要素名属性="属性値"> 内容 </要素名> の書式になります。
属性を、複数追加することができます。その場合、属性を半角スペースで区切ります。蛇足ですが、要素名と属性も半角スペースで区切ります。
style属性値の記入法は少し違いますので、CSSの書式で整理します。

2014-03-22(土) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 3

タグの役割って?

HTML書類(ホームページ)は、Text書類(メモ帳文書)の文章にHTMLタグを付けたものです。そのタグの役割を確認しながら、HTMLの書式を整理しましょう。
タグの基本的な役割は、書類・文章の構造をブラウザに知らせることですが、先ずはこの書類がHTML書類であることを明確にします。ブラウザは、拡張子によっても判断できますが明示することが適切です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
  <head>
    <title> … </title>
  </head>
  <body>
    …
  </body>
</html>

1行目に要素DTDタグで書類がW3C標準のHTMLバージョン4.01の書式に緩く従っていることを宣言しています。終了タグのない要素です。CSSの採用がバージョン4からですので、今はお呪いだと思ってこの通り書いておいてください。汎用的なタグのみの使用であれば、<!DOCTYPE html>でも構いません。
W3C標準のHTML書式は、<html>、<head>、<title>、<body>の要素が必須になっています。<html>は、HTML書式の範囲を示す役割を持っています。この範囲内に、書類のに係る情報などを記入する<head>と、ブラウザに表示する内容(コンテンツ)を記入する<body>を設けます。
2行目の<html>からHTML書式の範囲が始まり、最終行の</html>で終了します。3行目から5行目が<head>の範囲、6行目から8行目が<body>の範囲です。<head>と<body>の順序もこの通りにしてください。ブラウザは、1行目から順番に処理をしますので、<body>が<head>より先に出てきますと、<head>タグが省略されたものとして処理します。
ちょっと道が逸れますが、<html>より先に全角のスペースなどがあったりしますと、そこが<body>の始まりだと判断してしまいます。
htmlソース インスペクタ
<html>も<head>も省略されていると判断されます。だからと言って<head>の内容が全く反映されない訳ではないので厄介なことが生じる事もあります。なお、半角スペースは無視されます。但し、文中では1個だけ有効になります。つまり、連続している場合は1個だけ有効ということです。
さて、残りの必須タグ<title>にはホームページの表題・テーマなどを記入します。これが、ブラウザのタブに表示されます。W3C勧告では省略不可とされていますが、多くのブラウザは省略されていますと(ホームページの)ファイル名とそのuliがタブに表示されます。
これで、拡張子をhtmlに変えただけでホームページになった理由を理解していただけでしょうか。
やはり「省略可」とされていても、必須タグは正しく付けてブラウザに書類の構成を明確に伝える方が良いですね。

2014-03-19(水) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

「タイガ~やきたて♪」でフランスパン

ホームベーカリーを買いました。「タイガーやきたて」です。

ホームベーカリーで

今日も、焼きました

さかちゃんは、ホームベーカリーで焼いたパンを彼方此方に配っていました。私も週に一度位の割合で頂いていました。焼きたてのパンは、何も付けなくても美味かった。そんなノスタルジアに浸っての衝動買いではありません。
昨年の暮れにリンゴをたくさん頂いたので、リンゴジャムを6~7回作りました。思い通りに仕上がるようになると、"自家製のパンで!"との思いが沸々と湧いてきたという次第です。

全自動とは言え、ホームベーカリーも奥が深いです。届いて廿日ほどですが、15個焼きました。真冬並みの寒さを逆手にとって、凍えるようなキッチン、暖房を効かせた居間と環境を変えたり、水の温度、塩を変えて焼き上がり具合を比べました。そんなトライアルの中で、初めてフランスパンを焼いたときが、一番の勉強になりました。
バン羽セットの図解"パン羽"を付けずに捏ねると、どうなるのかを知ることが出来たのです。 捏ねの行程が終了して、一次発酵の段階で蓋を開けてみました。見た目は、材料をセットした時の状態です。このまま続行しても良い結果は望むべくもありません。決断は、作業を中止し"パン羽"を付けてリトライ、です。小山に盛った粉の頂上部分に載せたドライイーストを濡らさぬようにお玉で粉ごと掬い取り、残りの材料をボールに空け、"パン羽"をセットしました。ボールの材料を見ると、"パン羽"をセットする回転軸の周りの粉だけが、申し訳程度に捏ねられています。このまま戻して良いものか、潔くギブアップして廃棄するか!再度の決断を迫られました。とかく往生際の悪い私は、取り敢えず材料をパンケースに戻しました。こんなことで上手く捏ねられるの不安です。
エーイ儘よ。徐にパンケースに手を突っ込み、材料を掴み捏ねました。捏ねながら、「ああ、ボールの中で捏ねれば良かったなあ~」の恨み節。危機管理力の欠しさを思い知った瞬間です。
粉全体に水分が回ったと思しき所で、パンケースをベーカリーにセットし、改めて仕切り直しです。もう怖いものはありません。駄目で元々。行程のポイント、ポイントで蓋を少し開けて中を覗き見しました。何であれ、覗き見はドキドキしますね。
神仏のご加護でしょうか。それなりの焼き上がり。噛み応えのある、外皮がパリッとした、紛れもないフランスパンに焼きあがっていました。美味い!!

今日も、焼きました。この時期は膨らみが少なめなので、邪道ですが、砂糖を少し加えたフランスパンです。

パンの焼き上がり

釜延びが良すぎ?

粗熱を取る

粗熱を取るには、これ!

パンの切り口

上の方が柔らか過ぎかも


いい具合に膨らんだのですが、ちょっと食パン風でしょうか。まだ、まだ楽しめそうです。いい買い物でした。

2014-03-12(水) |  Neutral |  コメント(0)  | Top▲

CSS事始め 2

前回の例題で段落pを見みしましょう。例題では形式的に段落を二つに分けました。ブラウザで開いた結果は、クリックで表示されます。

<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>

3行目と7行目がpの開始タグです。指示の内容(属性値)は、要素pの横幅(width)を600pxにしてください、だけですが、段落と段落の間が空いています。
CSSペインimgその辺りも含めて、インスペクタを見てみましょう。図は、CSSペインのボックスモデルです。
中央のcontents areaが本文を表示する要素pの領域のイメージです。中の数式600×136は、領域をの幅(width)×高さ(height)をピクセル(px)の量で表わしたものです。widthが、指定した600pxになっています。heightは指示していませんので、表示する本文の行数に応じて(autoで)ブラウザが判断しました。試しに、heightのプロパティ値を多めの210pxや半分の70pxしてブラウザで開いて見てください。heightを指定しなかった理由が理解して頂けると思います。

CSSでは、スタイルを適用する対象を基本的にボックスで扱います。ボックスモデルを見るとmarginやpaddingなど、全てを指定しなければならないような錯覚に陥りそうですが、必要最小限の指定に止めるのが肝要です。何事も、指示は的確、簡潔にですね。
見出し、段落、改行のタグだけでも、それらしい体裁になりました。それは、ブラウザが備えている、タグのスタイルが適用されたからです。たとえば、maginの初期値は0ですがインスペクタで見ると上下に16x取られているのが分かります。16pxと言うのは、段落に表示されるfont(文字)のサイズです。これは、段落間に一行の空きを作ためにブラウザが指定したものです。。必要に応じてmrginだけを指定すれば良いわけです。

"続きを読む"で h1 のmarginを検証します。

2014-03-09(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 1

"HTML事始め 2"で見出しと本文を分け、改行させるをタグを付けました。
今回は、少し見栄えを整えましょう。見出し文字の体裁と、本文の幅をブラウザ一杯から一定の幅に固定します。見栄えを整えるHTMLタグもありますが、主流はCSS(スタイルシート)ですのでこれを使います。下記のように、開始タグ内の要素名に続けて指示を記入します。要素名と指示(属性と言います)は半角スペースで区切ります。

<h1 style="font: bold larger serif;">
うつぶしの森 </h1>
<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>

エディタimg HTML書類を書くには、要素名や属性値などが色分けで表示されるテキストエディタが便利です。私は、フリーソフトの「TeraPad」を愛用しています。(左図)
では、見出し(h1)のスタイルから見て行きましょう。style=に続けて「"」で括られているのが見栄えの指示内容で、属性値と言います。ちなみにstyleが属性名です。
文字(font)を、太字(bold)で一段階大きく(larger)して明朝体(serif)で表示してください、とブラウザに指示をしています。
ブラウザimg 太くとか、一段階大きくとは何を基準にしているのでしょう?スタイルの指定をしていなくても、本文より太く、大きかったですよね。実は、最初に拡張子をhtmlに変えただけだ作ったホームページの文字が基準になっているのです。そしてそれは、ブラウザによって設けられた基準です。、また、OSやモニターの解像度よって表示に違いがありますが、細かいことを気にすると身体に障りますので大雑把に扱いましょう。
メジャーなブラウザでは、太さ400、大きさ16pxのゴチック体です。単位については、追々馴れて行きましょう。
指定したスタイルは、太さboldは700、大きさlargerは約12%増の18px、書体serifは明朝体です。スタイルを指定していない(以下、初期値と呼びます)h1は、太さ700(bold)、大きさ32px(200%大)のゴチック体(sans-serif)です。
h1~h6の初期値は、"続きを読む"でどうぞ。

2014-03-07(金) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 2

前回、テキストファイル(メモ帳書類)の拡張子を変えただけけでHTMLファイルを作って、Webブラウザで表示させました。ブラウザでは、改行が無視されてしまって読みづらいですね。これでは記事がどんなに優れていても最後まで読んで頂けないかもしれません。少し体裁を整えましょう。

まず、見出しと本文の区別し、改行もされるように"タグ"(印)を付けます。以下を参考にしてください。

<h1>うつぶしの森 </h1>
<p>延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…</p>

タグは、<h1>のように要素名(この場合はh1)を< >で括ります。
要素名h1は、headings level 1を意味しています。levelはh1~h6まで6段階用意されていますので章立てに合わせて使い分けます。要素名pはparagraph(段落)、要素名brはbreakの意味です。
タグは、要素の先頭と後尾に付けて要素を括ります。先頭に付けるタグを「開始タグ」、後尾に付けるのを「終了タグ」呼び、一対で使います。「終了タグ」は、要素名の前に/を付けて< >で括ります。また、改行を指示するbrのように「終了タグ」の無い要素もあります。
ブラウザimg では、タグを付けてブラウザで開いてみます。
最初に用意した原稿の体裁に近づきましたね。見出しの文字が大きく、太く表示されて、より目立っています。また、見出しと本文の間が広く取られて文書の構造化もアップしました。
これなら、記事の内容が充実していれば最後まで読みたくなります。体裁も大事ですが、記事の内容が第一だと思います。
こう結んでしまうと「これで講座は終わりか?」と思われそうですが、私の記事は内容が稚拙なので、言わば「スッピンは見せられないので、メイクで勝負」とばかりにメイクアップの技術(スタイルシート)に頼らなければなりません。
次回は、「CSS事始め」にしましょう。

※タグを付けたメモ帳のキャプチャー画像です。

2014-03-02(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 1

情弱な私が、ちょっと知ったか振りをしてHTML講座の真似事をしましょう。
ホームページを作る目的は様々でしょうが、目指すところは一つです。インターネット上に記事(論文、広告、日記など)を投稿・公開すること。その公開された記事を読むには、IEやFirefoxなどのWebブラウザが使われます。そのブラウザで開くことができるのがHTML形式のファイルです。メモ帳(Windows付属のテキストエディタ)などで書いた文書(テキストファイル)にHTMLタグという印を付けた(Markup)ものです。

ともあれ、始めましょう。教材に拙稿の一部を使います。原稿を、テイストエディタ(以後、メモ帳)で開いて、そのまま"名前を付けて保存"をします。保存するときに、"ファイルの種類"を"全てのファイル(*.*)"にして、ファイル名の後ろの「.txt」を「.html」にかえます。
メモ帳imgメモ帳img
これで世界一シンプルなホームページ、HTMLファイルの完成です。
「タグ付けしてねえじゃん(-_-#)」ですって。
まあ、まあ。先ずは、出来たHtmlファイルをブラウザで開いてみてください。
ブラウザimg 開けたでしょう。
立派ではありませんが、ブラウザで表示されたということはホームページに成っているということです。ファイル名を"かな漢字"から"英数"に変えてインターネット上にアップロードすれば、世界中のインターネット利用者が読むことができるのです。
実際に、この教材をファイル名"ustubush_mori.html"としてFC2ブログにアップロードしてあります。クリックしてみてください。
なぜ、ファイル名の尻尾(拡張子)を変えただけでホームページになったのでしょう。
ホームページの作り方で最初に習うのは、<html>,<head>,<body>でファイルを構造化することでしょう。これらのタグを付けないのに、なぜ?
実は、これらのタグは、開始タグ・終了タグとも省略が可能となっているのです。ブラウザが構造を予測して開いてくれるのです。(どう予測したのかは"続きを読む"を)

2014-03-01(土) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。