サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
web-design-felica.hatenablog.com
2015 - 04 - 03 検索結果上位表示のための記述 セマンティックな マークアップ を効果的に実践 文書構造を最適化する 4つの段階(フェーズ) ロボット巡回 インデックス追加 アルゴリズム 適合 ペナルティ回避 内的要因のチェック ソースコード の最適化 検索エンジン にとってわかりやすいサイト ↓ 検索エンジン が評価するサイト ↓ 正しい ソースコード のサイト チェック項目 使用するタグの数 使用するタグの位置 使用するタグの誤った使用法 ソースコード のエラーを無くしていく CSS を記述する前に ブラウザー で確認する HTMLの記述にミスがないかを ブラウザー で確認する Firefox を利用する Firefox 拡張機能 HTML+ CSS の基本を練習する場合には必須 HTML Validator Web Developer ソースコード の最適化
2017 - 02 - 06 SQLを使う - SELECT文 データベース SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影:特定のフィールド(列)だけ取り出すこと 選択:特定のレコード(行)だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、特定の列のみレコードを取り出したりする基本的な検索方法 全レコード検索 SELECT文の基本的な構文は、「指定したテーブルから指定した列のデータを取得してください」という命令です SELECT 列名 FROM テーブル名; SELECT productnm, price FROM product; 複数の列を指定する場合は、,(カンマ)で列を区切ります 全列取得 全ての列を取得したい場合は、全ての列名を指定する代わりに、*( アスタリスク )を指定します
2017 - 01 - 13 式と演算子 PHP 式(expression) PHP の式の多くは、 演算子 (operator):演算するもの オペランド (operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり長い文字列をつなぎ合わせる 代入 演算子 数値の演算 文字列の演算 単項 演算子 代入を伴う 演算子 算術 演算子 で「四則演算」や「変数の結合」 <?php $ tanka = 300 ; $ suryo = 10 ; $ waribiki = 500 ; $ total = $ tanka * $ suryo - $ waribiki ; echo $ total ; 文字列結合 演算子 「. ドット」で文字列を連結する(ドット シンタックス ) <?php
2017 - 01 - 14 関係演算子と条件分岐(if文、switch文) PHP 条件(condition)の仕組みを知る 場合に応じた処理をおこなう 真(true)・偽(false)という概念のどちらかで評価されるものを、 PHP では「条件」と呼びます。 関係 演算子 条件をつくるために使う「関係 演算子 (relational operator)」 演算子 式がtrueとなる場合 == 右辺が左辺に等しい === 右辺が左辺に等しく型も等しい != 右辺が左辺に等しくない <> 右辺が左辺に等しくない !== 右辺が左辺に等しくないか、型が等しくない > 右辺より左辺が大きい >= 右辺より左辺が大きいか等しい < 右辺より左辺が小さい <= 右辺より左辺が小さいか等しい 関係 演算子 を使って関係を記述 <?php 5 > 3 ; //この条件の評価はtrueです 5 < 3
2016 - 06 - 17 EclipseにAptana Studio3を組み込む Aptana Studio3 HTMLの支援機能を利用する Eclipse に Aptana Studio3を組み込む 新規ソフトウェアのインストール http://download.aptana.com/studio3/plugin/install インストール終了後、再起動 HTML+ CSS の支援機能を使う パースペクティブ を開く 新規プロジェクト作成 新規ドキュメント作成 PHP パースペクティブ での作業 Aptana Studio3の機能を活かすWeb パースペクティブ を利用しない場合 PHP パースペクティブ でも入力支援機能を使った入力が可能 Zen Coding 導入 http://zen-coding.ru/eclipse/updates/ web-0818 2016-06
2016 - 06 - 18 PHPとは PHP でできること テキスト P.14〜 PHP とは何か Web開発に特化した プログラミング言語 PHP でできること PHP は、Webサーバー上で動きます Webページを動的に作成します PHP の入手先 PHP 公式Webサイト http://www.php.net 開発環境を構築する場合には、「 XAMPP 」や「 MAMP 」を利用します PHP とHTMLの違い 拡張子「. php 」をもつファイルは、 PHP の実行エンジンにかけられてプログラムがあれば実行し、その結果をHTMLなどに出力する仕組みになっています PHP を使う理由 Web開発に特化しており、多くのライブラリがあるから 習得が容易で、すぐに使えるようになるから すでに実績があり、不具合があっても修正されるから プログラミングとは テキスト P.18〜 プログラミ
2016 - 07 - 22 Progate - PHP基礎編 Progate - PHP基礎編 web-0818 2016-07-22 00:00 Progate - PHP基礎編 list Tweet 広告を非表示にする
2016 - 10 - 31 1か月授業内容まとめ - 書体指定とリセットCSS HTML+CSS 適切なフォントファミリー 日本語の書体指定で表現したい 日本語の場合、フォントメーカーの制約から自由な選択は出来ません font -family: "Hiragino Kaku Gothic ProN" , Meiryo , sans-serif; もし、 Windows で英数字は「 Verdana 」、 Mac で英数字は「Lucida Grande」にしたい場合は、 font -family: "Lucida Grande" , "Hiragino Kaku Gothic ProN" , Verdana , Meiryo , sans-serif; Windows でも綺麗な 明朝体 を表示する HG明朝は13pxから アンチエイリアス がかかる(MicrosoftOfficeをイン
2016 - 09 - 30 復習 - 正しい文書構造とページ遷移 HTML セマンティックな マークアップ セマンティック=意味をきちんと考えた(例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1~h6要素のどれで マークアップ すべきか) セマンティックな マークアップ によって、そのページは自然とマシンフレンドリーな状態になる。 セマンティックな マークアップ で制作したページは、 アクセシビリティ と SEO の両面で最適な状態になる。 その上で、ヒューマンフレンドリーと クローラー フレンドリーという視点で考える。 3日間のまとめ 以下のように表示させなさい 管理フォルダーの中に「season」という名前のフォルダーを作成する その中に「index.html」「spring」「summer」「fall」「winter」というフォルダー内にHTMLドキ
2016 - 09 - 24 初心者のためのCSS記述ルール HTML CSS 多すぎる情報に惑わされない 基本を理解することを優先する プロの方法を真似しない(プロの方法は、プロになってから!) CSS とは Cascading Style Sheets HTMLの要素をどのように修飾(表示)するかを指示する つまり、どう表示したいかというイメージに向かって値を記述していきます。 CSS のコーディング規約( Google ) 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/CSS Style Guide CSS はどこに書くか? 外部ファイルに CSS を書く方法 styleタグを使った CSS を書く方法 HTML要素に CSS を書く方法 外部ファイルに CSS を書く方法 <!DOCTYPE html> < html la
2016 - 09 - 28 復習 - HTML文書構造 HTML チェックテスト HTML(HyperText Markup Language) P.014 CSS ( Cascading Style Sheets ) P.064 HTML5 DTD P.016 <!DOCTYPE html> 文字コード の指定 P.017 < meta charset = "utf-8" > CSS の外部参照 P.073 < link rel = "stylesheet" href = "css/style.css" > 外側の下を空ける P.092 h1 { margin-bottom : 20px ; } 内側を空ける P.092 p { padding : 20px ; } 下部に枠線を設定 P.075 p #content { border-bottom : 2px solid
2016 - 10 - 03 擬似クラス CSS リンクの色(擬似クラス:Pseudo-classes) 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク(未アクセス)のスタイル visited アクセス済みリンクのスタイル hover ポイント時のスタイル focus フォーカス時のスタイル active アクティブ時のスタイル ※focus と lang の指定は、IE6まででは対応していません。 まず「リンク時の設定」を理解しましょう。 「link(未訪問)」 「visited(訪問済み)」 「hover(カーソルがリンクに重なったとき)」 「active(リンクに対してアクティブな瞬間)」 リンクに疑似クラスを使用する際に
2016 - 10 - 04 縦ナビゲーション CSS ナビゲーション マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する 「li a」は、マウスの反応を受け取る「面」を指定する 《例》 < body > < ul class = "nav" > < li id = "new" >< a href = "#" > 新着情報 </ a ></ li > < li id = "info" >< a href = "#" > お知らせ </ a ></ li > < li id = "item" >< a href = "#" > 製品情報 </ a ></ li > < li id = "sho
2016 - 09 - 18 ボックスモデル CSS ボックスモデルとは 文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します 記述の順序は「外側のエリアから」が一般的です hail2u.net テキスト P.75
2016 - 09 - 27 リセットCSSと書体指定 CSS 初学者の CSS CSS を理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。 日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて1周間です 原理原則、現在の傾向といろいろあるWebの技術ですが、初めてなのだからプロに笑われるようなことでも、ひとつひとつ丁寧に記述し理解して行きましょう。 慌てる必要はありません。シンプルにいきましょう。 《サンプル》 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" > < title > リセットCSSを記述する前に </ title > < style > h1 , p , ul { color : #FFF ; }
2017 - 01 - 21 Responsive Web Design(レスポンシブWebデザイン) RWD Web閲覧環境の多様化 Android 端末の多様化 スマートフォン で表示されるWebページはより柔軟性のある実装を求められる状況にあります モ バイ ルファースト モ バイ ルファーストの実践とは、モ バイ ルインターネットの爆発的な成長にただ備えるだけではない。ユーザーが本当に必要とすることにフォーカスすることで、これまでできなかった方法での イノベーション が可能になる。( 『モバイル・ファースト(MOBILE FIRST)』 ) Web製作現場でのモ バイ ルファースト Web制作において スマートフォン にフォーカスすることでよりユーザーに近く、扱いやすいWebを提供するための1つの方法としての言葉 とくにレイアウトの考え方に焦点を絞ったものを指します モバイルサイト
2016 - 12 - 25 新-画像置換 JavaScript 画像の準備 Photoshop で、「幅600px 高さ400px」の新規ファイルを作成する 画像をレイヤーとして重ねる レイヤー名を連番にしておく レイヤーをファイルへ書き出し 「ファイル」メニュー →「 スクリプト 」→「レイヤーをファイルへ書き出し」 保存してから行わないと、トリミングしない前の大きな画像が書き出されます _0000_を削除するには アプリケーション > Adobe Photoshop CSn > Presets > Scripts > Export Layers To Files.jsx 以下のように書き換えます。(自己責任で!) サムネール画像の書き出し 「イメージ」メニュー →「画像解像度」 表紙を作る 「幅600px 高さ400px」のメイン画像の上に新規レイヤー「cover」を作成する 「c
2016 - 12 - 05 イベント駆動型モデルと関数 JavaScript イベントとは 何かのきっかけで処理を行うことを「イベント」と呼びます イベントが発生したときに対応する処理を呼び出す仕組みを「イベント駆動型モデル」と呼びます それぞれのイベントと任意の処理をあらかじめ関連付けておくと、「 イベントハンドラ 」と呼ばれる機能がイベントの発生を検知し、対応する処理を呼び出します イベントが発生 イベントハンドラ がイベントの発生を検知 イベントに関連付けられた処理を呼び出す 主なイベント 種類 発生するタイミング イベントハンドラ 名 load ページが表示されたとき onload click ページ上の部品がクリックされたとき onclick mouseover ページ上の部品に マウスカーソル が乗ったとき onmouseover mouseout ページ上の部品から マウス
2016 - 12 - 01 条件分岐 - if文 JavaScript スクリプト には3通りの進み方がある(実行する流れ) 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき(falseのとき)は、処理を実行せずスキップします if(条件式){ 条件を満たす場合に実行する処理 }else{ 条件を満たさない場合に実行する処理 } 条件式の書き方 条件式は、比較 演算子 を使って記述します 演算子 説明 使用例 結果 == 左辺と右辺が等しい場合はtrue 1 == 1 true != 左辺と右辺が等しくない場合はtrue 1 != 2 true < 左辺が右辺より小さい場合はtrue 1 < 1 false <= 左辺が右辺以下の場合はtrue 1 <
2016 - 11 - 30 演算子 JavaScript 式(expression) PHP の式の多くは、 演算子 (operator):演算するもの オペランド (operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり長い文字列をつなぎ合わせる 代入 演算子 数値の演算 文字列の演算 単項 演算子 代入を伴う 演算子 算術 演算子 演算子 説明 使用例 結果 + 数値の加算 1+1 2 + 文字列の連結 'Hello'+'World' 'HelloWorld' - 数値減算 2-1 1 * 数値の乗算 2*2 4 / 数値の除算 10/2 5 % 数値の剰余(除算の余り) 10%3 1 《+ 演算子 の挙動の違い》 <!DOCTYPE html> < html lan
2016 - 11 - 29 変数(variable) JavaScript 変数(variable)とは 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り返し使う言葉は「変数」として使う 1回だけ書いてコピーするという発想 変数の名前付けルール 変数宣言や型の宣言は必要ない 変数名の先頭は英文字かアンダースコアであること 変数名の2文字目以降は、英数字かアンダースコアであること(「- ハイフン」は不可) 変数名の大文字・小文字は区別される 予約語 について 変数名のルールとしてもうひとつ、「 予約語 は使えない」というものがあります。 予約語 とは JavaScript の言語自体に使われているさまざまな語句です。
2016 - 09 - 11 Adobe Brakets 導入 文字を入力するツール テキストエディタ ー Adobe Brakets Brackets は、HTML/ CSS / JavaScript で開発されている、HTML/ CSS / JavaScript 用の新しい オープンソース コードエディターです Webページ作成時点で Dreamweaver に入ります Webに特化した機能群 高度な拡張性 ダウンロード 「Download Brackets 1.7」のリンクをクリックしてダウンロード インストール Windows の場合「. msi 」、 Mac の場合は「. dmg 」をダブルクリックして インストーラ ーを起動しインストールます Brackets を起動します インストール後の画面(文字サイズは大きく変更後) 画面解説 メニューバー(一般的な機能にアクセスする際や
メディアクエリの書き方 レスポンシブ メディアクエリを記述する順番 後から記述した書式指定によりそれより前に記述された値が上書きされます PC用とスマートフォン用の2種類の場合は、「〜以上」「〜以下」という条件分岐でできるため複雑にはなりません タブレット用も含めた3種類になると、記述する順番が影響するため注意が必要です 「〜以下」を条件に記述する場合は、サイズが大きいものから記述します 「〜以上」を条件に記述する場合は、サイズが小さいものから記述します 複数条件の連結 「かつ」や「または」などで複数の条件を結ぶことも可能です AND条件 複数の条件を「かつ」で結ぶときは「and」キーワードを利用します @media screen and ( min-width: 480px ) and ( max-width: 640px ) { ................ } この場合、「画面の
ワークフローセマンティックなマークアップを効果的に実践文書構造を最適化する 4つの段階(フェーズ)ロボット巡回インデックス追加アルゴリズム適合ペナルティ回避 内的要因のチェックソースコードの最適化 検索エンジンにとってわかりやすいサイト ↓検索エンジンが評価するサイト ↓正しいソースコードのサイト チェック項目使用するタグの数使用するタグの位置使用するタグの誤った使用法 ソースコードのエラーを無くしていくCSSを記述する前にブラウザーで確認するHTMLの記述にミスがないかをブラウザーで確認するFirefoxを利用する ソースコードの最適化上位表示に必要な titleタグキーワードはなるべく左側に入れる文字数は、24文字程度(最大31文字)キーワードは、2回使わない最重要キーワードのみ2回使用は可体言止めが重複した状態にしない他のページと重複させないタイトルとページコンテンツを一致させる
ツールAdobe BraketsBracketsは、HTML/CSS/JavaScriptで開発されている、HTML/CSS/JavaScript用の新しいオープンソースコードエディターです インストール後の画面(文字サイズは大きく変更後) プロジェクトのルート化Dreamweaverでの「サイト管理」に相当ローカルサーバーにも対応しており、プロジェクト毎にローカルホストURLを入力、ローカルサーバー側にて設定も行うとPHPやSSIも動かす事が出来ます「Getting Started」をクリック 「neko」フォルダーを選択した場合 クイックエディットクイックエディットは主に4種類ありますショートカットは全てCtrl+Eで共通で、実行する場所によりそれぞれのクイックエディットが展開します HTMLのクイックエディットid名/class名/HTMLタグ名上で実行すると適用されているスタイルを
Web画像参考ギャラリーバナーデザインアーカイブバナーデザイン専門ギャラリーサイト | レトロバナーバナーデザインギャラリーバナーデザインデータベース コツ&レイアウト集有名企業の事例から学ぶ!高品質なバナー広告を作るための「コツ&レイアウト」集100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本ディレクターなら知っておきたい「バナー広告制作の基礎知識」 バナー制作フロー 要素のバランスを見て適切なレイアウトを選ぶ 手描きのラフでレイアウトを決定 PC上で組むレイアウトはまずモノクロで 要素が多い場合は3〜4カ所にグルーピング 文字組みも忘れずに 飛び先や商品イメージの色を抽出して使う 最後にもう一度モノクロにして視認性チェック バナー広告は潜在層向けのものであり、その人達に当事者意識を持たせて注意喚起をすべき。詳しい話はランディングページに任せて、バナーではそのサービ
このページを最初にブックマークしてみませんか?
『Webデザインの勉強 | Webサイト制作科 10月7日開講クラス用ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く