『パンダ・アップデート』って何?

パンダがアップデートしてユーカリも食べるようになったとか、目からビームが出るようになったとか、そういうのではなく。(ちょっと見てみたいけどw)
今回の「パンダ」は、笹が主食の白黒の生き物のことではございません。

巷で話題になってる(らしい)Google検索エンジンのアルゴリズム改変
⇒ 通称【パンダ・アップデート】
興味ある内容だったので、忘れる前にメモ!

※色々なサイト様の意見を個人的な視点でまとめたメモ記事です。
内容が間違ってるなど、お気づきの点があればご指摘いただけると幸いです!!
Continue reading »

写真撮ってもらいました。(北九州エリア)

昔、カメラやってた父。(風景を良く撮ってた模様)
持ってるけどほぼ「宝の持ち腐れ」と化してる私の「デジタル一眼レフ」を今後活かすため、撮影に繰り出してきました!

☆カメラ:LUMIX GF1
☆レンズ:LUMIX G VARIO 14-45mm(たぶん…)

※今回は父も数十年ぶりにカメラを触った上にデジタル一眼レフは初めて、しかも持ち主(私)がさっぱりわかってないので細かい設定ができない、レンズフードとか無いけど!という「よく写真撮ろうと思ったね…」的なハンデだらけの撮影会でした…。

撮影場所は地元民ならわかる場所。
さて、ドコでしょう?w
Continue reading »

ボックスの概念

CSSによるデザインの基本は「ボックス」。
Webページでは、HTMLタグで囲んだ部分が1つの「ボックス」として扱われる。
CSSではこの「ボックス」に対してスタイルを指定する。

ボックスは次の4つの領域から構成される。

<内容>
要素に含まれる内容/width(幅)とheight(高さ)で表示領域を指定

<padding : パディング>
内容とボーダーとの間のスペース

<border : ボーダー>
パディングの周囲にある枠線(ボックスの背景はborderの領域まで)

<margin : マージン>
要素のボーダーと他の要素の間の余白
(背景は常に透明のため、親要素の背景に依存)

★ボックスのサイズ
ボックスとして実際にブラウザに表示される領域は、『width+padding+border』を合計したサイズ

例)480px + 50px*2 + 10px*2 = 600px(ボックスの表示領域)
★CSSの記述

#contents{
width:600px;
background-color:#ccc;
padding:50px;
border:solid #f0010px;
margin:30px;
}

★HTMLの記述

<div id="contents">
<h1>ボックス</h1>
<h2>ボックスの基本</h2>
<p>CSSによるデザインの基本は、「ボックス」です。
Webページでは、HTMLタグで囲んだ部分が1つの「ボックス」として扱われます。
CSSではこの「ボックス」に対してスタイルを指定することになります。</p>
<p>ボックスは次の4つの部分から構成されています。</p>
<ul>
<li>内容 (width/height:幅と高さ)</li>
<li>パディング padding(内容と枠線の間の余白)</li>
<li>ボーダー border(枠線)</li>
<li>マージン margin(枠線の外側の余白)</li>
</ul>
<h2>ボックスのサイズ</h2>
<p>ボックスとして実際にブラウザに表示される領域は、
『width+padding+border』を合計したサイズになります。</p>
</div>

★表示例はこちら
ボックスの概念

ブロックレベル要素とインライン要素

★ブロックレベル要素
ブロックレベル要素は見出し、段落など文書を構成する基本要素。
CSSで何も指定しない場合は、ブラウザの横幅いっぱいに広がり幅と高さがある。
(要素の前後には自動的に改行)

例)h要素(見出し)、p要素(段落)、ul要素(リスト)

★インライン要素
文章中の一部として扱われる要素。幅と高さを持たない。
行の一部として扱われるので、要素の前後に改行は入らない。
必ずブロックレベル要素に含まれる形式で記述されなければならない。
※bodyタグに直にインライン要素を記述することは不可

例)a要素(リンク)、strong要素(語句の強調)、img要素(画像)
※img要素もp要素でマークアップする

★要素の基本ルール

1. ブロックレベル要素の中に、別のブロックレベル要素やインライン要素を含めることは可

 <div><p>内容</p></div>
<div><img src="nantoka.png"></div>

2. インライン要素の中に、別のインライン要素を含めることは可

<span>内容<img src="nantoka.png"></span>

3. インライン要素の中に、ブロックレベル要素を含めることは不可

<a href=""><h1>見出し</h1></a>

h1,h2などの見出しにリンクを張る場合

<h1><a href="">見出し</a></h1>