CSS入門：divタグ、左右均等のmargin、サンプルページの総仕上げ
先日からやっているHTMLとCSSで作っているページを仕上げていこうと思います！
ドットインストールの「CSS入門」、続きから。
#13
完成版ではゲーム紹介の画像と文章のスペースの幅が揃っており、なおかつ中央ぞろいになっている。
作品紹介の領域を透明な枠で囲み、そこに幅などを設定していく。
index.html側に<div> </div>というタグを使って、ゲーム紹介のsectionをその中に入れていく。今回は<div class="works"> </div>と書き、このdivタグに対してworksというクラスをつける。
styles.css側でwidthを画像と同じ400pxとすると…
.works{
width : 400px;
}
幅は揃ったが、全体が左揃えになってしまっている。
cssではsectionの設定を以下のようにしていたが、これはdivに適用されない。
section{
text-align : center;
}
あくまでもsectionだけの話だからである。
とりあえず、お手本と同じようにh1とpは左揃えにしたいので…
.works h1{
text-align: left;
}.works p{
text-align: left;
}
しかし、複数のセレクタに同じ設定をするには以下のように書くことができる。
.works h1,
.works p{
text-align: left;
}
コードはなるべくシンプルに、これ基本なり。そうすると以下のようになる。
div全体を中央寄せにする手法については別の機会に。
#14
さっそくdivを中央寄せにする話です(もっと後かと思ってた)。
中央寄せ=左右のmarginを均等にするという手法をよく使うとのこと。
試しにworksクラスを以下のように書く(太字をつけ足した)。
.works{
width: 400px;
margin-left:auto;
}
すると…
これだと余白を左に全振りするということになるので、右寄せになる。やりすぎ。
ということは、
.works{
width: 400px;
margin-left:auto;
margin-right: auto;
}
とすれば、余白を左右均等に割り振ることができるのでは…
ほらこの通り。
また、div(works)の上下に余白が少しほしいのでそちらも設定する。
.works{
width: 400px;
/* margin-left:auto;
margin-right: auto; */
margin 60px auto;
}
※paddingと同じような書き方もできるので、それと同じように書く。
作品紹介欄について、作品と作品の間にも余白が欲しい。
ということで、以下のように書く。
.works > section{
margin-bottom: 40px;
}
「.works h1」と「.works > section」の違いを説明できる?
worksとフッターの間について、今回は境目に薄く線を入れたいので以下のように書く(太字部分を加筆)。
.works{
width: 400px;
margin: 60px auto;
border-bottom: 1px solid gray;
}
すると、worksとフッターの境目にグレーの線が入ったことが分かる。
#15
フッターのリンクを仕上げていく。
とりあえず表示をbody部と揃えたいので以下のように書く。
footer{
width: 400px;
margin: 0 auto;
}
下にも余白が欲しい…。marginもpaddingもそうだが、3つ目の引数を渡すとそれが下方向の値となる。なので以下のように修正。
footer{
width: 400px;
margin: 0 auto 60px;
}
このmarginの設定ならば「上方向に0、左右はauto、下方向に60px」となる。
次にリンク部にとりかかる。
ヘッダーのリンクの設定を流用するので、header liやheader ulの設定をコピペしてheaderをfooterに書き換える。今回はテキストではなく画像をクリックすることで別ページへ移動するので、font-sizeやtext-decorationは消しておく。
hoverのときには画像の透明度を変えたいので、opacityというプロパティを操作する。
これらの設定をまとめて書くと以下のようになる。
footer ul {
margin: 0;
list-style-type: none;
padding-left: 0;
}footer li {
display: inline-block;
padding: 4px 8px;
}footer li > a:hover {
opacity: 0.6;
}
これらを適用すると以下のようになる。
わかりづらいんだけど、吹き出しマークにマウスのポインタがある状態。
#16
フッターのコピーライトの文字についていじっていく。
とりあえずは文字の色を薄く、少し小さめに。そして右寄せにしたいので…
footer p{
color:lightgray;
font-size: 14px;
text-align:right;
}
その結果がこれ。
おしゃれ。
しかし、お手本ではリンクの画像と上が揃っていた(リンク画像の行の右端にコピーライトが来るような形)。
今回はul要素にfloatというプロパティを設定する。仕事柄、float=倍精度浮動小数点数のイメージがある…。
floatとは、「通常の要素よりも浮かせて配置する」というイメージ。
footer ulのセレクタについて、以下のように加筆(太字部分)。
footer ul {
margin: 0;
list-style-type: none;
padding-left: 0;
float: left;
}
こうすることでfooter ulは左側に浮いた状態(footrt ulがなかったもののように扱われる)となり、それ以降の要素はfooter ulのスペースを空けずに詰めて配置されるようになる。
floatはもっと奥が深いらしい…。
#17
いよいよ最終回。
いままでのレッスンでサイトそのものはほぼ完成しているが、まだ手を付けていない箇所がある。
その1つがヘッダーのリンク部分。自分が現在どこのページにいるかをわかりやすくするため、「HOME」や「ABOUT」に下線をつけていく。
index.htmlで今いるページ(index.htmlならHOME)のところに識別子をつける(今回はcurrentとする)。
<header>
<nav>
<ul>
<li class="current">
<a href="index.html">
HOME
</a>
</li>
<li>
<a href="about.html">
ABOUT
</a>
</li>
</ul>
</nav>
</header>
styles.cssには以下のように設定。
.current{
border-bottom: 4px solid royalblue;
}
すると以下のようになる。
おしゃれ！！
これでindex.htmlは完成かと思われます。
index.htmlだけは完成かと思われます。忘れていないか、about.htmlさんを…。
彼にはいろいろやってあげないといけない。復習がてらやっていこう。
01.styles.cssを読み込むようにする
cssを読み込むための以下のコードをheadに書く。
02.ヘッダーの「ABOUT」に下線をつける
styles.cssを利用するので、これはABOUTのところに「current」というクラスをつけてあげればいいのでは…?(太字部分を加筆)
<li class="current">
<a href="about.html">
ABOUT
</a>
</li>
03.背景画像
CSSで背景画像を設定しているので、html側でヘッダー画像を示すために書いていた部分は消す。
04.アイコンにクラスをつける
以下のように加筆すればOK(太字部分)。
<section>
<img src="img/taro.png" width="140" height="140"
alt="太郎のアイコン"
class="icon">
<h1>山田太郎</h1>
<p>
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
</p>
</section>
復習となるところは以上。
この状態でAboutページは以下のようになる。
ほぼほぼ完成だが、「山田太郎の紹介です。」が延々と続く部分がやたらと横に長い。
そこで、about.htmlでその部分を作っているsectionにaboutというクラスをつけ、styles.cssでまたまた設定をしていく。
about.html側は以下のように加筆(太字部分)。
<section class="about">
<img src="img/taro.png" width="140" height="140"
alt="太郎のアイコン"
class="icon">
<h1>山田太郎</h1>
<p>
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
</p>
</section>
styles.css側は以下の設定を追加。
.about {
width: 400px;
margin: 0 auto 60px;
}.about p {
text-align: left;
}
すると以下のようになる。
これでレッスン内で扱ったすべてのページが完成です！！！！
長いような短いような、でも楽しかった。
以下は完成したページのスクショになります。
ジャンルや言語は違えどこれを仕事にしているし、最近は仕事もあまりよろしくない状況なので忘れがちなんだけど、プログラミングって楽しい、ものを作るのって楽しい。
そう思えた数日間のページ制作でした。
ヘッダーとフッターの表示固定(スクロールしても画面の上下に絶対ヘッダーやフッターがある)とかもできそうと思って検索してみたら、今回やったCSSとはだいぶ違う書き方をしているページばっかりだったのでPHPと組み合わせた時にチャレンジしてみようと思います。
それでは、これにてHTMLとCSSの勉強はひと段落！お疲れ様でした！
CSS入門：背景に画像、marginの相殺、識別子
会社で嫌なことがあった時、「早く帰って家でコード書きたい…」と思うようになったので立派なプログラマになっている感が強い。
今夜もドットインストールの「CSS入門」を進めていきます。
#8
今まで書いてきたセレクタの書き方だと、文書全体のulやaのプロパティが変わってしまう。#7で書いたヘッダーのulやliに限定したいので、以下のように書き換え。
header ul {
margin: 0;
list-style-type: none;
padding-left: 0;
}
こうすることで、ヘッダー内にあるすべてのul要素にのみ設定が適用される。
header(半角スペース)ulと書いている。間違えやすいらしいので注意。
もっと限定したい場合は以下のように書く。
header li > a {
text-decoration: none;
color: inherit;
}
これで、ヘッダー内にあるすべてのli要素の直下にあるa要素という書き方になる。
#9
背景画像を設定していく。
ヘッダーに現在貼り付けている画像を、ヘッダーの背景画像として使用する。
index.htmlのimgタグでheader.pngを使っていたが、今回からはいらなくなるのでコメントアウト。今までありがとう。
styles.cssのheaderセレクタに、以下のように書いていく(太字を追加した)。
header {
/*background-color: pink; 今回から使わないのでコメントアウト*/
text-align: right;
padding: 10px;
background-image: url(../img/header.png);
height: 240px;
background-size: cover;
background-position: 50% 50%;
margin-bottom: 60px;
}
index.htmlで画像を設定していたが、今回からはこちらで背景画像として設定する。
そのための設定がbackground-imageである。画像の場所としてURLを指定している。
ここで出てくる「..」はCSSファイルがある場所の1つ上の階層であることを示す。なので、今回は「MyPortfolio/img/header.png」と同等の意味を持っている。
heightでヘッダー全体の高さを指定。
background-sizeでcoverと指定することにより、背景画像の縦横比をそのままに最大限大きく表示することができる。
background-positionの設定は、背景画像のどこを起点にサイズを変更するのかを設定するための者。初期だと画像の一番左上となっているので、ブラウザのサイズを変えたらそこを起点に背景画像のサイズが変わってしまう。
background-position: (水平方向に)50% (垂直方向に)50%;と設定することで画像の真ん中を指定することになり、ブラウザのサイズを変えても表示がおかしくなることはない。
margin-bottomはbody部との間隔をとるために記載。
#10
「marginの相殺について」というなんだか難しい名前の章。
お手本ではセクション部が中央揃いになっているので、以下のように書く。
section{
text-align: center;
}
お手本ではh1部分が太字ではないが、作成中のページでは太字になっている。
これをお手本にそろえるには以下のように書く。
section h1{
font-weight: normal;
}
これでsection内にあるh1タグの文字が細くなった。
次に「山田太郎」とその下の紹介文「HTML勉強中です」の間隔を調整したいが、これらの要素はmarginがかぶっている(山田太郎の下のmarginとHTML勉強中ですの上のmargin)。これはmarginの相殺という現象で、上下方向に対してのみ発生する。
marginが隣接した場合、幅の細い方が幅の広い方に打ち消されて幅の広い方が生き残るようになっている。この現象に気を付けながら間隔を調整していく必要がある。
よって、h1とpの設定は以下のようになる。
section h1{
font-weight: normal;
margin-bottom: 8px;
}section p{
margin-top:0;
font-size: 14px;
}
#11
今は四角をペタッと貼り付けたようになっているプロフィール画像を丸い枠の中にはめるようにしたい。
今までのようにsection > imgと指定して書いていくのもアリだが、今回は別の手法である識別子を使っていく。
index.html側のimgタグを以下のように書き換える。
<img src="img/taro.png" width="140" height="140"
alt="太郎のアイコン"
class="icon">
styles.css側には以下のように書く。
.icon{
border-radius: 30px;
}
識別子を表すには、頭に.(ドット)をつける。
imgタグで指定した画像を丸くするにはborder-radiusを使う。
試しに30pxと指定すると…
半径30pxの円で四つ角が丸められ、すこーし丸くなったことが分かる。
この画像は1辺が140pxの正方形なので、border-radiusで70pxと指定すればOK。
また、「1辺の半分」という意味でborder-radius : 50%;と書いてもOK。
#12
先ほど触ったプロフィール画像だが、完成版では白い枠と枠の外に影がついている。
ボーダーの枠線、枠線の太さ、ボーダーの線を指定するには、先ほど書いた.iconに以下のようにつけ足す(太字)。
.icon{
border-radius: 50%;
border-color: pink;
border-width: 5px;
border-style:solid;
}
また、今回太字で書いたところは一度に設定することもできる。
border: 5px solid pink;
順番はバラバラで大丈夫。
あとは影をつければいいので、box-shadowを使う。
与える値がややこしいのでまとめると…
box-shadow: (x方向のずれ) (y方向のずれ) (ぼかし具合) (色) ;
となる。試しにbox-shadow: 10px 10px 5px black; とすると…
やりすぎ感が強い。
縦横のずれはなくていいので、box-shadow: 0 0 5px gray;とすると…
オシャレ。枠線の色を白にしたのでお手本通りになりました。
今夜はここまで。
このペースでいけば明日にはCSS入門が終わりそう。
会社はつらいけど、働かなければ生き残れない。頑張るぞい。
CSS入門：文字色とフォント、余白やスタイリング、疑似クラス
デッドプール2を観てきました。宣伝通りのR-15ファミリー映画。
吹き替えで観たので、また時間が取れたら字幕で観たい。
前作は字幕と吹き替えのニュアンスが微妙に違っていて楽しかったので。
今日もCSS。やるぞ。ドットインストール「CSS入門」の続き。
#4
前回は「山田太郎」だけの文字色を変えたが、文書全体の文字色を統一したい。
そんなときはbodyタグに対して文字色を設定するとよい。
body
{
color : #333
}
bodyタグ全体のフォントも指定。
font-family: verdana,sans-serif;
と書くことで、「vardataフォントを使う、それがなければsans-serifフォントを使う」という意味になる。
次にヘッダーの背景色を設定。
header
{
background-color :
}
ここで ヘッダー部分をデベロッパーツールで確認してみる。
Computedタグを確認すると、
margin>border>padding>(ヘッダー本体)という構成になっていることが分かる。
このような設計はCSSのボックスモデルと呼ばれており、これらの要素をいじることで見た目を変えることができる。
#5
現在作成しているページはヘッダーの上に余白が存在する。
これはbodyのmarginの上下左右に数ピクセルの余白が設定されているからである。
ということで、bodyのプロパティを以下のように設定。
body{
color: #333;
font-family: verdana,sans-serif;
margin-top: 0px;
margin-bottom: : 0px;
margin-left: : 0px;
margin-right: : 0px;
}
なお、今回はmargin-top～margin-rightまでをすべて0ピクセルと設定したので
margin : 0px;
と略して書くことも可能。0の場合は単位のpxも省略できるので、最終的には
margin : 0;
としておく。
この状態で保存して再読み込みすると、左右の余白は消えたがページ上部の余白が消えていないことが分かる。デベロッパーツールで調べてみると、今回はヘッダーに使っているulタグに余白がついており、そのせいであることが分かる。ということで、
ul
{
margin : 0;
}
と設定。するとページ上部の余白が消えた。
#6
次はヘッダーに使っている「HOME」「ABOUT」を完成版のようにおしゃれにしていく。そのために、リストのスタイリングを行う。
まず、箇条書きになっているので項目の頭についている点がいらない。
list-type-styleプロパティをnoneとすれば点は消える。
次に、このリストの左側に余白があるので消したい。
デベロッパーツールで確認したところ、paddingで左に余白を持っているようだ。
padding-leftプロパティを設定し、余白を消してしまおう。
これらをまとめるとulのセレクタは以下のようになる。
ul{
margin: 0;
list-style-type: none;padding-left : 0;
}
今はリストが縦に並んでいるので、これを横並びにする。
左から順に横並びにしたいので、displayプロパティをinline-blockとする。
要素の間が詰まりすぎているので、paddingプロパティを設定していく。
paddingの上下(topとbottom)、左右(leftとright)が同じ値の場合はまとめて
padding : 4px 8px;
と書くこともできるので覚えておこう。
また、文字の大きさも調整する必要がある。
今回やったことをまとめると以下のようなコードになる。
li{
display: inline-block;
padding: 4px 8px;
font-size: 12px;
}
#7
完成形の「HOME」「ABOUT」と比較すると、現在のそれらにはリンクの下線がついている。この設定についてはaタグのプロパティをいじることで変更できる。
今回はtext-decorationプロパティをnoneとする。
リンクの文字色が今は紫となっており、これはbodyで設定した文字色ではない。
タグによってはbodyの設定を引き継ぐもの/引き継がないものがあるためである。
強制的に親要素の設定を引き継ぎたい場合は、プロパティにinheritと書けばよい。
完成版ではリンクにマウスカーソルを乗せると文字色が変わる。
これを実現するには疑似クラス(ある要素が特定の状態にあることを表現するためのセレクタ)を使う。
「a要素にマウスカーソルが乗った時」を表現するにはa : hoverと書き、そこに文字色を設定していく。
さらに、リストを右寄せにする。これは親要素であるheaderで設定し、text-alignプロパティを変更する。
今回追加/変更したコードをまとめると以下のようになる。
header{
background-color: pink;
text-align: right;
padding: 10px;
}a{
text-decoration: none;
color:inherit;
}
a:hover{
color:royalblue;
}
疑似クラスはマウスカーソルが乗っているときの他にもたくさんありそう。
今夜はここまで。明日からまた仕事だ～～
CSS入門：色の指定とGoogleChromeデベロッパーツール
梅雨とは思えないいい天気でした。
今日からCSSを書いていきます。
CSSとは…
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
(一部抜粋)
昨日まで触っていたHTMLが骨組みなら、CSSで肉付けしていくような感じでしょうか。外面というかなんというか…。
ドットインストールの「CSS入門」で、昨日までのHTML入門で作成したファイルにCSSをつけ足していきます。
#1
昨日まで作っていたhtmlファイルのheadタグ内に<style></style>タグを書き、その中にCSSを書いていく。
h1タグの中に「山田太郎」と名前を書いていたが、この文字色を赤にするには以下のように書く。
<head>
<meta charset="utf-8">
<title>あーるのポートフォリオサイト</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="あーるのポートフォリオサイトです。">
<style>
h1{
color: red
}
</style>
</head>
このように、CSSでは「どこに」「どのような」スタイルを当てるかを書いていく。
「どこに」を指定する部分をセレクタ、「どのように」を指定する部分をプロパティと呼ぶ。
styleタグの中に長々と書くと訳が分からなくなるので、別ファイルにこれを保存することにする。
今回はMyportfolio\CSS\styles.cssというファイルを作成。
html側から呼び出すので、<link rel="stylesheet" href="css/styles.css">と記述。
先ほどのstyleタグは使わないので、[CTRL]+[/]でコメントアウト。
styles.cssの中には先ほど書いたコードのセレクタとプロパティをコピー。
両方を保存すればhtmlからCSSを呼ぶようになっている。
#2
chromeで右上のツール>その他のツール>デベロッパーツール(ショートカット：[CTRL]+[Shift]+[I])を選択すればコードがどのように表示されているかを見ることができる。今回の学習ではElementsパネルを使用。
#1で書いたCSSについて、「山田太郎」の部分を表示すると以下のようになる。
右上に「styles.css:1」とある。styles.cssの1行目から取得してるよ！ということ。
また、その下には「user agent stylesheet」とある。これはブラウザが標準で設定しているCSSになる。
#3
上で色の指定を行ったが、色を指定する書き方は他にもある。
h1
{
color : red; →主要な色は定義されているので、redとかblackとかでもOK
color : rgb(0,255,0); →RGBで指定することもできる。
color : #0000ff → RGB値を16進数で表したもの
color : #00f → R、G、Bで同じ記号をそれぞれ使っている場合は略式の書き方でOK
}
なお、同じプロパティだと下に書かれているものが優先される(この例だと#00fを表示する)。今回はcolor:#333を使用。
なお、CSSでもコメントアウトが使える。コメントアウトする際は/* */と書き、/*と*/で挟まれた部分がコメントとして扱われる(Atomのショートカットキーはhtmlと同じく[CTRL]+[/])。
今日は片頭痛がするのでここまで。夕方から痛いんだけどなんでだ…。
HTML入門：bodyタグの中身の書き方
平成最後の6月、まずはマリオテニス体験会をしてました。
テニスゲームの基礎が分かっていなかったり操作ミスが多かったりでなかなか気持ちよく楽しめないなぁというのが本音。製品版どうすっかな…。
今夜もドットインストール、HTML入門の続き。
#8
bodyタグの中身を触っていく。
あらかじめ用意していたヘッダー画像をimgタグで貼り付け。
見出しには<h1>や<h2>タグを使うが、重要度に応じて数字を変えていく。
#9
フッターに用意していた画像(メール、ブログ、写真へのリンク用)とコピーライトを作成。
#10
メモ書き(コメントタグ)には<!-- -->を使い、<!-- メモ書き -->という風に使う。
chromeの右クリック>ページのソースを表示で普通に見えてしまうので、個人情報などなどはやめておくこと。
#11
<body>タグ内でヘッダー要素として扱うには、<header></header>タグを使う。
headタグは文書全体に対する情報を入れるタグ、headerタグは文書内でヘッダー要素として扱うためのタグなので混同しないこと。
同じくフッター要素として扱うには<footer></footer>タグを使う。
本文(body)に対するタグはないが、汎用的に<section></section>タグを使う。
sectionの中にsectionタグを書くという使い方も可能。
<h1>や<h2>という見出しタグだが、セクション内での相対的な順位でOK。
(別のセクションであれば、同じ文書でh1が複数存在する場合もある)
また、文書のナビゲーションには<nav></nav>タグを使う。
#12
htmlではリストを表現するためのタグが2種類ある。
<ol>(Orderd List、連番付きリスト)と<ul>(Unorderd List、箇条書きリスト)である。
今回のレッスンではulを使用。
リストに入る要素には<li>(List Item)タグをつける。
今回はヘッダーとフッターにそれぞれリストとなる要素があるので、それぞれにolタグをつけていく。
#13
外部サイトへのリンクをつけていく。
<a></a>タグを使い、属性を下記のようにつけていく。
<a href="(外部URL)"> </a>
しかし、これだと今のタブで指定したURLを表示する。
別タブで開く場合は、<a href="(外部URL)" target="_blank"> </a>とする。
クリックしてメールを送るようにする場合は以下のようにする。
<a href="mailto:(送り先アドレス)"> </a>
ターゲット属性の付加も可能。
#14
<a>タグにhtmlのファイル名を書けばそこへのリンクも可能。
#15
HTMLの仕様は下記のサイトで詳しく学べる。
HTML要素リファレンスというページには、これまで学んだものやその他のタグが一覧で載っている。
各タグの説明ページにある「許可された内容」について、これに入っているタグを入れ込みで書くことができる。
例：<head>タグの「許可された内容」には<meta>や<title>がある。
今回作成したページは完成版として例で示されたものには見た目の面でまだまだ程遠い。
見た目を整えるにはCSSのファイルを作成する必要がある。
これでHTML入門は終了！
2日に分けてHTMLについて勉強しました。
多岐にわたるタグで少し混乱しそうなところもありますが、今回作成したhtmlファイルを見直したりhtmlのリファレンスを読んだりすれば大丈夫かと思います。
※山田太郎さんではありませんが、レッスンの例に従ってこのようにしました。
明日からはCSSの勉強でこのページをもっと見やすくしていきます！
HTML入門：見出し、文章、画像、文書情報のタグ
今日からHTMLの勉強を始めます。
そもそもHTMLとは。このページから引用すると…
ハイパーテキスト・マークアップ・ランゲージ
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
僕も私もいつも見ているあんなページやこんなページを作っている言語。
例によってドットインストールくんに教わっていきます。
HTML入門(全15回)
https://dotinstall.com/lessons/basic_html_v4
※ドットインストールでは事前に以下の学習を済ませるといいそうです。
HTML/CSSの学習環境を整えよう [Windows編 or Mac編] (全4回)
https://dotinstall.com/lessons/basic_pcsetup_win
Mac編
https://dotinstall.com/lessons/basic_pcsetup_mac
#1～#2
Atomでhtmlファイルを編集する方法。
htmlモードにすると予測変換的にタグが書けるので超便利。
#3
タグを使う。以下は一例。
<h1>ああああ</h1> 見出し
<p>いいいい</p> 文章(パラグラフ)
頭の<h1>を開始タグ、最後の</h1>を終了タグ、テキストを開始/終了タグで囲んで意味づけすることをマークアップという。
#4
画像を追加…<img> ※このタグはテキストを囲まないので終了タグがないよ
<img src="(ファイルのパス)">
ファイルのパスはindex.html(現在表示しているページ)から見たときでいい。
1つ下の階層だったら<img src="img/aaa.png">となる。
フォルダの区切りにはスラッシュを使うので注意。
画像サイズを調整するときは<img src="img/aaa.png" width="140" height="140">のように書けばよい。
また、今回書いたsrc="img/aaa.png"やwidth="140"などのことをタグの属性情報という。
<img>タグにはaltという属性も付与できる。ページの表示中などに表示される説明文が設定できるよ！！
#5
タグや属性には大文字・小文字の区別はない。ただし全角・半角は影響するので気をつけろ。特に全角スペース、おめーはダメだ。
#6
「これはhtmlで書かれていますよ」と宣言する必要がある。
そのためには文書の頭に<!DOCTYPE html>とつける。
慣習的にDOCTYPEは大文字だそうな。
どこからどこまでがhtml文書であるかを示すためには、
<html> </html>のタグを使う。
これは日本語のページだぜ！と示すときは<html lang="ja"> </html>と書く。
ヘッダであることを示すには<head> </head>、
本文であることを示すには<body> </body>とする。
#1～#6までのレッスンでは、
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body><img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>HTML勉強中です</p>
</body>
</html>
という感じになっている。
#7
文書に関する情報を設定していく。
今回はheadタグで下記のようにマークアップする。
<meta charset="utf-8">
これでPCが使用する文字コードをUTF-8に指定している。UTF-8が主流らしい。
次は文書のタイトル。
<title> あーるのお勉強ページ </title>
これでchromeのタブに表示される名前が「あーるのお勉強ページ」になる。
また、その名前の左に表示されるアイコンも以下のタグで設定できる。
<link rel="icon" href="(icoファイルのパス)"> ※終了タグなし
icoファイルの作り方は特殊らしいので、暇なときに見てみたい。
文書の説明を加えるには以下のタグ。
<meta name="description" content="あーるのポートフォリオサイトです。">
検索エンジンでの結果に載ったりもするらしいので丁寧に越したことはない。
これで15回中7回が終わったので一度切り上げて続きは明日。
明日はこのレッスンを終了できるようなペースでいきます。金曜だからある程度夜更かしもできるし。
コードとブログを同時に書いているので結構時間がかかる。
明日も仕事と勉強頑張るぞ。
今のところ、このレッスンで作成したindex.htmlは以下の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>あーるのポートフォリオサイト</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="あーるのポートフォリオサイトです。">
</head>
<body>
<img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>HTML勉強中です</p>
</body>
</html>
仮想環境構築③
張り切っていきましょう。
昨日までは仮想環境を構築し、PuTTYで仮想マシンの設定をしたところ。
Vagrant Upで仮想マシンを起動、PuTTYでログインしました。
(ドットインストール ローカル環境の構築[Winows編] #8までの内容)
今日はその続きから。
仮想マシンとファイルを簡単にやり取りするため、ファイル転送ツールであるCyberduckをインストール。
ついでにAtomもインストール。だって動画だと全部Atomでやってるんだもん。
Cyberduckの設定でhome/Vagrantをブックマーク。
Cyberduckを通じてhome/vagrantにphp_lessonsというフォルダを作成してPHPを書いたIndex.phpというファイルを保存。
Index.phpの中身は、
<? php
echo "Hello"
>
だけです。
PuTTYのコマンドでhome/Vagrant/php_lessonsまで移動して
php -S 192.168.33.10:8000
を実行(Sは大文字なので注意。)
すると以下のメッセージ。
PHP 5.6.36 Development Server started at Wed May 30 21:13:05 2018
Listening on http://192.168.33.10:8000
Document root is /home/vagrant/php_lessons
Press Ctrl-C to quit.
起動に成功したのでこのアドレスをブラウザで入力すればアクセスできますよ、という内容。
言われた通り、素直にhttp://192.168.33.10:8000をchromeで入力すると…
このサイトにアクセスできません
192.168.33.10 で接続が拒否されました。
えええ…。
とりあえずvagrant reloadで仮想マシンを再起動。
またPuTTYでログインしなおし、再度php -S 192.168.33.10:8000を実行すると…
Hello
よっしゃ。これでアクセスできました。
続いて学習を中断するときは…
・Cyberduckを閉じる(そのまま×でOK)
・PuTTYで[CTRLキー]＋[Cキー]を同時押し(Webサーバー停止)
・PowerShellを起動。Vagrantで仮想マシンを置いているフォルダまで移動し、vagrant suspendと入力(仮想マシン停止)
・PowerShellをExitで閉じる
この流れを踏む。流れを踏まずにPCの電源を落としてもOKみたいなことを言っていたけど、さすがに不安なので丁寧にやること。
学習を再開するときは…
・PowerShellを起動、仮想マシンのフォルダまで移動してVagrant Up
★仮想マシンの起動/終了をVagrant、仮想マシンの中を触る部分をPuTTYが担当
・Cyberduckを起動(ブックマークに設定を保存しているので利用する)
また、上記のttp://192.168.33.10:8000という形(hは省いた)ではなく普通のアドレスのような形にすることも可能。
・「ファイル名を指定して実行」を立ち上げ、driversと入力。
・エクスプローラーが立ち上がるので、etcフォルダを開く
・hostsというファイルを一度外(デスクトップなど)へコピー
・コピーしたhostsファイルをAtomなどで開き、最後に以下の行を付け加え
192.168.33.10 【任意の文字列(半角英数字の小文字)】
・hostsファイルを保存し、元の位置に戻す。設定が反映される。
※設定をしたPCでのみ有効
例えば、 rdearu.com:8000 と入力すれば上記の192.168.33.10:8000にアクセスしたのと同等の動作をする(最後のポート番号は省略不可)。
これにて仮想環境の構築は終了！！3日もかかってしまった…。
これでドットインストールの「ローカル開発環境の構築(Windows編)」はすべて終了です。お疲れ様でした！
何事もまずは見た目からということで、明日からはHTMLの勉強をしていこうと思っています。
