読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

アニメーション - transition(トランジションアニメーション)

transition(トランジションアニメーション) transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです

変形 - transform-origin(変形の原点)

transform-origin(変形の原点) ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する

変形 - transform(変形)

transform(変形) transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の4種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…

CSS3を使ったページ構成

CSS3を使ったページ構成 HTML5新要素を使ったページ作成 a要素の使い方を工夫する。 The Café のおすすめ カフェドリンク カフェドリンク 濃いめのコーヒーで香りを楽しむ冷たいドリンク。 コーヒードリンク 濃いめのコーヒーと凍らせた牛乳で作るフラペチー…

グラデーション

linear-gradient 線形グラデーションを作成するための background-image の新しい値です 旧ブラウザ対応 上から下への2色グラデーション <ul class="grad"> <li class="grad01">2Colors (top → bottom)</li> <li class="grad02">3Colors (left → right)</li> <li class="grad03">3Colors (left top → right bottom)</li> </ul> グラデーションを表示できない…

背景画像

multiple-background CSS3からは、1つの要素に複数の背景画像を指定できるようになりました 従来通り1枚背景画像を指定した後、カンマで区切って2枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます <div class="multi-bg"></div> .multi-bg { width: 400px; hei…

Web Fonts

Web Fonts CSS3.0 fonts module Webフォントはコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなう文字表示を行うシステムおよびそのフォント Google Fonts + Japan…

ボックスモデルを理解

CSS

Interactive box-model demo box-sizing ボックスモデルの計算方法を指定するプロパティ 初期値の「content-box」は通常のボックスモデルと同じ計算方法、「padding-box」は padding までの領域を width として計算します(「padding-box」は Firefox のみ対…

グリッドレイアウト

HTML5でのカラムレイアウト 素材 素材をチェック コーディングしやすいファイル名に変更する リストを基準にした場合 「li」を基準にするため、class名も「li」に付与する img要素の親要素「li」の両側に「10pxの余白」を設定します <html lang="ja"> <head> <meta charset="UTF-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </meta></meta></head></html>

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい ナビゲーションボタン「幅:160px、高さ:50px、色帯:4px」 bg.jpg(幅800px、高さ250px) logo.png(透過PNG 幅200px) navがheaderと区別されたレイアウト ナビゲーションボタンがテキストの場合 …

ナビゲーションボタンを作る

Adobe IllustratorCC 2017の場合 「ピクセルにスナップ」をオンにして「線の位置」も「内側」を選択しておいて、長方形を描画します 以下の作業は、授業の内容通りです 新規ドキュメント 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを…

ラベル(キャラクター)をつくる

楕円形ツールを自由に使う ここまでは、ペンツールを使わなくても形にできます。 楕円を描いて、ハサミツールで切っても曲線にはなります。 アンカーポイント切り替えツールを使う 楕円の端をとがらすには、「アンカーポイント切り替えツール」でクリックし…

グラデーションとブレンド

グラデーションとは グラフィックデザインの手法のひとつで、ある異なる2色の色や濃淡が滑らかに連続して変化してゆく表現のこと グラデーションツール 線形(リニア) 円形 グラデーションを作る 《グラデーションのポイント》 開始色と終了色を決める 線形…

CSS3のプロパティ

CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…

CSS3セレクタ

属性セレクタ 新たに追加された属性セレクタ 属性値が「〜で始まる」要素を選択する E[foo^="bar"] <ul class="sample"> <li class="STARTxx">class="STARTxx"</li> <li class="xxSTART">class="xxSTART"</li> <li class="xxSTARTxx">class="xxSTARTxx"</li> </ul> /*〜で始まる*/ li[class^="START"]{ border-color:#F00; } 属性値が「〜で終わる」要素を選択する E…

CSS3の基本

CSS3の概要 CSS3は、これまで使ってきたCSSの延長 CSS3を使うメリット テキスト P.258 classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるよ…

マルチカラム - 素敵な商品のショップ

マルチカラム - 素敵な商品のショップ 素敵な商品のショップ HOME TEAPOT TEACUP GLASS PRODUCTS あなたにぴったりの素敵な商品を取りそろえております。 TEAPOT TEACUP GLASS (c)素敵な商品のショップ 素材

オンライン学習サイトを体験

Progate prog-8.com CODEPREP codeprep.jp デイジーと秘密のメッセージ mozer.io ドットインストール http://dotinstall.com Livoo! HTML講座 HTML講座 | 無料オンライン学習・講座で資格取得・スキルアップするならLivoo!

検索結果上位表示のための記述

SEO

セマンティックなマークアップを効果的に実践 文書構造を最適化する 4つの段階(フェーズ) ロボット巡回 インデックス追加 アルゴリズム適合 ペナルティ回避 内的要因のチェック ソースコードの最適化 検索エンジンにとってわかりやすいサイト ↓ 検索エンジ…

企業系サイト:トップページ

2カラムページ設計 bodyの背景画像を設定する場合 headerの背景画像を設定する場合 定義 全体は、.conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50…

positionによるレイアウト

positionとは テキストP.130〜136 positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、bot…

2カラム演習 - モンサンミシェル

2カラム - モンサンミシェル マークアップ例 @charset "utf-8"; /* reset --------------------------------------*/ html,body,h1,h2,h3,p,dl,dt,dd { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-…

Webページを作るワークフロー

プロジェクトを作成 管理するフォルダーを作成(名前は適宜) 新規HTMLドキュメントを作成(index.html) 新規CSSファイルを作成(style.css) 文書構造を記述 index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> コンテンツを記述 body内はコンテンツによってマークアップ…

CSS Spriteの記述

CSS

CSS Sprite <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーの練習</title> <style> html,body,ul,li { margin: 0; padding: 0; } ul { list-style: none; } .nav { width: 800px; margin: 50px auto; } .nav ul { overflow: hidden; } .nav li { float:left; width: 160px; } .nav li a { displa…</meta></head></html>

コンテンツモデル

カテゴリー 7つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの3つ 要…

HTML5の基本的な文法

HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition):文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり1つになるため 2014年12月時点では、以下のいずれか…

HTML5を理解するためのキーワード

HTML5を理解するためのキーワード W3C(World Wide Web Consortium) ティム・バーナーズ=リー IETF(Internet Engineering Task Force) WHATWG(Web Hypertext Application Technology Working Group) Hypertext Markup Language Internet Draft HTML5の…

HTML5とは

HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTML5 HTML4.0に続く5番目のHTML…

FTPでサーバーにアップロード(コピー)

アップロード:Upload アップロードとは、コンピュータネットワークにおいてコンピュータに存在するファイルを接続された他のコンピュータに転送すること(ローカルからサーバーへのコピー) 対義語としてはダウンロードが挙げられる FTP:File Transfer Pro…

ベクトルとバランス

ベクトルの説明がわかりやすいサイト Illustratorを理解するためには「ベクトル」の理解が不可欠です この解説は初心者にとって、もっともわかりやすい説明になっています The beginner's class lecture of the Bezier curve for Adobe Illustrator 本質はベ…

Illustrator - トレース

トレースとは 下絵をなぞって描くこと 真似て描く練習(繰り返す度にうまくなること請け合い!) 下絵を設定する 下絵にする画像データ(手描きのイラストをスキャンしたりしたもの)を準備する(PNG、JPG,GIF,TIFFのいずれかの形式) 新規ドキュメント作…

コンピューター上で利用できるグラフィック形式

GIF(Graphics Interchange Format) GIFは色数が256色に限定されており、写真のような色数の多い画像には向きません GIFの大きな利点は透明色(Transparent)を指定できること(最近ではPNG) GIFは水平方向に連続する同じ色を圧縮します(つまり、横方向の…

マークアップ - 実践

うちのにゃんこ 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します! 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少…

floatを使った回り込み

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

2カラムレイアウト基本

2カラムレイアウト基本 画像は適宜選択する 素材例 Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述しま…

floatを使ったレイアウト基礎

CSSレイアウト テキストP.092〜095 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTML…

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 素材 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。 観光スポット…

★★★CSSレイアウトのコーディングルール

CSS

div要素を使ったレイアウトグループ化 div要素は、文書構造には関係なく意味づけもありません ただまとめるために使われます div要素は、何層にも深く階層構造を作ることには向いていません div要素を利用する場合 見出しと関連するコンテンツをまとめる ブ…

初心者のワークフロー

1ページを完成させる マークアップ(文書構造を記述する) 先割(レイアウトブロックの面積を設定する) マークアップ 文章に対して、「見出し」「本文」「箇条書き」などを適切に設定してく 初心者にとっては、どのテキストを利用すればよいかの判断が難し…

無料レンタルサーバー

ウェブクロウ:無料・広告なし www.webcrow.jp エックスドメイン 無料レンタルサーバー Hostinger:無料・広告なし 未来サーバー:無料・広告なし

補正で写真をキレイに

補正(写真をきれいに) すでに移っている質が変化するわけではありません。 デジタル処理できる範囲で、人間が見てきれいと感じる程度に変化させます。 新規調整レイヤー 何度もやり直しができる色調補正のレイヤー レベル補正 おもに画像の「階調幅」を調…

擬似クラス

CSS

リンクの色(擬似クラス:Pseudo-classes) 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク(未アクセス)…

Webページのテキスト

CSS

情報を伝える文字 文書構造で伝える 文字情報の価値の優先順位をブラウザに伝えるHTML 閲覧者に情報の内容をわかりやすく伝えるためのCSS CSSを指定しない場合は、ブラウザの初期値(CSS)が適用されます ★HTMLの検証:The W3C Markup Validation Service CS…

地図を描く

地図を描く (1)新規ドキュメント作成 (2)[ファイル]メニュー → [配置] (3)配置する写真を選択する。ファイル名「地図下絵.tif」 ※オプションは「テンプレート」のみ、チェックする。 ※「リンク」のチェックは必ずはずすこと。 (4)「テンプレート…

文書構造の記述演習

文書構造の記述 div要素を使ってグループ化する ウェブの役割と特性について理解しよう ウェブで私たちの生活はどう変わったのか? インターネット・ウェブの利用者増によって、個人が発信する情報群の価値が高まってきました。広告のあり方にも大きな影響を…

CSSによるページデザイン

CSS

CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、1行…

GIFアニメーション

アニメーションとは 「アニメーション」は、目の錯覚を利用して残像を連続しているように感じさせることで「動き」を作っています。 たとえば、先日の「GIFアニメ:swingbird」の場合、軸の基準点に対し「回転」があることにより動いているように見えていま…

境界線を調整を使って切り抜き写真

境界線を調整(複雑な選択範囲) (1)選択しやすい色をクリックし選択範囲を作成 (2)選択範囲を反転し、必要な部分を選択している状態にする (3)選択範囲ツールのオプションバー「境界線を調整」をクリック (4)「エッジの抽出」を調整 (5)「エッジ…

選択範囲

メモリを管理する ROM:Read Only Memory RAM:Random Access Memory Photoshopは、開いているファイルサイズの数倍のメモリが必要となります。 開く(Open) 保存(Save) 複製(Copy) 戻る(Undo) 最低この動作を確保するメモリが必要となります。確保で…

Photoshopを使う

Photoshopとは Photoshopを使う目的 Webページ上に表示する画像を、効率よく最適化する(データ量が軽い、きれいな状態にする) 初心者がPhotoshopの勉強をする3つのポイント 選択範囲を決める(どこをという最初の部分。または主語にあたります。) 補正す…