ホームページ制作の兵法

ホームページ制作の兵法

マークアップエンジニアによるHTML,CSSなどサイト制作の基礎知識

PCの環境構築 SourceTree, TortoiseSVN, Docker, Ruby, Sass,Compass, Koala

PCの環境構築についてまとめました。

 

SourceTree-DL

TortoiseSVN-DL(32bit/64bit・日本語パッチ)

 

Docker

Ruby-DL

Sass

Compass

Koala-DL

----------------------------------------------------------------

SourceTreeのインストール、設定方法

qiita.com

 

TortoiseSVNのインストール、設定方法

 

tracpath.com

Dockerのインストール、設定方法

qiita.com

 

Ruby、Sass、Compass、Koalaのインストール、設定方法

liginc.co.jp

 

 

 

コーディングガイドライン決定版!画像名やクラス名に悩まないルールを作りました。

コーディングガイドライン決定版!画像名やクラス名に悩まないルールを作りました。

 

コーディングのルール決めてますか?

いつもその時の気分や人間次第で画像名やクラス名をつけていたら・・・。

修正作業時にコードを理解する時間が必要になります。ましてや他人のコードを修正しなければいけない時だってあります。

だからこそ、誰もが分かりやすいルールを作れれば良いと思いました。

まずは自分が分かりやすいと思うコーディングガイドを作りました。

 

1.emmet用

2.使用する画像名

3.HTMLの文章構造

4.よく使うクラス名

5.ファイル構成

----------------------------------------------------------------------------------------

1.emmet用(コピペで使用)

nav>ul>li*4>a[href=#sec$$]>img[src=images/nav$$.png][alt=#]

nav>ul>li*4>a>img[src=nav$$.png][alt=#]>{nav$$}

nav>ul>li*4>a{nav$$}
img[src=pic$$.png][alt=#]*4

 

2.使用する画像名(コピぺで使用してください)

<img src="logo01.png" alt=""> サイトのロゴ
<img src="kv01.png" alt="">  キービジュアル
<img src="nav01.png" alt=""> ナビメニュー
<img src="tit101.png" alt=""> tit101:H1の1個目のセクションの見出し画像
<img src="pic01.png" alt=""> コンテンツ内で連続する同じレイアウトのある写真
<img src="img01.png" alt=""> 連続して使われない画像
<img src="bg01.png" alt="">  背景
<img src="ico01.png" alt=""> アイコン
<img src="li01.png" alt="">  リスト画像
<img src="bnr01.png" alt=""> バナー
<img src="txt01.png" alt=""> テキスト
 

3.HTMLの文章構造

.ctn(container)
 ┣header
 ┣.con(contents)
  ┣.sec1
   ┗tit201(見出し)+p(説明)+.btn(ボタン)
  ┣.sec2
   ┗tit202(見出し)+p(説明)+.btn(ボタン)
  ┣.sec3
   ┗tit203(見出し)+p(説明)+.btn(ボタン)
 ┗footer

 

4.よく使うクラス名

ctn(コンテナー)、con(コンテンツ)、sec(セクション)

cel、celA(セル、カセット、連続する小さなコンテンツ)

sbs、sbsA(サイドバイサイド、横並びボックス)

tit1〜tit6(見出し) 例)tit2_01:01番目のH2の見出し用クラス名

hed(sec,celの中のヘッダー部分)

bod(sec,celの中のボディー部分)

btn、btnA(ボタン)

pic、picA(画像が入る)

txt、txtA(テキストが入る)

dif(definition、定義

des(description、説明

emp(emphasis、強調)

wrap(containerの代わり)

detail(詳細)

 

※Aはエリアの略

例)celAの場合、連続するcelをまとめるエリアのこと

例)btnAの場合、ボタンが入っているエリアのこと

 

5.ファイル構成

フォルダ
┣index.html
css
 ┗common.css
┣js
 ┗common.js
┗images
 ┗ kv01.png

 

以上を元にして、効率の良い、クオリティの高いコーディングを目指します。

コーディングのガイドラインは更新することが必要で、制作物、制作チームにより変わります。

常に話し合うことでより良いガイドラインを作成しましょう。

指定したCSSが適用されないときにチェックするCSSの優先順位の4つの要素

指定したCSSが適用されないときにチェックするCSSの優先順位の4つの要素

覚える理由

後から書いたCSSが適用されない原因のひとつだからです。

更に、CSSの優先順位を把握することで運営のし易いサイト設計をするためにCSSの優先順位を学びます。

 

 

f:id:site100:20170427061759j:plain

 

CSSの優先順位に影響する要素

1. 誰の指定か

2. 詳細度

3. 指定の順序

4. important

 

1. 誰の指定か

ブラウザーのデフォルトのスタイルと閲覧者が設定出来るスタイルと製作者によるスタイルがあるので何が影響しているのか注意します。

 

2. 詳細度

セレクタの書き方により優先順位が変わります。

CSSの優先順位<></h1></div>

この時、

div#header h1 > #header h1 > di.header h1 > .header h1 > div h1 > h1 > *

の順で優先度が変化します。この優先度は指定の順序にかかわりません。

 

3. 指定の順序

原則として、よりタグに近く、より後から読み込まれたスタイルが優先されます。

 HTMLファイルのヘッダーに記述する外部から読み込むCSS
それより後に、styleタグを使って記述するCSS。更にbody内のタグに直接記述するCSSの優先度は以下の通りです。

タグに直接記述(最優先) > ヘッドのstyleタグに記述 > 外部から読み込む

このように、タグに近いスタイルが反映されます。
ただし、IDやクラス名を追加したり、要素名を追加することで、先に読み込まれたスタイルが反映されます。

 

4. important命令

指定の順序を覆すことのできる魔法の言葉

 

制御しやすい、運用しやすいプロパティの指定を目指すため

セレクタに強い指定をしないこと!
CSSでプロパティに値を設定するとき、idでプロパティを選んだらどうなるか。
後に記述するとき、クラス名ではオーバーライドが出来ないため、id指定が多くなります。
それを!importantで上書きしたら、以降!importantでしかプロパティを選べなくなります。
なるべく最小限の上書きをしましょう。

スタイルが当たらない 優先順位を検証する 親要素から指定? クラス名?
必ずしも後に記述したものが適用されるわけではない

・開発者モードで邪魔している指定を把握→継承は表示されないので親要素やスタイルシートもチェック

適用されない理由
記述ミス、記述より強い指定で邪魔されている、

原因がわかったら、より強い状態で書き込む(スタイルを制御すること)

反映されたかチェック

 

まとめ


ポイントは要素の状態を知ることが重要
形が違う、動きがちがう → どこから、何の指示があるのか?
打ち消せない指定は存在しない!原因を追究しよう!

 チェックポイントは4つ。

1. 誰の指定か

2. 詳細度

3. 指定の順序

4. important

そして、検証モードを使いこなそう!

サーバー、XAMPP、ルート、パスを理解してWEBサイト制作に活かそう!

サーバー、XAMPP、ルート、パスを理解してWEBサイト制作に活かそう!

XAMPPを使っていて、アパッチを通さずにファイルを読み込んでしまった。

もちろん、インクルードファイルは読み込めなかった。

そのためにサーバーなどの知識を学ぼうと思います。

 

インターネットを見るということ

アドレスの読み方

https://www.google.co.jp/

http:Hypertext Transfer Protocolの略でHTMLのルールで転送します!

 プロトコルはルールのことで、言語に置き換えて説明されます。

日本語を話す人と日本語を話す人は意思が伝わりますが、日本語を話す人と英語を話す人は意思が伝わりません。httpというルール(言語)のみ通じます、ということです。

sはパソコンとサーバ間の通信データを暗号化するSSL(Secure Sockets Layer)のことです。

www.:Word Wide Web 世界に広がる蜘蛛の巣

google.co.jp:ドメイン名と呼び、インターネット上の表札のようなものです。

 

自分の使っているPCとサーバーの違い

apache(アパッチ)などのサーバーソフトがインストールされ、起動中である

 

サーバーはユーザーからの要求を受けて何か処理を行うパソコンです。

WEBサーバーはApacheがインストールされたPCを使います。

Apacheは、そのOSの上でInternetExplorerやGoogleChromeなどのブラウザと呼ばれるアプリケーションからアクセスを受けた時にHTMLファイルを返すための応用ソフトのこと

PCとサーバーに垣根はありません。

 

XAMPPを使って自分のPCのファイル(PHPが使われている)を見るために

・アパッチを起動すること

・ブラウザのアドレスバーに「localhost:ポート番号」を入力する

又は、「127.0.0.1:ポート番号」「自分のPCのIPアドレス:ポート番号」でもOK

・XAMPPのアパッチを切る、又はインターネットの接続が切れる→サーバーが落ちる

・アドレスバーに「file:///C:/Users/・・・」表示の場合、アパッチを通さずにファイルを開いているため、PHPが動かない。

 

PC →【要求】→ サーバー(アパッチが処理)→【返事】→ PC

 

通常、ルートのindex.htmlは1つのため、複数の開発環境を作りたい場合はバーチャルホストでルートを増やすことで対応する。

 

インターネットを見るためには「ドメイン」か「IPアドレス」を入力する必要がある。

WEBサイトを公開前はIPアドレスで環境を作り、公開直前にドメインを取得することがある。

 

ポートはマンションの郵便ポストのようなもの

ユーザーの要求はIPアドレス(住所)のポート(郵便ポスト)に入る。

ポストを常に監視しているサーバーが、ポストの要求を見つけて受け取る。

サーバーは受け取った要求に対して、ユーザーに返事をする

これがWEBサイトを見るということです。

 

サーバーのファイルをブラウザで見ることと、エクスプローラーで開くことの違い

ブラウザで見る

更にルールにしたがって整えて、ファイルの中身を送ってもらう。

エクスプローラーで見る

ファイル操作、ファイルの一覧表示、名前の変更などが出来る

 

ポートは常に開いたままのポートと、要求のあったときだけ開くポートがあります。

WEBサーバーのポートは常に開放されていますが(閉じるとサイトが見られなくなるため)、FTPなどのポートは常に閉じています。

メールサーバー、SSHのポートは常に開いています。

 

パスとは:シェルがコマンド実行ファイルを探しに行く道筋

 

パスの種類

絶対パス:URLでページを指定。最上位階層からの道筋。

相対パス:現在地からの道筋。

ルートパス:1番上のディレクトリ(フォルダ)からの道筋。

 

絶対パス

用途:外部サイトへのリンクを自分のサイトに記載したい場合

デメリット:ドメイン変更やローカル環境に対応が難しく、文字が長い。

 

相対パス

用途:一般的なWebサイト開発

メリット:ドメイン変更やローカル環境に対応可能

デメリット:インクルードファイルがコピペできない

 

ルートパス

用途:大規模案件の開発

メリット:インクルードファイルのパスがコピペでOK

デメリット:書く文字数が相対パスよりも長くなる

 

CSS backgroundプロパティを極めて、自在に背景を置くWEBサイト制作の技術

CSS backgroundプロパティを極めて、自在に背景を置くWEBサイト制作の技術

なぜCSSbackgroundプロパティを勉強したいと思ったのか?

それは背景や意味を持たない画像を思い通りに配置したいと思ったから。

今回は背景の基礎を学ぶことで、背景画像の配置に悩むのは辞めよう!

 

backgroundプロバティの初期値

  • background-image: none     表示画像はありません
  • background-position: 0% 0%  表示位置は左から0、上から0の位置です
  • background-size: auto auto   サイズはautoで表示します
  • background-repeat: repeat     縦方向と横方向に繰り返します
  • background-origin: padding-box 背景の基準点はパディングされた位置です
  • background-clip: border-box   背景の表示エリアはボーダーボックスの状態
  • background-attachment: scroll  背景の固定対象はスクロールで処理され、ボックスに対して固定されます
  • background-color: transparent  背景色は透明です

 

練習問題

backgroundプロパティを使って、リストスタイルの位置を変えよう!

http://abenosite.webcrow.jp/hatena/17_04/22_background.html

1.上のリンクをChromeで開き、画面右クリック→検証をする

 

---------------------------------------------------------------------------------------

f:id:site100:20170422181551p:plain

---------------------------------------------------------------------------------------

 

上の状態を検証モードでdiv,ul,liなどの要素を指定して、cssのstyleを変更して調整してみました

 

f:id:site100:20170422181645p:plain

---------------------------------------------------------------------------------------

 

⬇ 完成図です

 

f:id:site100:20170422181815p:plain

---------------------------------------------------------------------------------------

ポイントはulの「大事」マークがポジション位置を変更すると見切れてしまいます。

その時は、パディングを使って要素の範囲を広げて、「大事」マークが見切れないようします。

以上、検証モードでバックグランドを調整する練習でした。

 

まとめ

backgroundプロバティの種類と初期値を知りました。

練習問題をすることで、リストスタイルが画像になった場合や、写真の上に画像で番号が振られているような場合でも焦らずにコーディングできます。

 

リストスタイルを背景で表現するポイントは

1.padding-leftでリストスタイルの分だけ、右に寄せる

2.background:url() no-repeat 5px 5px;のとき、初めの数字がleftからの距離で、次がtopからの距離になります。

3.無駄なmargin-leftは付けないようにしましょう(以前、見出し位置とリスト位置を合わせるためにやってしまったことがあります。その後、paddingだけで調整しました。)

SEOを考えてマークアップしたら時間だけが過ぎていた件

 SEOを考えてマークアップしたら時間だけが過ぎていた件

 

htmlやcssを何となく書けるけど、作業が早くならない自分。

CSSで指定したコードが反映されない理由から逃げていました。

あらためて基本を学べば、動かない理由が分かります。

逃げないためのWebサイト制作の知識を身につけます。

 

マークアップは単純に考えよう

セマンティクスやSEOを考えてマークアップしてますか?

YESと答えたのに仕事遅い人いますよね。自分がそうです。

 

下記の文章をマークアップしてみる!

-------------------------------------------------------------------------------

戦力になるマークアップエンジニアになるには

 

意味のあるマークアップする理由

 検索エンジンは、文章ではなくタグを見てサイトを理解するから

 

こんなマークアップエンジニアがいた・・・

 簡単なコーディングは3秒で出来る(と言われている)

 自分を増やそうとしている(作るかも・・・)

 デザイナーに苦情を言う(そしてデザイナーに「自分で作ってみれば!」という・・・)

 分からないことを聞くと楽しそうに教えてくれる

 

逃げている技術

 HTMLのマークアップで悩む

 マージンやパディングをどこに付けるか悩む

 とにかくDivで囲んだり、クラス名を多用する

 CSSでスタイルが崩れた時に理由を考えずに違うことをためす

 CSSでスタイルが崩れた時に理由を考えずにHTMLを変えてしまう

 

こんなマークアップエンジニアになろう

 HTMLは一度書いたら構造変更しないこと

 CSSは出来るだけ一度で終わらそう

 

逃げないマークアップエンジニアになるために

 自分で書いたコードに全て意味を持たせよう

 一行ずつ、説明できるようにすること

 なぜそのタグを使ったの?

 パディングやマージンをなぜその要素につけたのか?

 ルール化は出来てるの?

 
-------------------------------------------------------------------------------
 

意味付けに囚われずに簡単で単純なマークアップをする理由

・ol、ul、dlの使い方に本気で悩んでマークアップするだけで1時間30分かけたことがありました。はっきりいって無駄な時間でした。
・絶対にdlを使わないと駄目。ここはこのタグでないと駄目。それを決めるのはあなたです。周りは関係ないので、あなたの信念に基づいてググらずにタグを書こう。
・シンプルな文章構造のHTMLはコーディングし易いだけでなく、グーグルからも評価を得やすい。だって、色んなタグを使ったり、Divを多くしてデザインしてあったら・・・グーグルさんはどう思う?そこにかかる時間は?他の人でも運営できるの?更新時にミスが少ないコードなの?
 

まとめ

文章構造に悩んだり、コーディングに時間がかかっている人はHTML5のタグを使うことを辞めてみよう。
最も単純で、最も早くコーディングできる技術を磨いてから、セマンティックを考える。タグ辞典で調べている時間は有益ですか?まずは「h1~h6 p ol ul dl table div span」だけでコーディングすることで、コーディング作業を早く、正確にすることだけを考えてコーディングしてみます。

WEBデザインの基礎用語の箇条書き

WEBデザインの基礎用語の箇条書き


WEBデザイン関連の言葉の理解

・HTML:正しい文章構造をタグを使用して表現する言語。テキストをクリックすると別のサイトに飛ぶ言語。

CSS:ページのデザインやレイアウトをする言語

・ブラウザ:インターネットを閲覧するためのソフト(IE、Crome、Firefox
・コーダー:デザインカンプ(完成見本)をブラウザで見られるようにマークアップする人
JavaScript:Webページに動きをつける言語
クリックやタップ時のページ上の挙動の制御やアニメーションの実行、フォームのエラーチェックなどで活躍します。このようなブラウザ上で動くものをクライアントサイド
jQuery:JS を少ない記述で書けるJSライブラリー(便利なプログラム部品集のファイル)

Bracketsおすすめプラグイン
Emmet、Tabs、Indent Guides、Beautify、W3CValidation

Dreamweaver
extractでPSDカンプから直接スタイル情報や文言などを抽出できる。
画像はPSDのレイヤー構造により上手く保存出来ない場合が多々あるので使わない
レイヤーマスク、写真、テキスト
コードヒントはコーディングの邪魔になるので環境設定で非表示にする

イラストレーター(ベクター)とフォトショップ(ラスター、ビットマップ)拡大すると違う
Ai:線や図形を使って拡大してもキレイなロゴやイラスト、
Ps:写真や素材、色味や複雑なグラフィック。ピクセルをタイル状に敷き詰めて表現


CMS

インクルード:他のファイルに書かれている内容を読み込む

カスタムフィールド:独自の入力項目を追加してオブジェクトを管理する機能
MT:Six Apart社が提供するCMSプラットフォーム
プラットフォーム:ソフトウェアが動作するための土台(基盤)として機能する部分
「ブログ」:インフォメーションやイベント情報、商品情報や採用情報など

「ウェブページ」:会社概要やプライバシーポリシーなど、更新頻度が少ない固定情報

「ウェブサイト」:親ウェブサイトを設定、直下にブログなどコンテンツを展開
★5~10ページくらいで安価に自由な構成で作れる

<テンプレート>

・自由にどこでも単一ページを出力「インデックステンプレート」
・特定のルールに従い複数ページを出力「アーカイブテンプレート」
・付属システムの出力部分を調整「システムテンプレート」
・パーツ化して様々な形で共有使用「テンプレートモジュール」
ヘッダーやフッターなどの共通部分のhtmlをこちらに保存しておき、各テンプレートでインクルードすることで、全数十ページあるサイトでも一箇所を直して再構築するだけでメンテナンスが可能になります。
各種テンプレート上でインクルードすることができるのがテンプレートモジュール