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

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

広告を非表示にする

コードドリル|タイピングをしながら、プログラミングを学ぶ。

f:id:yachin29:20170722095245p:plain


コードドリル - プログラミング言語のタイピング練習


プログラミングを反復練習する

タイピングをしながら、プログラミングを学ぶ。
ユーザー登録は無料です。文字列リスト作成・ソースコードで効率よく練習ができます。

プログラミングがもっと楽しくなる

ぎこちないタイピングが、楽しいプログラミングの邪魔にならないために。
コードドリルは、新しい世界を生み出すあなたのプログラミングに、役に立てるサービスを目指します。

マークアップの練習

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

定義型リストとテーブル

定義型リスト

定義型リストとは「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>

Photoshop 基礎

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の3つ

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。

Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき[Ctrl]+[Alt]+[Shift]を押したままに。
Adobe Photoshop設定ファイルを削除しますか?」とダイアログがでる。

  • カラー設定は「Web・インターネット用 - 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。


・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。




・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。




ビネット効果

広告を非表示にする