Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

授業

6/27(金) 授業メモ

今日もグラフィックデザインでした。 作成した作品はこちらです。 文字変形 使用ツール等:ダイレクト選択ツール、グラデーションツール ※文字の変形は、文字をアウトライン化し変形したいパスをダイレクト選択ツールで選択し変形。 日本地図 使用ツール等:…

6/25(水) 授業メモ

今日の授業で、問合せフォームの作成確認をしました。 先生が作成で使用していたタグの意味をメモしました。 <th scope="col">見出しセル</th>scope属性を指定すると、そのセルがどちらの方向に対する見出しであるかを明示することができます。 値 row … そのセルが、横列に対する…

6/24(火) 授業メモ

今日の授業の流れは、 ①CSS3の演習テスト実施 ②Webフォント ③svg画像を作成 ④シンタックスハイライターについて ⑤zen-codingについて 〜メモ〜 ①GoogleFonts i ) GoogleFontsを開く ii ) 使いたいフォントを探す iii ) 選んだら 矢印マーク(Quick Use)を押…

CSS3 演習問題

CSS3 演習問題 の解答 【問1】CSS3で影をつける場合の、プロパティ名を2つ書きなさい 【答1】box-shadow text-shadow ※ 答えをクリックすると詳しい内容がわかります。 【問2】CSS3で影をつける場合、プロパティに設定する4つのパラメータ のうち、1つ目…

6/20(金) 授業

今日の授業は、書籍チラシを制作しました。 先生から提供されたチラシのデータをもとにIllustratorを使ってコピー作品を制作しました。3時間で完成出来なかったのでへこみましたよ。。。

カフェのフライヤーを作成(120mm x 120mm)

授業でカフェのフライヤー(CDジャケットサイズ)を作成しました。 白黒.ver カラー.ver カラー.verは、フライヤーではなくチラシになってしまいました。。。 失敗です。。。 先生のアドバイスは、 ①フライヤーとはチラシとは違う ②手にとってもらえるデザイ…

6/18(木)授業メモ

今日は、SublimeText3をインストールし日本語化、ビオレパッケージデザイン(花王社製品)。 ①SublimeText3をインストールし日本語化。 インストールは出来ましたが、日本語で表示させることが出来ませんでした。。。 メニューバーまでは出来ましたがね。 ②…

6/18(水)授業メモ

今日は、CSS3を使ってグラデーションの設定を学びました。 学校ブログ 7/29を参照 ★mozilla系のブラウザ用の命令 記述例 )background:-moz-linear-gradient(top, #990, #066); 解説 ) background:-moz-linear-gradient (方向, 開始色, 終了色); 方向の種類 …

6/17(火)授業メモ

今日は、HTML5とCSS3とPHPの授業でした。 午前の授業は、昨日につづきレスポンシブWebデザインです。 午後は、CSS3を使用し角を丸くするborder-radiusと、PHPでブログやYahoo!のトピックスのrssを取得する方法を学びました。 ①レスポンシブWebデザインは、固…

習得度確認試験5 の回答

Webサイト制作科 | 習得度確認試験5 【問1】セクションのヘッダー領域を定義するタグは何か書きなさい 【答1】header 【問2】一般的なドキュメント・セクションやアプリケーション・セクションを定義するタグは何か書きなさい 【答2】section 【問3】…

6/16(月)授業メモ HTML5

今日はHTML5でレスポンシブWEBデザイン、ボックスとテキストにシャドウを付ける。 ①可変レイアウトパターン:HTML+CSS 学校のブログ 2014-07-08の記事の「可変レイアウトパターン:HTML+CSS」をもとに進行。 ②ボックスとテキストにシャドウを付ける。 学校の…

6/12(木)の授業メモ

①PHPのメールフォーム 青地部を書き換え。 赤字部を追記する。 <table> <tr> <th><label for="name">お名前:<br><span>※必須</span>&nbsp;&nbsp;30文字以内</label></th> <td><input type="text" name="name" id="name" size="76" maxlength="30" placeholder="例:東京太郎" value="<?php echo h($name); ?>" required ></td> </tr> <tr> <th><label for="email">ema…</label></th></tr></table>

6/4授業メモ PHP

index.php

6/3授業メモ PHP

index.php …

5/29授業メモ PHP 

index.php …

問い合わせフォームの作成 -PHP-

今日の授業で問い合わせフォームの作成 しました。 まず、xampp→htdocs→phpの中にmailフォルダを作成し index.php check.php thanks.php init.php を作る。 -----index.php---- <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ入力フォーム</title> <link rel="stylesheet" href="css/style1.css"> </link></meta></head></html>

今日からPHP

今日からPHPの授業が始まりました。 まずテストサーバーを構築する所から始まりました。 授業ではXAMPPを使用します。 テキストは、10日でおぼえるPHP入門教室 第4版を使って行きます。 ①php.iniの編集 ②文字を表示 ③変数を記述 などをしていきました。 PHP…

[ jQuery ] Lightbox風モーダルウィンドウ - テキスト p217~222 -

画像をクリックすると下記のように拡大表示する。 <body><div id="container"><h1>jQueryを利用したモーダルウィンドウの作成</h1><ul> <li><a href="img/01.jpg" class="modal"><img src="img/th01.jpg" alt="シャンデリア"></a></li> <li><a href="img/02.jpg" class="modal"><img src="img/th02.jpg" alt="バラ"></a></li> <li><a href="img/03.jpg" class="modal"></a></li></ul></div></body>

[ jQuery ] eqセレクタ を使ってリスト画像を表示させる -

<script>$(function( ) { $('a:eq(0)').click(function( ) { $('img').attr('src', 'img/gerbera.jpg').attr('alt', 'ガーベラ'); return false; }); $('a:eq(1)').click(function( ) { $('img').attr('src', 'img/mountain.jpg').attr('alt', '山'); return false; …

[ jQuery ] 四角をクリックしてalertを表示

jQueryで四角をクリックしてalertを表示させる <style>#box { width: 100px; height: 100px; background-color: #F90; cursor: pointer;}</style> ※cursor: pointer; はマウスが四角の上に来たときに矢印から指にかわる。<body><div id="box"></div><script>$('#box').click(function( ) { alert('クリックされ</script></body>…

[ jQuery ] 子孫セレクタ -

複数のセレクターをスペース区切りで指定する事により、特定の要素の内側にある要素をさらに絞り込めることが出来ます。 <script> $(function( ) { $('.first strong').css('color', 'red'); });</script><body><h1>jQueryの練習(子孫セレクタ)テキストp30</h1><ul><li class="first"><strong>いぬ</strong>いぬいぬいぬいぬいぬ</li><li class="second"><strong>ねこ</strong></li></ul></body>…

[ jQuery ] クラスセレクタ -

クラスセレクタは、特定のclass属性を持つ要素に対して命令を実行します。 class属性の値に .(ドット) を付けたものをセレクターとして利用します。 <script> $(function( ) { $('.second').css('color','red'); });</script><body><h1>jQueryの練習(クラスセレクタ)テキストp29-30</h1><ul><li class="first">いぬ</li></ul></body>…

[ jQuery ] IDセレクタ -

IDセレクタは、特定のid属性を持つ要素を対象にします。 <script> $(function( ) { $('#first').css('color','red'); $('li#second').css('color','blue'); });</script><body><h1>jQueryの練習(IDセレクタ)テキストp28</h1><ul><li id="first">いぬいぬいぬいぬいぬいぬ</li><li id="second">ねこねこねこねこねこねこ</li><li id="third">さるさるさるさ</li></ul></body>…

[ jQuery ] h1を赤く liを青く

jQueryを使って h1を赤く liを青く しました。 <script> //jQueryの命令をここに記述 $(function( ) { $('h1').css('color', 'red'); $('li').css('color','blue'); });</script><body><h1>jQueryの練習</h1><ul><li>いぬ</li><li>ねこ</li><li>さる</li><li>きじ</li></ul></body>

[ jQuery ] 文字を赤くする

jQueryを使って文字を赤くなるように記述しました。 <html lang="ja"><head><meta charset="utf-8"><title>jQueryの練習</title><script src="js/jquery-1.11.0.min.js"></script><script> //jQueryの命令をここに記述 $(document).ready(function( ) { $('h1').css('color', 'red'); }); </script></head><body><h1>jQueryの練習</h1></body></html>

今日からjQueryの授業がはじまりました

今日からjQueryの授業がはじまりました。 jQueryの基本を理解するために Webの現場で使えるjQuery UIデザイン入門 を読みました。 jQueryはJavaScriptのライブラリのひとつなのだそうです! 私たちの学校では jQueryデザイン入門(ASCII社) をテキストとし…

DOMで文字色を設定

DOMを使用して文字色を赤に設定しました。 <html><head><meta charset="utf-8"><title>DOMで文字色を設定</title></head><body><h1 id="myid">DOMによる要素の指定</h1><script type="text/javascript">document.getElementById('myid').style.color = '#F00';</script></body></html>

windowオブジェクトを使って新規ウィンドウを開く

開くボタンを押して空の画像を開く。 <html lang="ja"><head><meta charset="utf-8"><title>ウィンドウを開く</title><script>function openWin() { var win = window.open('', '', 'width=550, height=480'); win.document.open(); win.document.write('<img src="img/01.jpeg">'); win.document.write('<form><p>'); win.document.w…</p></form></meta></head></html>

formオブジェクトを使って標準体重を計算

formオブジェクトを使って下図のような標準体重を計算できるように作成しました。 <html lang="ja"><head><meta charset="utf-8"><title>フォームの利用</title><script>function stdWeight(myForm) { var height, weight; height = Number(myForm.height.value); if(myForm.sex[0].checked) { weight = (height - 80) * 0.7; } e</meta></head></html>…

写真の上に文字をのせてみました

今日の授業で写真画像の上に文字をのせてみました。 ~作り方~ ①写真を準備する。 ②写真を「イメージ→色調補正→色相・彩度」を選択し彩度を-100にしてモノクロ写真に加工。 ③文字を適当な場所に配置する。 ④写真をコピーする。 ⑤コピーした写真レイヤーを…