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

ダイナミックフルードレイアウト

レイアウト設計

ワンキャンバスレイアウト

レイアウトの設計

シフトレイアウト

レイアウトの設計

固定幅+フルードグリッドレイアウト

レイアウトの設計

ドロップレイアウト

レイアウトの設計

フルードレイアウト

レイアウトの設計

ワンカラムレイアウト

レイアウトの設計 HOME ABOUT SAMPLE TIPS Responsive Web Design ウェブは柔軟なメディアである テキスト文書のみであったWebをデザインするという考えが生まれて間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。 そして制約されたサ…

レスポンシブWebデザインを構成する要素

レスポンシブWebデザイン 目的と手段を逆転させない フルードグリッド #content { width: 100%; } フルードイメージ img { max-width: 100%; height: auto; } メディアクエリ CSS3でデバイスの解像度・画面の幅・向きなどの値を条件に別のスタイルを指定する

HTMLを書き換える

HTMLを書き換える 要素を取得する・コンテンツを書き換える <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLを書き換える</title> <script> function rewrite() { var today = new Date(); var str = document.getElementById('choice'); str.textContent = today; } </script> </head> <body onLoad="rewrite()"> </body></html>

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

if文 演習課題

消費税計算のプログラム <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税計算のプログラム</title> <script> function taxPrice() { //閲覧者の入力の値を取得 var price = prompt( '価格を半角数字で入力して下さい', '' ); //prompt()で習得した値は、文字列になります //文字列は、数値に変換しないと演算には</meta></head></html>…

条件分岐 - if文

スクリプトには3通りの進み方がある(実行する流れ) 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき(falseのとき)は、処…

演算子

式(expression) PHPの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり…

変数(variable)

変数(variable)とは 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り…

JavaScriptをHTMLに書く

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

出力(処理の結果を表示)

3種類の出力 console() で出力(検証ツールへ出力) alert() で出力(ダイアログボックスへ出力:手軽に使えますがWebサイトで使用する機会はあまりありません) document.write() で出力(ブラウザーの内容を書き換えて出力) コンソールに出力 「コンソー…

JavaScriptとは

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScript ブラウザを操作するためのプログラミング言語 JavaScriptを使うと、静止したデータであるHTMLやCSSを、その場…

共通部分を先に作る

仕上がりイメージを作る ラフまたはワイヤーフレームを作る。 ヘッダー グローバルナビゲーション メインビジュアル メインエリア サイドバー フッター 共通部分を先に作る サイトの完成イメージをもとに共通部分を先に作る デザイン・レイアウトのためにdiv…

PC版とスマートフォン版サイトを自動振り分けする方法

.htaccessファイルを使ってアクセス先を自動振り分けする方法 前提条件 (1) SPディレクトリが、PCディレクトリのサブディレクトリになっている。 (例) PCサイト : http://example.com/ SPサイト : http://example.com/sp/ (2) 同一ページは同一のファイル…

Font Awesomeの導入方法

Font Awesome アイコンフォント HTMLにclass名を設定するだけで、簡単にアイコンを表示できます Font Awesome CDN CDN(Contents Delivery Network) https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css Font Awesome 用のCSSを…

和文のWebフォントサービスを使う

Webフォント Webフォントは、ローカルで確認できない(Webフォントサービスで登録したサイトにアップロードすることで確認できる) Webフォントサービスを利用するためのサイト(ドメイン)が必要 TypeSquare 株式会社モリサワが運営しているWebフォントサー…

Webページの「フォント」と「テキスト」

字体と書体の違い

Google Maps JavaScript API

Maps JavaScript API http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無> ルート検索マップ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> </meta></head></html>

Google Mapsの設置

GoogleMap 「アクセス」のページ(#access)では、Googleマップを利用して地図を表示します Google マップ <div data-role="content"> <h2 class="h1">アクセス</h2> <iframe width="500" ...中略... 大きな地図で見る</a></small> </div> Google Maps API iframeは使わずに、Google Maps API(http://code.google.com/intl/ja/apis/maps/documentation/javascr</iframe></div>…

ページトップへ移動するアニメーション

スクロールすると表示されるトップへ戻るボタン テキスト著者の解説 ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( windo…

レスポンシブWebデザイン - 実践課題

課題A TimeSwitch トップ 雑貨 ガジェット お出掛け 食べ物 お問い合わせ もぎたてトマトを美味しく食べたい! もぎたてのトマトを食べたくなって、ちょっと郊外にあるトマト農家さんの直売所まで行ってきました。ここの… 続きを読む 部屋を彩るカラフルな家…

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="style.css"> <script src="jquery-2.2.4.min.js"></script> <script src="jquery.mixitup.min.js"></link></meta></head></html>

ワイヤーフレーム

webdesignledger webdesignledger.com

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

メガドロップダウン

メガドロップダウン 手順 HTMLの文章構造を構築 CSSを記述 hover時の設定を記述 メガドロップダウンメニュー WORKS PRODUCT RECRUIT BLOG CONTACT WORKS DESIGN・HTML/CSS・SYSTEM 制作について紹介します。 DESIGN >コンセプトワーク >受賞リスト >実績…

2カラム以上のレイアウトはFlexbox

Flexbox CSS Flexible Box Layout Module Level 1 日本語訳 2016 年 3 月 1 日付 勧告候補 メリット CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並び…

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド

レスポンシブWebデザイン実践(1カラム)石垣島観光ガイド 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気…

Media Queries(メディアクエリ)

Media Queries(メディアクエリ) CSS3 CSS2からある、Media Type の拡張 スクリーンサイズに応じて、CSSを使い分ける デバイスの解像度に応じて、CSSを使い分ける Media Queries、IE への対応 IEでは CSS3 が使えません css3-mediaqueries-jsを使って対応さ…

Fluid Image(フルードイメージ)

Fluid Image(フルードイメージ) 画像のサイズをデバイスの可変に合わせて、画像の表示領域も変化させる手法 max-width: 100%; .box1 { height: auto; } .box1>img { vertical-align: bottom; max-width: 100%; } ただしこのまま、スマートフォンの幅に対応…

Fluid Grid(フルードグリッド)

Fluid Grid(フルードグリッド) レイアウトブロックの配置の祭に、固定した幅のピクセルではなく比率で指定することにより、デバイスの幅に対して柔軟にレイアウトする手法 ブラウザ幅を狭くするとそれに応じて可変します box-sizing: border-box; padding…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

アコーディオンメニューとは

アコーディオンメニュー 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探…

イベント

イベントとは ユーザーとWebサイトとの間でやり取りを行う処理を「イベント」と呼びます ユーザーイベント(キーボードやマウスを操作することで実行されます) ブラウザイベント(おもにWebブラウザに関連するイベント) イベントの設定 イベントを設定する…

関数とメソッド HTML・CSSの操作

jQueryの関数 jQueryは、関数オブジェクトです 「function」と表示され、jQueryがfunctionオブジェクトであることを示しています jQuery = window . jQuery = function( ){ }; jQueryメソッド jQuery関数が、jQuery関数オブジェクトがもつ関数オブジェクトで…

セレクタ

セレクタとは 名前・属性・状態などによりドキュメント内の要素を選択する機能(要素がオブジェクトとして返ってきます) $( '要素' ) jQueryでは、jQueryオブジェクトつまりインスタンスをを生成してからメソッドやプロパティを実行する jQueryオブジェクト…

はじめてのjQuery

jQueryとは JavaScriptのライブラリ https://jquery.com/ jQueryでできること HTMLドキュメントの横断操作 イベントハンドリング アニメーション Ajax(通信処理) 以上のことを簡単に使うことができるAPI(Application Programming Interface) 1系と2系 …

floatで作るカラムコンテンツ

CSS

floatで作るカラムコンテンツ http://placehold.it/ 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>The Café</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>HTML5新要素を使ったページ作成</h1> <p>ダミー画像は、http://placehold.it/ を利用する</p> </header></div></body></html>

アルゴリズムの構築

ボタンアクションとthis

AnimateCC(Flash Pro) 「Flash」は、「AnimateCC」として名前を変え、HTML5ベクターソフトとして進化しています Flash/AIR、HTML5 Canvas、WebGL、カスタムプラットフォームなど複数のプラットフォーム向けに配信できます インターフェイスはFlashのままの…

レスポンシブWebデザインの考え方

レスポンシブWebデザインの基本 メディアクエリを設定 ブレイクポイント(767px 以下の場合) <html> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .wrapA { overflo</meta></head></html>…

ボックスの並び順の指定

ボックスの並び順の指定 floatの値によってコントロールすることができます float: left; <html> <head> <meta charset="UTF-8"> <title>float:left;</title> <style> #container { width: 50%; height: auto; } .box { height: 100px; text-align: center; line-height: 100px; } .wrapA>.box { width: 25%; float: </meta></head></html>…

ボックスの分割と追加

ボックスを分割する 「%」指定をします 足して「100%」になるよう指定します <div id="container"> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div> </div> .wrapA>.box { background: #ECF7FD; border: 4px solid #689DD1; width: 50%; float:left; box-sizing: borde…

Webページにおける段組

段組とは 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字…

レスポンシブWebデザインの基本

レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には Fluid Grid(フルードグリッド) Fluid Image(フルードイメージ) Media Queries(メディアクエリ)…