webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

CSS基礎

CSSCascading Style Sheets

CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。

h1やpなどの意味付けはHTML

色や大きさやレイアウトなどはCSS


www.csszengarden.com


エンベットによる記述方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
</body>	
</html>
外部ファイルによる記述方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>	
</html>

CCSの記述ルール

f:id:yachin29:20160308130715g:plain


最初に覚えるべきプロパティ

  • color = 文字の色
  • font-size = 文字の大きさ
  • background-color = 背景の色
  • width = 横幅
  • height = 高さ
  • margin = 要素の外側の空き
  • padding = 要素の内側の空き
  • border = 線の種類・太さ・色を指定する
主な線の種類
  • solid = 1本線で表示されます。
  • double = 2本線で表示されます。
  • dashed = 破線で表示されます。
  • dotted = 点線で表示されます。


www.tagindex.com

広告を非表示にする

マークアップの練習

HTMLで1番大事なのは正しい文章構造にマークアップ出来るか、です。
まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。

アウトライン構造

アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識することが非常に重要になってきます。
webサイトを作る上でアウトライン構造は最も重要なポイントの1つです。自身の伝えたい内容が正しくアウトライン構造化されているか、外部ツールなどを使い必ず確認しましょう。


f:id:yachin29:20160601140359p:plain

HTML5 Outliner

https://gsnedders.html5.org/outliner/



以下の文章を使って正しいアウトライン構造を作ってみましょう。

HTMLについて
HTML(HyperText Markup Language)とは、ウェブ上の文書を記述するためのマークアップ言語である。

HTML5
HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に勧告された新しいHTML仕様。

HTML5の新要素
header、nav、footerなどが新しい要素して加わりました。

header要素
header要素とは~~~~です。

nav要素
nav要素とは~~~~です。

XHTML
HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。

XHTMLで使われていた要素
div要素やp要素などが使われていました。

h1要素
h1要素とは~~~~です。

p要素
p要素とは~~~~です。

★うちのにゃんこ★

我が家のアイドル、にゃんこ達を紹介します!

我が家のにゃんこ紹介

飼い主紹介

猫写真募集



我が家のにゃんこ紹介

●すばる(白キジトラ・オス)

目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

特徴:

大きな目と耳。まがったしっぽ。

性格:

マイペース。



●ぐれ子(灰色毛皮・メス)

生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。

特徴:

しゃがれ声。ゴロゴロすりすり攻撃。

性格:

甘え上手。腹黒。





●ねず子(白茶トラ・メス)

ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。

特徴:

片目。小顔。

性格:

プライド高い。人間に対しては女王様。




飼い主紹介

H.N. :

roka404

仕事 :

フリーランスでWeb関係のお仕事してます

mail :

info@hogehoge.com

Web :

http://www.hogehoge.com/



猫写真募集

ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します!


Copyright © UCHI NO NYAN'S All Rights Reserved.


使用画像
subaru
f:id:yachin29:20170130155328j:plain



gureko
f:id:yachin29:20170130155315j:plain


nezuko
f:id:yachin29:20170130155320j:plain

Photoshopでのマスク処理

画像のマスク処理

f:id:yachin29:20151002001709j:plain
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。



Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。


f:id:yachin29:20151002010808p:plain



liginc.co.jp

adobe brackets|オープンソースの高機能テキストエディタ

adobe bracketsとは?

HTMLやCSSJavaScriptのコーディングに特化したOSSテキストエディターとして、2011年12月から開発をスタートし、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。

Adobe SystemsBracketsを「HTML/CSS/JavaScript用のコードエディター」と称しているが、PHPRubyPythonなど多くのシンタックスハイライトを用意している。だが、後述する機能を俯瞰(ふかん)すると、やはりWeb開発の利便性を向上させるテキストエディターと評すべきだろう。

Brackets最大の特徴となるのが、ライブプレビュー機能だ。編集中のHTMLファイルやindex.htmlファイルを含むCSSファイルに対して実行すると、Webブラウザーでリアルタイム表示するというもの。現バージョンはGoogle Chromeが必要となるが、<ファイル>メニュー→<試験ライブプレビューを有効にする>を選択するか、brackets.jsonの「"livedev.multibrowser": true」にすることで、Microsoft Edgeなども使用可能だ。


f:id:yachin29:20170724120419p:plain



Brackets - A modern, open source code editor that understands web design.



nelog.jp


adobe bracketsの特徴

  • リアルタイム表示(ライブプレビュー)
  • 高度な拡張性

授業では

  • Brackets File Icons
  • Highlight Multibyte Symbols


というプラグインを入れてみましょう。



他にも色々と便利なプラグインがあるので自宅のPCに入れてみましょう。

qiita.com


デフォルトではインデントの設定がonになっているので、インデントの機能をoffにしたい場合は以下の設定を行います。

"smartIndent": false,



bracketsはデフォルトで、閉じカッコを打つと、終了タグが自動で挿入される仕様なので、
デバッグ」→「環境設定ファイルを開く」→「brackets.json」の記述を下記の内容に変更

{
    "smartIndent": false,
    "fonts.fontSize": "9px",
    "fonts.fontFamily": "'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace",
    "denniskehrig.ShowWhitespace.checked": true,
    "closeBrackets": false,
    "in3tween.ShowWhitespaceJA.checked": true,
    "in3tween.ShowWhitespaceJA.colors": {
        "light": {
            "empty": "#FFD3FF",
            "leading": "#ccc",
            "trailing": "#ff0000",
            "whitespace": "#ccc"
        },
        "dark": {
            "empty": "#FFD3FF",
            "leading": "#686963",
            "trailing": "#ff0000",
            "whitespace": "#686963"
        }
    },
    "custom.work.useIconsOfCustomWork": true,
    "custom.work.moveToolbarToSidebar": true,
    "custom.work.toggle.sidebar": true,
    "custom.work.autoHideTheTabmenu": true,
    "livedev.multibrowser": true,
    "closeTags": {
        "dontCloseTags": [],
        "indentTags": [],
        "whenClosing": true,
        "whenOpening": false
    }
}

定義型リストとテーブル

定義型リスト

定義型リストとは「ul」、「ol」リストと少し違い、
「dt」= 用語の指定
「dd」= dtで指定した用語の定義
「dl」= 「dt」「dd」を挟む

<dl>
<dt>レモン<dt><dd>酸っぱい黄色い果物</dd>
<dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd>
</dl>


以下の文を定義型リストを使ってマークアップしてみましょう。

■ 2017-04-22 ゴールデンウィークの営業について

■ 2017-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2017-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2017-04-10 春限定のおやつがスタートしました!




テーブル

table要素を使うことで、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。
caption要素は、表のキャプション(タイトルや説明)を表します。

table要素=表全体を示す要素です。表の大きさや罫線などは、この要素に設定。
tr要素=表の行を示す要素。例えば3行の表を作成する場合はこの要素を3つ配置する。
th要素=見出し用のセルを示す要素です。
td要素=表のセル(データセル)を示す要素。例えば横に3つのセルを並べたい場合は、各tr要素の中にこの要素を3つ配置。
caption要素=表のキャプション(タイトルや説明)を表します。


<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
</table>
セルの結合

f:id:yachin29:20160713235449j:plain


f:id:yachin29:20160713235935j:plain

宿泊料金表
部屋タイプ ツイン シングル
グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ
平日 15,800円 20,800円 58,000円 9,800円 14,800円
休前日 19,800円 25,800円 12,800円 17,800円

<table border="1" width="700px">
<caption>宿泊料金表</caption>
<tr><th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</th></tr>
<tr><th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td></tr>
<tr><th>平日</th><td>15,800円</td><td>20,800円</td><td rowspan="2">58,000円</td><td>9,800円</td><td>14,800円</td></tr>
<tr><th>休前日</th><td>19,800円</td><td>25,800円</td><td>12,800円</td><td>17,800円</td></tr>
</table>