webサイト制作の勉強|1月ブログ

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

レスポンシブデザイン

レスポンシブレイアウト|フルード+固定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブデザイン・可変+固定レイアウト</title> <style> html,body,h1,p { margin: 0; padding: 0; } body { background: #ddd; } #container { width: 960px; margin: 0 auto; background: #FFF; } header { width: 100%; height: 300px; background: #F99495; }</meta></head></html>…

レスポンシブサイトでのcssスプライト

前回の授業で作った企業サイトにナビゲーションを追加します。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。 さらに参考サ…

slideToggleに合わせてテキストを変更させる

今回は以前作った既存サイト(キリン)の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。slideToggleの動きに合わせたスイッチの作成 以前はtoggle…

既存サイトのトレース ニュースリリース部分

PCレイアウト タブレット(959px〜641px) スマホ時(640px以下) このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良…

モバイルファーストサイトの制作 PC・タブレット部分

レスポンシブサイトのタブレット・PCレイアウトを完成させます。 作例http://yachin29.webcrow.jp/sp-pc/ 今回のブレイクポイントはPC 960px以上 タブレット 768px~959px スマートフォン 767px以下 タブレット・PCレイアウトを完成させる為に行うことHTMLに…

モバイルファーストで制作しているサイトにjQueryを導入

今回のコーポレートサイトには複数のjqueryを導入します。 タブパネル アコーディオンパネル ハンバーガーメニュー キービジュアルのスライダー widthによる画像置換 以上のように今回は多くのjQueryを導入する事になりますが、1つ1つしっかりと動きを理解…

モバイルファーストを意識したレスポンシブデザインサイトの制作 1

モバイルファースト モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際…

スマートフォン専用サイトの制作・詳細ページの作成

詳細ページの作成 詳細ページ <html lang="ja"> <head> <meta charset="utf-8"> <title>空飛ぶペンギン - エモトカホリ作品</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </meta></meta></meta></head></html>

スマートフォン専用サイトの制作

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。 スマートフォン専用サイトなので、HTML5とCSS3を積極的に使います。 トップページ <html lang="ja"> <head> <meta charset="utf-8"> <title>スマートフォン専用サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

.htaccessの作成

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

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

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

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

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

シングルページの作成

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。 今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み google…

placehold.it を使ったレスポンシブレイアウトの演習

yachin29.hatenablog.com 「placehold.it」は可変にも対応しているので、レスポンシブレイアウトの演習にも非常に便利です。 <html> <head> <meta charset="utf-8"> <title>レスポンシブ演習</title> <meta name="viewport" content="width=device-width"> <style> html,body,ul,li { margin:0; padding:0; } ul { list-style:none; } img { border:0; verti…</meta></meta></head></html>

フルードグリッド

授業で作った固定カラムレイアウトの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"> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>

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

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

画像の可変方法

画像をレスポンシブに対応(可変)にするには2つの方法があります。 img要素の場合はフルードイメージ化(max-width:100%) background画像の場合はbackground-sizeを指定します。この2つの方法をしっかりと覚えていれば、画像をレスポンシブに対応(可変…

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

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

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

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