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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

受講生作品が全て上位表示をする理由

SEO

Webライティング 受講生全員が、クライアントワーク制作の時点で、実践的な「Webライティング」の手法を学ぶから 単なる理論に留まらず、単語の順序から、何行テキストを書くと効果的かまで実践します ちょっとだけ秘密です Webマーケティング 既存のサイト…

卒業生の声 - フェリカテクニカルアカデミー

ハロトレWebデザインの勉強クラスの卒業生の声

ハロトレWebデザインの勉強 4月20日開講クラス受講生募集開始!

ハロトレWebデザインの勉強 フェリカテクニカルアカデミー www.felica.info 「Webサイト制作科」 平成29年4月20日開講クラス受講生募集!

はてなダイアリーからはてなブログへ移行

ハロトレWebデザインの勉強 新ブログに移行 「求職者支援訓練」が「ハロトレ(ハロートレーニング)」という愛称になることを機会に移行しました 数年ぶりに「Twitter」を復活しました。 担当している授業の内容をちょっとだけ書きます

ハロトレWebデザインの勉強

ハロートレーニング〜急がば学べ〜 公的職業訓練の愛称・キャッチフレーズが「ハロートレーニング〜急がば学べ〜」に決定 ハロトレでWebデザインの勉強 フェリカテクニカルアカデミーの場合 www.felica.info インターシップが充実 上位表示は、実践で行いま…

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ

アイシングクッキーのオーダーメイド 結婚式用はプティシュシュ アイシングクッキーのオーダーメイド アイシングクッキーのオーダーメイドのプティシュシュは、世界でひとつだけのアイシングクッキーを提案します。 結婚式やイベント用アイシングクッキーの…

カラムレイアウトの計算

Gridpx グリッドデザイン計算ツール | Webデザイン便利ツール http://www.kenjisugimoto.com/gridpx/ RQRWD レスポンシブWebデザインでの親要素に対する子要素の割合を自動計算します http://rqrwd.com/

形を捉えるには

ゲシュタルトの法則 人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向がある、という法則。 「要素が組み合わさることで全体が体制化される」という法則。 視知覚(目から得られる情報をもとに状態を把握するはたらき)に関…

Livoo! ITエンジニア

Livoo! ITエンジニア

プログラミング教育のMOZER | Webデザイン学習コース体験版

自宅学習 授業と平行して自宅でも復習してもらいます 新しい知識を学ぶと同時にWebを利用していく楽しさも体感してもらいます デイジーと秘密のメッセージ mozer.io

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…

超簡単デプロイ

WordPressのデプロイ ロカールのデータをリモートに移して正しく表示させる ローカルからのバックアップ 「ツール」→「全てをエクスポート」(例:wordpress.xml) 「wp-content」→「uploads」フォルダー 「wp-content」→「themes」→「mytheme」 リモートサ…

演習問題

PHP

問題 以下の問いに答える記述をしなさい 問01 現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい 問02 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい 問03 「こんにちは」の文字列の長さを、ブラウザに表示させなさい …

レイアウトの基本構造を作る

ヘッダーとフッターのボックスを作成する 《header.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title> <?php wp_title( '|', true, 'right'); ?> <?php bloginfo( 'name' ); ?> </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></head></html>

記事を投稿する

記事の投稿 「投稿」→「新規投稿を追加」 インポート 「ツール」→「インポート」 wordpress形式で「picnic-post.xml」を選択し、すべての投稿記事を読み込む インポートした記事には「カテゴリー」と「タグ」が設定されています 固定ページの内容 同様にイン…

サイト構築の準備

オリジナルテーマを有効化する サイト名とサイトの説明を指定する PICNIC 気の向くままに書き綴るブログ プラグインを有効化する 日本語関連の問題を修正するプラグイン「WP Multibyte Patch」を有効化します URLの形式を指定します 「設定→パーマリンク設定…

テーマの準備

テーマを構成するテンプレートファイル mythemeフォルダー(すでにその名前がある場合は、「picnic」というフォルダー名) ページの生成に使用されるテンプレート index.php:すべてのページの生成に使用されるテンプレート single.php:記事の個別ページの…

パーツの準備

サイト名 《テンプレート》 《CSS》

フォーム関連機能(2)

フォーム関連機能まとめ required属性 入力必須を指定します placeholder属性 入力欄に初期値として表示されます autofocus属性 自動フォーカスを指定する IE6・7対応する場合は「autofocus="autofocus"」と記述します autocomplete属性 入力候補を提示して…

フォーム関連機能(1)

フォーム関連の新機能 input要素の新しいtype属性 email メールアドレス search 検索テキスト url URL tel 電話番号 number 数値 date 日付 datetime UTC datetime-local ローカル日時 month 月 week 週 time 時間 range 範囲 color 色 フォーム関連の新しい…

フォームの新属性

HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…

Dreamweaverでformを作成

Dreamweaver 挿入ツールの使い方の注意点 コードビューとデザインビューでは挿入されるタグが違う formの場合、コードビュー:シンプル、デザインビュー:アクセシビリティ付加 挿入パネル(フォーム) 通常はパネルを使用することはありませんが、あえて機…

フォームの基本構造

フォームとは ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。 お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…

ポラロイド風写真を作る

Photoshopで簡単ポラロイド風イメージ 写真から作るのではなく、土台から作ることがコツ (1)新規ファイルの「背景」に色を塗る (2)レイヤーパレットの「新規レイヤーを作成」をクリックして 「レイヤー1」を作成する (3)ポラロイド風画像の土台の選択…

Windows 10デスクトップ使い方ガイド

Windows 10デスクトップ使い方ガイド(PDF) 以下、PDF内容の抜粋(リンクではありません)

面接プレゼン力

面接において最も大切なこと ふさわしい人間であることをいかにうまく伝えるか 相手にとってすばらしい選択であり、まさに適任者であうことをうまく表現できるか 「面接プレゼン力」ですべてが決まる 面接でありがちな失敗を避ける 面接における失敗 良い印…

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

クロスフェード

JavaScriptでクロスフェード jQueryのバージョンを確認する APIかダウンロードかを決める <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> Brand Spanking New <script type="text/javascript"> window.onload = function() { var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 ); } </script> 500はフ…

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery-2.2.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 スライド画像は</link>…

animateメソッド

animate()メソッド 現在の座標を基準として、指定した距離まで移動する <script> $( 'セレクタ' ).animate( { 'プロパティ': '値' } ); </script> プロパティは、キャメルケースで記述する animate()メソッド(1つのCSSプロパティを指定) <html lang="ja"> <head> <meta charset="UTF-8"> <title>animate()メソッド</title> <style> .box { wid</meta></head></html>…

viewportの指定

viewportとは viewportは、Web表示の仮想サイズを指定するもので、スマートフォンやタブレットでWebを閲覧したときだけ機能する設定 viewportを適切に指定しないと、PC用のレイアウトでWebページが表示されます(画面の幅が980pxとして) viewportの指定 液…

メディアクエリの書き方

メディアクエリを記述する順番 後から記述した書式指定によりそれより前に記述された値が上書きされます PC用とスマートフォン用の2種類の場合は、「〜以上」「〜以下」という条件分岐でできるため複雑にはなりません タブレット用も含めた3種類になると、…

レスポンシブWebデザイン

レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です A List Apart レスポンシブWebデザインのデメリット CSSの記述が複雑になる 無駄な処理が生じる恐れがある PCサイトに切り替えられない IE8以…

レイアウトの種類

CSS

レイアウト テキストP.108〜115 Webサイトのレイアウトは「カラム数」と「可変か固定」の組み合わせです 情報量や閲覧環境に応じて適切に選択する必要があります サンプルサイト サンプルサイト:Layout Gala 固定レイアウト(Fixed Layouts) コンテンツを…

減速スライド

減速スライド 次の画像がスライドしてきて減速しながら停止する 素材の準備 メイン画像の幅を決める(幅 800px 高さ 400px) サムネールの幅を決める(幅 160px 高さ 80px) 画像を最適化する(Photoshop) 幅・高さを必要な大きさの新規ドキュメントを作成…

タブパネル

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

アニメーション効果

CSSを操作してアニメーションを作る animate( )メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値…

表示・非表示、フェードアウト・フェードイン、スライドアップ・スライドダウン

要素を隠す hide( )メソッド display: none; にするメソッド 非表示にするスピードは、ミリ秒で指定する(slowは600ミリ秒、fastは200ミリ秒) 秒数で指定する場合は、「1000」が1秒 引数がない場合は、即座に非表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300p</meta></head></html>…

アニメーション

fadeIn/fadeOut jQueryObject.fadeIn(); jQueryObject.fadeOut(); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="styles.css"> <script src="js/jquery-2.2.3.min.js"></script> <script src="scripts.js"></script> </head> <body>…</body></html>

スタイルを変更する

css jQueryObject.css('プロパティ','値'); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="styles.css"> <script src="js/jquery-2.2.3.min.js"></script> <script src="scripts.js"></script> </head> <body> <div id="div1">div1</div> …</body></html>

セレクター(Selector) - 演習課題

jQueryのコードは「なにを、どうする」 セレクターは、HTMLから特定の要素を取得するための記法 CSSのセレクター構文を少しだけ拡張したもの $('セレクター')でHTMLのどの部分を操作するか決める その後、具体的な操作を記述する $()関数の戻り値 $()関数は…

メソッド

メソッド jQueryオブジェクトが持っているメソッドを実行する それに何かする スタイルを変更する css show /hide width / height アニメーションさせる fadeIn / fadeOut slideDown / slideUp animate 内容や属性を変更する text / html attr val addClass …

jQueryとは

jQueryとは JavaScriptのライブラリのひとつ ブラウザ依存を気にしなくてよい DOMの操作が簡単 記述の仕方は、CSSに似ている write less, do more. オープンソース(MITライセンス+GPLライセンス) http://iquery.com/ ダウンロードして利用する場合 2.xは、…

アクセス制限

見られたくないページを見られないようにするには 見られたくないページを閲覧不可にする robots.txt 「robots.txt」を置き、検索の対象から外す 認証を使う .htaccessによるBasic認証 パスワードで認証された場合のみ閲覧可能にする 見られたくないディレク…

スライス

スライスとは 画像を切って複数に分割する機能のこと スライスを使った基本操作(Photoshop CS5) スライスツールの使用方法 (Photoshop CS6) Photoshopでスライスし、パーツ画像を作成するコツと方法 【Photoshop】コーディングする時のスライス方法 現場…

演習(1)

CSS

ナビゲーション マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空き…

CSS3シャドウ

CSS3 ボックスシャドウ ボックスシャドウはボックスモデルの外側・内側に影を作ることができ、 「X軸・Y軸・ぼかし具合・色」を設定することができます。 また、カンマ(,)で区切ることによって複数の影を作れます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 ボックスシャドウ</title> <style> #bShadow1,</meta></head></html>…

角丸をつける

角丸(かどまる)をつける border-radius CSS3代表的なプロパティ 角丸 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 角丸</title> <style> #radius1, #radius2, #radius3, #radius4 { border: 4px solid #F90; width: 200px; height: 100px; margin: 30px 50px; } #radius1 { border-radius: 20px; } #radius2</meta></head></html>…

ブラウザの中央に表示

CSS

positionを使ったレイアウト 例1 ブラウザの天地左右の中央に表示されるよう記述しなさい 薬玉文様(くすだまもんよう) 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を…

positionによるレイアウト実習

CSS

positionとは テキストP.146〜154 positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、bot…