web基礎 インターネットの仕組み
web基礎普段、何気なく利用しているインターネットですが、制作側になるのであれば基本的な仕組みを理解する必要があります。また、用語の意味も理解しておきましょう。IPアドレス（インターネット・プロトコル・アドレス）IPアドレスとはインターネッ...
2019-10
web基礎 Photoshop バナーの制作
PhotoshopWebデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。バナーのサイズ広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイ...
CSS基礎 CSS-spriteを使った3カラムレイアウト
CSS基礎CSSスプライトとは複数の画像を１つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。メリット...
CSS基礎 floatを使ったレイアウト
CSS基礎divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。floatを使う事でHTML内の文章構...
CSS基礎 2カラムレイアウトの作成
CSS基礎<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>2カラムレイアウトの作成2</title><link href="" rel="styleshee...
その他 スキューモーフィックデザインとフラットデザイン
スキューモーフィックデザインとは？「スキューモーフィックデザイン」は、AppleがiOSの最初の頃に提唱していた「質感や特徴など現実世界のモチーフを模倣したデザイン」のことです。例えば、以前のiPhoneで採用されていた電卓 アプリのデザイ...
CSS基礎 ブロックレベル要素とインライン要素
CSS基礎HTMLには色々な要素（h1とかp）がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作す...
CSS基礎 font-familyの指定 2019年版
CSS基礎font-familyの指定font-familyとは表示される文字フォントの指定です。基本的には表示させたいフォント（綺麗なフォント）から順に指定してきます。初期設定で使われる標準フォントはPCやOSのバージョンによって違うので...
CSS基礎 divの使い方と1カラムレイアウト
CSS基礎divタグ ・・ひとかたまりの範囲として定義するdivタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。今回はh1やpをdivの中に入れ、カラムレイアウトを...
CSS基礎 CSS基礎２
CSS基礎CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。marginmarginとは要素の外側に出来る隙間の事です。paddingpaddingとは要素の内側に出来る隙間です。言葉にすると一見簡単に思えますが、実...