2018-08-14

flexboxまとめ①

css

floatを使わずにもっと簡単にコンテンツを並べたい
そんな時に便利なのがflexboxです

サンプルコード

<ul class="container">
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

.container{
          display : flex;
}

本来なら縦並びになるリストも
これだけで横並びになります。

左右の位置揃えにはjustify-contentプロパティ

値には以下のようなものがあります

flex-start / flexアイテムを左揃え(初期値)
flex-end / flexアイテムを右揃え
center / flexアイテムを左右中央揃え
space-between / flexアイテムを最初と最後の要素はコンテナの端につけ等間隔配置
space-around / flexアイテムをコンテナの端と間も等間隔配置

上下の位置揃えにはalign-itemsプロパティ

値には以下のようなものがあります

stretch / flexコンテナの高さいっぱいにflexアイテムを設置（初期値）
flex-start / flexアイテムを上揃え
flex-end / flexアイテムを下揃え
center / flexアイテムを上下中央揃え
baseline / flexアイテム内の文字のベースラインに揃えて配置

flexアイテムの並び順にはflex-directionプロパティ

値は以下のようなものがあります

row / flexアイテムは左から右へ配置されます
row-reverse / flexアイテムは右から左へ配置されます
column / flexアイテムは上から下へ配置されます
column-reverse / flexアイテムは下から上へ配置されます

とても便利なflexboxを使いこなしましょう。

2018-06-18

HTMLってなに？

HTML

こんにちは

れいですよ。

HTMLとは

HTML=Hyper Text Markup Language
(印をつけてすごいテキストにする言語)
文書構造に印をつけて、文書構造を定義する言語のことを言います。

基本構造

<!DOCTYPE...>
HTMLの仕様を決める記述

<html>~</html>
HTML文書の最初と最後に記述し、全ての要素を内包する

<head>~</head>
HTML文書のタイトルや概要、文字コードなどブラウザに表示されない情報を扱う

<body>~</body>
ブラウザに表示されるコンテンツを扱う

この大きく分けた４つの要素でhtmlが構成されます。

文書型宣言 (Document Type Definition)

HTML

Webページを作成するための言語で自由度が高い
自由度が高いため、正確な文書構造を把握しづらい

XHTML

XHTMLはXMLのもつ特徴をそのまま引き継いでいるため書式が厳密
書式が厳密なため文書構造はしっかりしている

HTMLタグの記述法

記述のルール

半角文字で入力する
小文字で記述する

開始タグと終了タグで囲んで要素を作る

要素とは意味のあるかたまりの事

<要素名(開始タグ)>意味付けの対象</要素名(終了タグ)>

(改行タグ)のように囲む対象がない要素を作るものもある。

タグは入れ子構造にする

正しい記述

タグは入れ子構造にする

間違った記述

タグは入れ子構造にする

タグを記述する場合は必ず入れ子構造(箱の中に箱が収まる構造)にします。
間違った記述のように互い違いに記述してはいけません。

文字コードの指定

meta要素(metadata:そのデータに関する情報)

タグのサンプル

HTML５
<meta charaset="UTF-8">

文字コードをHTMLファイル内に明記する事で文字化けを防ぐことが出来ます。
もし保存時の文字コードとmeta要素で指定した文字コードが違っていると文字化けが発生します。
HTML５の文字コード指定は文書の先頭から1024バイト以内に記述しなければいけません。
なお、HTML５「UTF-8」を使用することが推奨されています。

文字コード指定以外のmeta要素

HTMLの説明文
<meta name="description" content="ここにHTMLの説明文を記述">

HTML文書のキーワード
<meta name="keywords" content="キーワード,キーワード">

ページ製作者
<meta name="author" content="製作者名">

title要素(title:タイトル)

<title>ページタイトル</title>

ブラウザ標準の見た目の変化

　　*ブラウザのタイトルバーやタブに表示される

title要素はhead要素内に定義される

サイトアクセス数に影響を及ぼす要素で、title要素で指定した文字列は
ブックマーク登録時の見出しや検索エンジンの検索結果にも使用されます。
ページの概要を伝える重要な文字列なので、HTMLファイルの内容を端的に表現した
キーワードを選びましょう。

HTMLのコメントの記述

コメントブロック

コメントは製作時のメモなどに使用されます。ブラウザには表示されません。

ただし、コメントはブラウザ上に表示されないだけで、
ソースコードを表示させれば誰でも見ることが出来ます。
重要な情報をコメントに記述するのは避けましょう。

とりあえず序章ということでまとめさせていただきました。

また更新します。

それでは。

2018-06-18

お勉強ブログ始めました。

初めまして、れいですよ。

現在webデザインとプログラミングの勉強をしております。

これから習ったことの復習としてこのブログに記していきたいと思っております。

スペック

アラサー
A型
秋生まれ
高校の時にhtmlを少し学ぶ
wordpressでホームページ作成経験あり

まだまだしょぼいですがよろしくお願いします。

絶対出来るようになってやります。

それでは。