WEBデザインの学習 | ナイアルラトホテップ

このブログは池袋にあるフェリカテクニカルアカデミーで学んだ学習過程を記録するためのものです。HTML+CSS及びJavaScript、jQueryなど。

2015-01-01から1年間の記事一覧

CSS3によるanimation

bg-color部分はIDなので自由な文字を設定できる。 0%と50%を同じ色にしないと急に色が変わったようになってしまうので、注意すること! rgbaによる透過指定もできる。 body{ background: #C6F; -webkit-animation: bg-color 10s infinite; /* --moz-animatio…

newsfeed作成

昨日より始まったSQL文とPHPにてnewsfeed作成が始まった。 query('SELECT * FROM news'); //var_dump($row) //->アロー演算子 /…

レスポンシブサイトの練習(全て固定値で列ごとにカラム落ち)

ポイントは2段表示になったとき3段目を横並びにする。 HTML <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1><img src="img/logo01.png" alt="美味しいおかず"></h1> <ul> <li></li></ul></header></div></div></body></html>

メールフォーム完成

PHP

本日でメールフォーム制作が終了した。 午後は少しだけDBに入った。百人一首のデータをさわった。index.php

sessionとヒアドキュメントについて

PHP

先週までの続きでメールフォームを作成した。sessioncheck.php内 ヒアドキュメントsend.php内

PHP01

PHP

echo,print:ブラウザに表示する$_POST['name'] $_GET['name']getは情報をurlに加えて送る。機密性が低い。履歴に残る。 postは不可視で送る。完全に見えないわけではない。明日までに本日の内容は覚える。

企業サイト制作プレゼンテーション3日目

本日がサイト制作プレゼンテーション最終日となった。photoshopについてCS5と6で大分違う。 カンプを作る際は左上を原点0,0で、余白を作らずぴったりで作る。(例:960px) 新規ガイドで数値入力してラインを引いていく。長方形ツールと矩形ツールの違いは?…

企業サイト制作【完成】

後から追記予定。知人のソフビフィギュア会社の一ブランドのサイトを制作した。仕様:モバイル対応(レスポンシブ) IE9以上より対応構想:約1週間 画像加工:約1日 コーディング:1週間wordpressでのテーマ制作は初めてでもろもろの仕様について理解してい…

企業サイト制作プレゼンテーション2日目

本日は制作した企業サイトのプレゼンテーションの2日目となった。 私も本日発表した。先生よりの指摘記事が増えた時にサイドバーに人気記事などを出したほうが良いとのこと。→プラグインにより実装予定あとは記事の下部に関連記事を出したり、rssリーダーな…

企業サイト制作プレゼンテーション1日目

いよいよ本日より5月初めより取り掛かっていた企業サイト制作の発表が行われた。メモ 黒字に赤文字は視認性が悪いのやってはいけない デザインとして行間の空きより外枠の空きが少ないのはダメ フォントについて太いフォントを使うと途端に素人っぽくなる 格…

背景画像を画面いっぱいに表示する

注意点として画像は必ずPNG24で作る。 そのままではサイズが大きいため、圧縮する。 →https://tinypng.com/ body{ background-image:url(background.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed…

html5のテンプレート(IE対策)

IE対策のため記述を追加。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>

職業能力基礎講習

職務経歴書は力を入れて書く。word、excel等を利用して作成。面接のポイント お辞儀は静止 面接官の目を見る 「ハイ」と言ってから答える 質問は必ずする→前向きな質問 違う職種でもどういう風に仕事をしていたかが、企業にとっては気になるポイントです。 …

企業サイト制作03

ワイヤーフレーム&カンプについて相手とやり取りして、お互い考えと違うものにならないように作る。 お金のために必要。ワイヤーフレームは沢山作る HTMLがドキュメントである以上、ヘッダーフッターは必ず必要。 仕事では100%まずは手書き。手書きできない…

企業サイト制作02

金曜に引き続き一日企業サイト制作をした。 今週中に先生に途中段階をチェックして貰う必要がある。企業サイト制作についてだが、クライアントから素材を受け取れるのが今週末おそらく日曜と、かなり遅くなってしまう見通しだ。 すでにあるクライアントのブ…

企業サイト制作01

授業開始とともにハローワークに提出される月一テストを受けた。 今回の内容はjQuery。その後、6月頭発表の企業サイトの課題制作をした。 クライアントの商品内容をエクセルにまとめるなどして把握に努めた。 紙にラフを書きイメージを固めた。当初wordpress…

企業サイトプレゼンテーション(最終日)

今日は一日をかけて企業サイトのプレゼンテーション予定。店内の写真を撮るときのポイント居酒屋など空の店内を写してもしょうがない、 誰もがはやっているお店に行きたい。 なので人が沢山入っている写真を撮るべき。

Illustratorにてカンプ作成

ここをしっかりやると後のコーディングが楽になる body分を含めて作成する ※作成する際にはwebサイトとしての体裁や、情報の優先順位などを考えながら作る。 1200pt*1500pt前準備 Illustratorにて新規作成 web 1200pt*1500pt。ピクセルグリッドにチェック。…

jQuery タブパネル

午前中はjQueryによるタブパネルを自習した。 $(function(){ $(".panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); $('.tab li a').click(function(){ $('.tab li a.selected').removeClass('selected'); $(this).addClass('selected');…

HTML5_02

朝イチでHTML5のペーパーテスト。 その後以前作成した「うちのにゃんこ」サイトをHTML5でマークアップした。うちのにゃんこ <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> </head> <body> <div id="container"> <header> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します!</p> </header> <nav> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <…</ul></nav></div></body></html>

HTML5

HTML5での基本的な文法 HTML5ではDTDの指定が不要だが記述するのが一般的 大文字小文字でもどちらでも良い。metaタグは charset属性のみ <meta charset="UTF-8"> link要素・style要素・script要素の属性は不要 type属性は削除します 空要素の閉じ方 <br><br /> どちらの記述も可能。混在して</meta>…

サイトデザインについての説明+flashカルーセル

レイアウトについて 世の中にあるWEBサイトのレイアウトは大きく分けて二つある。 グリッド フリー グリッド+フリーが多い。 グリッドからはみ出しを作って見せるのが重要。 positionは重なりを作る際に使うことが多い。 過去はtableや画像を使って無理に表…

サイト制作課題+プレゼンテーション

Photo Logサイト制作Positionをいかに使うか。午前中に完成させるのは難しいらしい。Kitchen Club昨日作成したサイトについてのポイントアコーディオン部分はToggleを使うとスマート $(function(){ $('dt').click(function(){ $(this).next('dd').slideToggl…

祝日のため授業休み

本日は昭和の日のため授業は休みだった。 宿題となっていたPhoto Logサイトの続きを作成した。backgroundでカメラアイコンなどの位置を調節していたが、FirefoxとChromeで位置がずれることに気がついた。

サイト制作演習

朝一でjQueryテスト その後サイト作成課題CSS基礎演習 cafe67 ギャラリーをそれぞれの言語で作成 JavaScript jQuery ActionScript アコーディオンパネル演習 Kitchenware Club

JavaScript01

変数:(variabl) 変数宣言:データ型も必要 代入:演算の命令文であり答えではない プログラムは3つを分けて考える 初期値 演算 出力 出力 alert(); document.write(); console.log();

positionについて

relative:相対配置。要素の左上からの移動。領域は確保される。 absolute:絶対配置。親要素左上からの移動。領域は確保されない。親要素がある場合相対配置される。 fixed:実際にはjavascriptで書くことが多くCSSではあまり使わない。 ・演習課題

企業系サイト作成テスト

授業内5時間で画像制作からコーディングまで。キービジュアルにあわせて色彩計画を立てる。以下のサイトを作成した。 。

Photoshopを使用したボタン作成

・長方形ツールでオプションから固定値を入力する。 ←重要・スタイルは一度作ったらコピー&ペースト・枠線の境界が内側か確認する。

Illustratorによるボタン作成および表示

今日は一日かけてIllustratorによるsprite用のボタン作成および、擬似クラスとfloatを使い表示した。