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…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

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

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

既存サイトのトレース

既存のサイトをトレースする事は、非常に勉強になるので、積極的にやって行きましょう。 今回のようにコンテンツの多いコーポレートサイトは細かい箇所の処理が多く、PCで見せる物とSPで見せる物を明確に分け、しっかりとしたUI・UX設計が必要になってきます…

モックアップの完全版 Facebook+Devices

Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…

MixItUp

www.kunkalabs.com <html> <head> <meta charset="utf-8"> <title>mixItUp3の練習</title> <style> html,body,h1,p { margin:0; padding:0; } img { vertical-align:bottom; } body { overflow-y: scroll; } .container { width:900px; margin:50px auto; overflow:hidden; } .container > div { width:300px;…</meta></head></html>

bodyの幅によってimg画像を切り替える

まずは切り替えたい画像に指定の名前を付ける。 sp用の画像には「_sp」 pc用の画像には「_pc」 切り替えたい画像のimgタグに指定のクラス名を指定する。 <ul class="bxslider"> <li><img src="img/img_keyvisual_01_sp.jpg" class="switch"></li> <li><img src="img/img_keyvisual_02_sp.jpg" class="switch"></li> <li><img src="img/img_keyvisual_03_sp.jpg" class="switch"></li> </ul> …

データをフォームからデータベースに保存する

PHP

今回はブラウザー上のフォームで入力したデータをデータベースに自動保存出来るようにします。まずはXAMPPに新しいデータベース「form」を作ります。 その次に以下の内容でテーブルを作成。 カラムを作る際には、そのカラムのデータ型に注意しましょう。・主…

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

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

ライティングの課題「webの利便性と危険性」

webライティングの課題 今回のテーマは webの利便性と危険性 以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。 死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性 jp.wsj.com 今回の課題では Counter argument(カウンター・アーギュ…

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

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

フォームの作成

以下のようなフォームを作成しなさい入力画面 出力画面

PHP演習問題

PHP

問1 現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい。その際に曜日も一緒に表示させなさい。 問2 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい 問3 九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさ…

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

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

for文を使ったセレクトボックスのフォーム

PHP

input.html <html lang="ja"> <head> <meta charset="utf-8"> <title>セレクトボックス</title> <style> html,body,dl,dt,dd { margin:0; padding:0; } form { margin: 100px; } dt { float: left; width:200px; margin-bottom:30px; } dd { margin-left:200px; margin-bottom:30px; } </style> </head> <body> </body></html>

Illustratorで放射状のオブジェクトを作る

よくバナーなんかで見る、放射状の背景。こんなやつです。 http://retrobanner.net/archives/6923 http://retrobanner.net/archives/6895 作り方は色々なやり方がありますが、1番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整す…

PHPでの日付や時間取得

PHP

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列) 2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ) timezoneの設定 本…

チェックボックスの値を配列で渡す

PHP

<html lang="ja"> <head> <meta charset="utf-8"> <title>複数選択可の項目があるフォームの作成</title> <style> html,body,h1,dl,dt,dd { margin:0; padding:0; line-height:1.0; } form { width:60%; margin: 100px auto 0; } dt { width:30%; float:left; margin-bottom:40px; font-weight:bold; } dd { margin-left:30%;…</meta></head></html>

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

Facebookのページ・プラグインをレスポンシブ対応(可変)にする

基本的にFacebookのページプラグインは作成する際にプラグインの幅を決めなければいけません。(最小値は180、最大値は500です)空白にしてもデフォルト値である340pxが指定されます。 指定したwidthの値はコードの中にエンベッドで「data-width=""」と記述…

名刺を作る

名刺を作る際に気をつけるポイント 一般的な名刺のサイズは91mm x 55mm 海外の名刺のサイズは 89mm x 51mm Illustrator 名刺用ガイドの作り方 Illustrator で名刺用のガイドを作りましょう。名刺のサイズは91mm x 55mm(横)ですが、裁断する際に文字などが…

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

詳細ページの作成 詳細ページ <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>

WordPressを始めるための下準備

ここでは、WordPressのオリジナルテーマを作成する為の下準備を行います。 WordPressのインストール ダウンロードした「wordpress」フォルダーをテストサーバーの「htdocs」フォルダー内にコピーし、新規データベースを作成する。データベース名は適宜、文字…

WordPressとは?

WordPressとは WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。 WordPressのテンプレートはすべてPHPである…

.htaccessの作成

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

PHPでのif文

PHP

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

GETとPOSTの違いと使い分け

PHP

PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…

学生症候群(がくせいしょうこうぐん) 英:student syndrome

納期のある作業を行う際に、余裕時間があればあるほど、実際に作業を開始する時期を遅らせてしまうという、多くの人間に見られる心理的行動特性のこと。 人間は、やるべき仕事に時間的な余裕を感じると、「後でやっても間に合う」と考えてしまい、すぐに着手…

XAMPPとMAMPの文字コードとタイムゾーンの設定

PHP

授業ではXAMPP・MAMPを使用してPHPおよびWordpressの授業を進めて行きます。これらを使用する時に気をつけないといけないのが、文字コードの設定です。 XAMPP・MAMP共にドイツで開発されたソフトであるため、初期設定のままだと日本語を使用した時に文字化け…

ページローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

PHPとは

PHP

PHPとは? HP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

コーディング規約

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

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

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

css3のfilter機能

css3のfilter機能を使うと今までPhotoshopなどで行っていた画像加工を簡単に加える事が出来ます。 対応ブラウザー (※自身で最新の情報を確認してみましょう)Can I use... Support tables for HTML5, CSS3, etc 使用できる効果使用できる効果は約10 種類ある…

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

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

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

webデザインにおける配色

brian.hatenablog.jp www.m-hand.co.jp 色彩と配色|伝わるデザイン

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザーに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。。 【問02】【問01】で記述…

robots.txtで検索エンジンのクローラーを制御する

robots.txtとは robots.txtとは、GoogleやYahoo!などといった、自サイトの情報を取得(クロール)するプログラム(クローラー)を制御するためのテキストファイルです。例えば、特定のファイルや、ディレクトリをクロール禁止に指定することで、それらの関連ペー…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng」 画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。 このTinyPNG、実は中で動いて…

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。もちろん便利なプラグインはありますが、このようなシンプルな動きはプラグイ…

jQueryをスマホの時だけ動かす

今回作成したハンバーガーメニューをウィンドウをリサイズしても、ちゃんと動くようにしてみましょう。 .resize( ) ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理…

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…