/* Google Analytics ▽ */ /* Google Analytics △ */

WEB制作の勉強メモ / 猫脳人間

HTML CSS JavaScript ActionScript jQuery WordPress PHP Illustrator Photoshop Flash … 猫サイズの脳でも覚えるぞ と…

株式会社エービック 健康補助食品輸入販売:企業サイト・ショップ紹介

制作サイト&ショップを公開しました。 WEB制作の勉強中に受けた依頼の一つで、 会社のウェブサイトと、ショップの構築の依頼で、 WEBサイトとショップ構築の同時進行になり、 昨日やっと同時公開となりましたので、 こちらから、リンクを兼ねて紹介。…

プログラミング用フォント Source Code Pro が日本語対応になった Source Han Code を Brackets に設定してみた

プログラミング用フォント Source Code Pro が日本語対応になった Source Han Code を Brackets に設定しようと思ったら…何故か、フォントが反映されない…。検索してみたら、以下のサイトがヒット。blog.quusookagaku.comこの方の対応方法で私も反映されまし…

スマートフォン対応サイト、カテゴリ分けjQuery

スマートフォン対応サイト スマートフォンサイトの特性を知る - WEBサイト制作の勉強yachin29.hatenablog.com Photoshopの機能拡張(エクステンション) CSS3Ps - free cloud based photoshop plugin that converts layers to CSS3 styles.css3ps.comフォト…

PHPの授業:記事の修正等

PHPの記事を修正する授業の一環 ※授業中の記述です。 完成ではありません。PHP: end - Manual $_SESSION['DELETE'] = array(); $_SESSION['INSERT'] = array(); $_SESSION['UPDATE'] = array(); unset($_SESSION['DELETE']); unset($_SESSION['INSERT']); un…

Photoshop の機能を学習

Photoshop の機能をいろいろ学習 カフェのヘッダー画像を作る 切り抜き合成 乗算・スクリーン合成 画像の中の消したい部分の加工 『ぬりつぶし』『コンテンツに合わせる』 Photoshopによる画像制作 - WEBサイト制作の勉強yachin29.hatenablog.com 画面全体に…

バナー作成・画像作成の練習

バナー、画像作成の練習 実際にあるサイトの画像を、 いかにそのままの表現の画像を 一から作れるか。イラストレーターで、画像右の模様をトレース。 文字入れ、着色、影もイラストレーターで加工。 レイヤーを保持したまま、PSDファイルに書き出し、 影…

NOTO FONT 〔no □〕 □=豆腐

コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを"豆腐"と呼んでおり、Webから取り除くためにNoto(No Tofu)フォントを作った※Noto - Wikipedia より Google Noto Fonts Noto - Wikipedi…

PHPの授業(DATABASE)

今日のPHPの授業内容 ※途中なので、他の日に改造しながら学びます。 index.php (記事のタイトル一覧を表示するファイル)

PHP のテスト(月1のハロワ提出分)

【問01】 変数「$a」に「1000」を代入し、 変数「$a」の値をブラウザに表示するよう記述しなさい。 【問02】 フォームの送信方法の指定は form タグのどの属性に行うか書きなさい。 【問03】 フォームに入力したデータを送信する際の移動先の指定は form タ…

my SQL の授業

■ SELECT文 SELECT カラム名 FORM テーブル名 ■ INSERT文 INSERT INTO テーブル名 挿入先カラム名 VALUE ■ UPDATE文 UPDATE テーブル名 SET カラム名=値; ■ WHERE句 UPDATE `ultraseven` SET `sub_title`='明日学校' scenario_writer='島田' WHERE ep_num=50…

PHP の授業(6日目) メールフォーム完成

PHP

PHP の授業。メールフォームがひとまず完成 ※ あくまで授業の中での完成です。 他の人に参考になる内容かどうかは分かりません。 index.php

PHP のテスト(03) メールフォーム

PHPのテスト(03) メールフォームsession_save.php というファイルに session を使い、データを保存した。 session_save.php 以下の問いに答えなさい 【問1】 session_save.php で保存した3項目を変数(任意)に代入しなさい。 【問2】 [問1] で作…

WordPress 開発者インタビューのリンク

マット・マレンウェッグ インタビュー 「ユーザーに完全な自由を提供した」WordPress創始者が語る、世界一のCMS誕生ストーリーlogmi.jp 「共通のオフィスはもたない」世界各国のメンバーで運営される、WordPressのビジネスモデルとは?logmi.jp 「世界の70億…

PHPの授業(5日目)

PHP

index.php

PHPの授業(4日目) (ソースのみ説明無し)

PHP

※PHP初学者の記述です。 教えてもらっている途中の記述ですので、まだまだ実際には使える記述にはなっていません。

PHPのテスト(02) メールフォーム

<form> <p> <label for="name">お名前: </label> <input type="text" name="name" id="name"> </p> <p> <label for="email">Eメール: </label> <input type="text" name="email" id="email"> </p> <p> <label for="opinion">ご意見: </label> <textarea name="opinion" id="opinion"></textarea> </p> </form>

PHPの授業メモ

PHP

index.php <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問合せフォーム|初めてのPHP</title> </meta></head></html>

PHP のテスト (01) メールフォーム

【問】 名前、年齢、ご意見、 の情報を入力する <form> の内容を書きなさい。 <label> を使用する。 送信先は check.php とする。 POST を使う。 名前、年齢 は、<input> を使用する。 以下に記述してみよう。 【答】 <form action="check.php" method="post"> <label for="namae">お名前: </label> <input type="text" name="name" id="namae"> <label for="nenrei">ご年齢: </label> </form></label></form>

2015年07月07日の授業。MediaQuery レスポンシブデザインの初歩のおさらいとCSS3で背景アニメーション

レスポンシブデザイン初歩のおさらい レスポンシブデザインのまとめ - WEBサイト制作の勉強yachin29.hatenablog.com 固定カラムレイアウトをフルードグリッドにする - WEBサイト制作の勉強yachin29.hatenablog.com CSS3でアニメーション CSS3によるアニ…

WEBサイトをスクリーンショット・キャプチャするソフト、アドオン

よくパソコン画面のスクリーンショットを撮影してブログに投稿する事があります。 ウィンドウのみをキャプチャしてくれるのはよく見ますが、 ブラウザのウィンドウの内側をキャプチャしてくれる機能のソフトって・・・ ・・・・・、探してみたらありました。…

2015年07月06日の授業のメモ MediaQuery、 WordPressインストール

MediaQuery 演習(1)1カラム - Webデザインの勉強 | Webサイト制作科 6月15日開講クラスd.hatena.ne.jp 演習(1)考え方 - Webデザインの勉強 | Webサイト制作科 6月15日開講クラスd.hatena.ne.jp 演習(1)解答例 - Webデザインの勉強 | Webサイト制作科 …

PHP 2日目

PHP

PHP公式マニュアル PHP: PHP マニュアル - Manual ※以下は急いで貼りつけたソースです(記述ミスがある可能性があります)。 POST の場合 <h1>フォームを動かす</h1> <form action="form_receive.php" method="post"> <p>お名前:<input type="text" name="your_name"></p> <p>ご年齢:<input type="text" name="your_age"></p> <input type="submit"> </form>

PHP の授業開始

PHP

PHPの授業開始 XAMPP - Wikipedia PHP: Hypertext Preprocessor form_get.php <h1>フォームを動かす</h1> <form action="form_receive_ge.php" method="get"> <p>お名前:<input type="text" name="your_name"></p> <p>ご年齢:<input type="text" name="your_age"></p> <input type="submit"> </form> form_receive_ge.php

レスポンシブ・ウェブ・デザイン、Google Image Search風ギャラリー の授業メモ

yachin29.hatenablog.comモバイル フレンドリー テスト CSS 一枚で記述する場合 行の上の記述が影響するので、 影響させない場合は、リセットか、 上書きする指定が必要。 <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> @media screen and (min-width:641px) and (max-width:959px) { #container { widt</link></meta>…

Google Webmaster Tool と Google Analytics の参考リンク

アクセス解析・訪問者のクリック解析 が分かるよう Google Webmaster Tool と Google Analytics の設置や設定の参考リンク。 Google Webmaster Tool (アクセス解析)Google Webmaster Tool、 Google Search Console に名前が変わった?Google Search Consol…

WordPress おススメプラグインメモ (とある学習サイトで紹介されていた )

「WordPress のおすすめプラグイン」と紹介されていたもの 下記にリンクを貼っていますが、WordPress の 管理画面>プラグイン>新規追加 から検索が可能です。 以下説明文中の 「WP」は 「WordPress」を指します。 多機能・複数機能系プラグイン Jetpack …

Google モバイルフレンドリーテストサイト。 ブラウザでモバイル表示を確認する方法の参考リンク

Google モバイルフレンドリーテスト Mobile-Friendly Test 参考ブログ パソコンのChrome、Firefox、IE11、Safari、Operaブラウザでスマホ表示の動作確認をする方法nelog.jp ユーザーエージェント一覧 userAgent一覧/ユーザーエージェント一覧 FireFox モバイ…

タブパネルの特定のタブに直接リンクして表示する。スライダー・カルーセル jQuery ライブラリ参考リンク

jQuery でタブパネルを使い更に任意のタブにダイレクトリンクする参考リンク [jQuery]別ページから特定のタブにダイレクトリンクする方法 | Japanese Style Web Design いろはクロスirohacross.net 他ページから指定したタブへダイレクトリンクする方法を探…

2015年06月17日(64日目)のメモ Favicon。jQuery Fancy Box

Favicon Faviconの設定 - WEBサイト制作の勉強yachin29.hatenablog.com 画像を .ico ファイルに変換してくれるWEBサービス http://ico.bradleygill.com/index.php アイコン(icon)変換ツール - Favicon Converterfavicon.qfor.info Fancy Box 高機能なLi…

スタイルシートで表現するボタンのアイディア参考リンク

CSS

グラデーション・ジェネレーター 画面上でグラデーションやボタンサイズを指定すると、 そのCSSコードを育成してくれる。Ultimate CSS Gradient Generator from ColorZillawww.colorzilla.com ボーダーラインで寸法が変わってしまうのを防ぐため、 ボーダ…

Instagram のユーザー情報を取得+写真をサイトに表示+それを自動スクロールする jQuery

Instagram の写真情報を取得してサイトに表示させ、 自動的にスクロールさせる。 これを jQuery と そのライブラリを使って設置してみました。設置したものが ↓ です。 Test WEBSITE | Silent Cait 以下、この設置したもののままになるようなソースの記述を…

ショッピングカートサービス『カラーミー for ロリポップ』について

登録可能商品数: 30個配送方法: 1つ 希望の配送法を指定。 決済方法: 3つ (以下から選択可能) 商品代引 ゆうちょ振替 クレジット(イプシロン) コンビニ(イプシロン) ネット銀行(イプシロン) ペイジー(イプシロン) 住信SBIネット銀行(イプシロ…

2015年06月12日(○日目)のメモ Photoshop でスライス→レイアウト、コーディング

float したものは、 margin が相殺されない。。。。 Photoshopによるスライスとコーディング - WEBサイト制作の勉強yachin29.hatenablog.com

2015年06月11日(60日目)のメモ

SEO

Googleの検索アルゴリズムを理解する - WEBサイト制作の勉強yachin29.hatenablog.com Google検索エンジン最適化スターターガイド Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめcoliss.com » [2015年4月]Googleマップで自分の好き…

2015年 06月10日(59日目)のWEB制作の勉強メモ jQuery のテスト

【問 01】 jQuery とは 「 」 ライブラリです。 「 」 の中を埋めなさい。 JavaScript 【問 02】 jQuery 本体をダウンロードしないで、ネット上にあるデータを直リンクして使うやり方を何と呼ぶか書きなさい。 CDN ( Content delivery network ) 【問 0…

2015年 05月22日(46日目)のWEB制作の勉強メモ スティーヴ・ジョブズ、イムラン、デザインの歴史

Whole Earth Catalog Stay Hungry Stay Foolishwww.wholeearth.com whole earth catalog - Google 検索 The Next Whole Earth Catalog: Access to Tools作者: Stewart Brand出版社/メーカー: Random House Inc (P)発売日: 1981/11/01メディア: ペーパーバッ…

2015年 05月016日(休日)のWEB制作の勉強メモ オンライン授業でモバイル対応のサイト作り、サイトを白黒にして見る

オンラインで授業を受けられるサイト schoo (スクー) WEB-campus の生放送を見たメモ schoo WEB-campus 無料動画のオンライン学習サイト - schoo WEB-campus(スクー)schoo.jp schoo内 お役立ち記事 記事一覧 | デザイン学部 - schoo(スクー) WEB-campuss…

2015年 05月14日(40日目)のWEB制作の勉強メモ jQuery:Crossfade, Slide, LightBox

CODEPREP CODEPREP -オンラインでプログラミングを学ぼう-codeprep.jp はじめてのHTML はじめてのCSS はじめての JavaScript はじめての jQuery の4つはクリアする事。 Cyllabus (シラバス) マネして学べる、プログラミング学習サイト「シラバス」…

2015年 05月11日(37日目)のWEB制作の勉強メモ jQuery の授業スタート

jQuery の授業スタート 「教科書は当然読んできてますよね?」…と。 Download jQuery | jQuery のページからhttp://code.jquery.com/jquery-1.11.3.min.js をダウンロードjQuery Migrate Plugin をダウンロード Web制作の現場で使うjQuery デザイン入門 【楽…

2015年 05月08日(36日目)のWEB制作の勉強メモ JavaScriptのテスト

JavaScript のテスト 【問01】JavaScript の標準化されたものをなんと言うか? ECMAScript 【問2】js フォルダー内にある sample.js を読み込む記述をしなさい <script type="text/JavaScript" src="js/sample.js"></script> 【問03】警告ウィンドウを表示するスクリプトを記述しなさい(値は不要) alert('警告'); 【問04…

2015年 05月07日(35日目)のWEB制作の勉強メモ JavaScript、Flash

JavaScript JavaScript の問題を解く確認テスト - Webデザインの勉強 | Webサイト制作科 3月16日開講クラスd.hatena.ne.jp Flash フェイドイン・フェイドアウトを重ねて(クロスフェード)次の画像へスライドしていき、最後のコマのステージ全体をボタンにし…

2015年 04月30日(33日目)のWEB制作の勉強メモ Flash ActionScript2.0

Adobe Flash CS5.5 と ActionScript2.0 を使って 車のイラストを動かし 車の動きをボタンでコントロールする この記事内のリンクです↓ (長い記事になってしまったため;) この記事について Flash CS5.5、CS6 のダウンロードの方法 Adobe Flash CS5.5 と Acti…

Adobe Photoshop Lightroom を使ってみた

授業では Lightroom は使わないのですが、授業を受けた事をきっかけに、Adobe Creative Cloud のソフトウェアを使えるようにしまして、せっかくいろいろなソフトが使えるので、初めて、Lightroom を使ってみました。 Adobe Photoshop Lightroom 6 日本語版 …

JavaScript ネット迷子中のメモ

JavaScript を知るため検索中に見つけたサイトJavaScript超初心者によるJavaScript入門講座piyo-js.com 「超初心者による」 と書かれていますが、 初心者に分かりやすく説明されていると思いました。 W3 schools http://www.w3schools.com/ HTML、CSS、JavaS…

勉強中の検索中に見つけた情報ページやサービス

JavaScript 関数と関数スコープdeveloper.mozilla.org MDNによる JavaScript リファレンス。 なかなか頭の中に定着してくれないプログラミング用語や 関数やら、オブジェクトやら・・・ Google流 JavaScript におけるクラス定義の実現方法 Google流 JavaS…

このブログをカスタマイズする (準備編)

基本、無料レンタルブログはHTML部分がいじれないので、 (HTMLを部分挿入が可能な箇所はあり) カスタマイズは全て CSSで行います。全てを1からデザインするのは大変なので、 ひとまず、気に入っているスキンを元にカスタマイズします。 ↓はて…

2015年 04月19日(休日)のメモ。ゲームでプログラミング学習

新たに見つけた学習サイトや、WEB や blog に関するサービスを記録。 CODE COMBAT CodeCombat: Learn to Code by Playing a Gamecodecombat.com プログラミング学習サイト。 ロールプレイングゲームの中で、 キャラクターへの命令を全てプログラムコードの入…

2015年 04月16日(23日目・2ヵ月目スタート)のメモ。JavaScript の授業スタート

早くも、1ヵ月が過ぎ、この日から2ヵ月目がスタート。 少しずつ JavaScript の話はあったが、 この日から しっかりと JavaScript の授業がスタート。 JavaScript JavaScript は、(PHP などと違って)クライアント側で動く 今は サーバーサイドJavaScript …

2015年 04月01日(12日目)のWEB制作の勉強メモ CSSレイアウト

スタイルシートによるレイアウト まずレイアウトを紙に書く #sidebar がレイアウト上では左にあるが、HTMLの中の記述は、#sidebar よりも #content(サイト内の重要な部分)を先に書く!(必須) #wrapper(#content と #sidebar を包んでいる id) は、float …

2015年 03月31日(11日目)のメモ マークアップとCSS装飾

これまでにやったCSSの復習 S・E・O の話 XHTML 1.0 >|html| <br /> <img src="~" /> ||<などの、「 / 」は最近は書かなくて良い。 CSS:テキストのサンプルで練習 【楽天ブックスなら送料無料】HTML&CSS標準デザイン講座 [ 草野あけみ ]価格:2,570円(税込、送料込) …