2016-11-08

clearfixについて

clearfixについて説明する前に、まずはfloatについて説明します。

floatとは、指定された要素を左または右に寄せて配置するときに使うタグです。float:leftで左寄せ、float:rightで右寄せを指定します。指定された要素は浮いた状態になっているため、それを解除するのがclearfixになります。

clearfix:after{

content:"";　何もない空白

display:block;　浮いたものをブロック要素にする

overflow:hidden;　非表示にする

clear:both;　クリアにする

}

親要素にoverflow:hiddenを入力することでfloatを解除することもできます！

2016-11-08

CSSセレクタの選択

CSS Webデザイナーコーディング疑似セレクタ疑似

CSS セレクタの適応範囲の選択

a,b：同じスタイルを複数に適応

a b：aの階層の下にあるb全てに適応

a>b：aの直下にあるbだけに適応

a+b：aの次に来るbの要素に適応（最初のaは変わらず、b以降が変わる）

ab ：aであってbのついたものに適応

（例）p.text{color:red;}　<p>の中に指定してある.textに対して適応

疑似セレクタ

:first-letter　ブロックレベル要素の最初の文字に対して適応

:first-line　ブロックレベル要素の最初の一行に対して適応

:before　ある要素の前に何か指示を出したい時

（content:"★";を使えば要素の前に★を表示させることが出来ます）

:after　ある要素の後に何か指示をしたい時

（content:"★";を使えば要素の後に★を表示させることが出来ます）

anchor（アンカー）タグに対して

a:link　未訪問時（通常時）

a:visited　訪問済の時

a:active　クリックした時

a:hover　カーソルが上にある時

子要素に対して

:first-child(n)　最初

:nth-child(n)　n番目　（2n+1）奇数　（2n+0）偶数

:last-child(n)　最後

※（n）の部分に数字を入力すると最初から●番目が適応となる

フォームに対して

:checked　ラジオボタン、チェックボタンがチェックされた状態の時

2016-11-08

フォームについて

HTML Webデザイナーコーディングタグ form input フォーム

お問い合わせなどで使われるフォーム。

ここではformタグについて記述していきます。

<form>

</form>

type="★"に入力する種類

★テキスト：text

★パスワード：password（文字を非表示にしてくれます）

★添付ファイル：file

★ラジオボタン（１つのみ選択可能）：radio

<input type="radio" name="sex" value="man">男性

<input type="radio" name="sex" value="woman">女性

※checked_"checked"（最初からチェックを入れておくことができます）

★チェックボタン（複数選択可能）：check

<input type="check" name="fruit" value="apple">りんご

<input type="check" name="fruit" value="orange">みかん

その他の種類

●ドロップダウンリスト

</select>

※selected_"selected"（最初からチェックを入れておくことができます）

●テキストエリア

<textarea cols="横幅○文字分" rows="高さ○行分" name="名前">表示したい内容を入力</textarea>

●実行/キャンセル

HTML5にて追加されたタグ

★日付：date（カレンダーが表示されます）

★色：color（カラーピッカーが表示されます）

★メール：email（アドレスのチェックをしてくれます）

★電話：tel（スマホの場合はテンキーが表示されます）

★数：number（スマホの場合はテンキーが表示されます）

記入例を入れておきたい場合は…

・value="ここに名前を入れて下さい。"

・placeholder="（例）山田花子"

2016-11-08

タグについて

CSS HTML Webデザイナーコーディングタグリンク

HTMLは文書構造どおりに記入する必要があります。

この部分は見出しです、この部分はリストですと分けるのがタグになります。

・見出し<h1><h2><h3><h4><h5>…

・段落<p>

・改行<br>

・リスト<ul><ol><dl>

　<ul>アンオーダーリスト

　<ol>オーダーリスト

　<dl>定義リスト

・リンク<a href="●●.html"></a>

　新規ウィンドウで開きたい時は「target="_blank"」を入力すること

・画像挿入<img src="●●.jpg" alt="画像の名前">

その他にも数多くのタグがあります。

詳しくはWebで検索してみてください♪

2016-11-08

<head>について

head body HTML Webデザイナーコーディング meta ファビコン CSS

HTMLでは、<head><body>内に内容を書いていきます。

<html lang="ja">　HTML文書。言語設定、日本語。

　<head>HTMLの文書情報。</head>

　<body>ブラウザ上に表示される部分。</body>

</html>

<head>要素に記入するもの

１．metaタグ

metaタグの情報は検索エンジンウェブクローラー（ロボット）に読まれるので、SEO対策などで重要になる部分です！

・UTF-8に文字コード設定

・キーワード設定:keywords

・文章の説明:description

・文章の作者の指定:author

（検索エンジンに対してURLを読み込まないように設定するには、<meta name="robots" content="noindex,nofollow">を入力することで可能です。ただし、検索エンジンによっては表示されることもあるので、注意が必要です。）

２．リンク

・CSSの外部ファイル読み込み

・Javascriptの外部ファイル読み込み

・ファビコン（タイトルバーに小さな画像を表示させる方法）

※png以外にも「icon」「gif」などの形式も設定可能

その他にも数多くのタグがありますが、ここでは基本のみ紹介しています。

詳しくはWebで検索してみてください♪

2016-11-07

HMTL/CSSとは

HTML CSS コーディング Webデザイナー Javascript jQuery

はじめまして、ｍｔです。

Webデザイナーを目指し、日々勉強しています。

知識が増えるほど、忘れていくことも多いので。。。

こちらのブログにまとめていきたいと思います！

Webサイトの見た目は、大きくわけて「HTML」と「CSS」によって表示されています。

１．HTMLは「Hyper Text Markup Language」の略で、文章を書くための言語。

２．CSSは「Cascading Style Sheets」の略で、見た目をデザインするための言語。

この上記２つを合わせてWebサイトが表示されています。

そして、W3C（World Wide Web Consortium）がルールを決めています。

補足情報として…

３．Javascript

ブラウザ上で動くプログラム言語。HTML/CSSでは表現できないことを補う言語。

（ jQueryを使えばJavascriptがわからなくても簡単に実装が可能）

この３つの言語を理解すれば、とても素敵なWebサイトを作ることが出来ます！

自分の書いたものがWeb上で表現される！動く！とても面白い言語です！！

mt_memo

WEBデザイナーを目指すｍｔの備忘録です。

clearfixについて

CSSセレクタの選択

フォームについて

タグについて

<head>について

HMTL/CSSとは