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

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

レスポンシブデザイン

コーポレートサイトのトレース|ナビボタン

<html lang="ja"> <head> <meta charset="utf-8"> <title>コーポレートサイトのトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/wideslider.css"> </link></link></meta></meta></head></html>

header部分の制作

今回のスライドショーの主なポイントブラウザー幅一杯にスライドを表示させる 左右の画像は半透明のブラーがかかっている レスポンシブサイトなので、フリックにも対応 レスポンシブ対応サイト制作wideslider版 black-flag.net

既存サイトのトレース

<html lang="ja"> <head> <meta charset="utf-8"> <title>キリントレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(function(){ $('.m…</link></meta></meta></head></html>

スマートフォンサイトでの電話番号とメールアドレスの扱い

スマートフォンの機種によっては数字が3桁以上並んでいると勝手に電話番号と認識してしまい、タッチすると電話番号が掛かってしまう場合があります。 ただ、この機能自体はスマートフォンの持っているメリットでもあるので、 リセットのようにまず最初に数字…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

スプリットレイアウトの作成

スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…

既存サイトのトレース|全面レイアウトその1

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像…

フルードグリッド

授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。 フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイア…

レスポンシブ演習

2カラムレイアウトをレスポンシブに作り変えましょう。 ヘッダー画像・バナー画像は自身で用意 使用画像 バナー見本 バナー素材 作例PCレイアウト タブレットレイアウト スマホサイト レスポンシブ化のソースコード index.httml <html lang="ja"> <head> <meta charset="utf-8"> <title>Pickupstream</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px~959px スマートフォンサイズ 767px以…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

レスポンシブデザイン基礎1

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

レスポンシブデザイン対応のHTMLテンプレート素材

photoshopvip.net