KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#1「HTMLの基本文法」

この記事をシェアする

HTML、CSSの総復習中です。

今までなんとなくできていた「HTML」や「CSS」ですが、ポートフォリオを今後作っていく上で、やっぱりフロントエンドの技術は必須になりそうなのでこれを機に総復習していきます。

今日やったこと

基本的なことを実際にやりました。

HTMLだよって宣言の書き方

<!DOCTYPE html>

え?そんなことも知らないのって言われちゃいますが、そうです、知らなかったんです。
なんとなく書いてました。
HTMLファイルには必ず先頭にこれをつける。

WEBページのタイトル設定

<title>デモサイト</title>

WEBページのタイトルの設定。
これが実際にブラウザで開いたときにタブとかで出力されるタイトルに当たる。

見出しの設定

<h1>デモ</h1>

ブログのカスタマイズとかで時々使うやつ。
見出しなので文字か少し大きくなる。

本文の設定

<p>ここには本文を入れる予定</p>

本文の設定はこれだけ。これもブログで使うことあった。

リンクの設定

<a href="https://saruwakakun.com/html-css/basic/html">

リンクを付与したい時に書く。

画像の呼び出し

<img src="/Users/kimurayuta/Dropbox/DesignDemo/pct1.jpg" alt="写真1" width="50%" height="50%"/>

画像の呼び出し。
srcにファイルパスを設定する。
width,heightはピクセルでも設定できるし、%にして割合で設定もできる。
最近は、ブラウザ幅に合わせる仕様が流行っているのでピクセルしてをすることは少ない。

改行

<p>改行<br>テスト</p>

改行を入れたい時はbrを入れる。

グルーピング その1

<p>暖かくて<div>心地よい風が</div>流れてくる。</p>

divでくくるとグルーピングできる。
グルーピングすれば個別にくくった文字列に対してスタイルを付与したりできる。

グルーピング その2

<p>暖かくて<span>心地よい風が</span>流れてくる。</p>

spanでもdivと同じくグルーピングが可能

※divとspanの違い

divだとくくった範囲で改行が入る

<divの場合>
心地よい風が
流れてくる。

<spanの場合>
心地よい風が流れてくる。

最終的な今日の進捗

f:id:samuraikid520:20180125235902p:plain
f:id:samuraikid520:20180125235906p:plain

参考にしたサイト

saruwakakun.com

今回は上記のサイトのみ参考にして作成しました。
ドットインストールよりもわかりやすいかも。。。

まとめ

明日はCSSを反映してデザインをしていきます。