Webデザインの勉強
ランディングページとは ランディングページとは、リスティング広告などのWeb広告や、グーグルやヤフーなどの検索エンジンをクリックした際に表示されるウェブページです。 LPO（Landing PageOptimization） ランディングページを最適化すること。 ランディ…
CSSコードの配置方法 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 下記ブログ著者のお勧めは、3.の方法レスポンシブ・ウェブデザインでの CSS コードの書き方 一…
FacebookのLikeBoxを可変にするCSS 親要素に対して、横幅100%で指定してレスポンシブデザインに対応させます。 #fb-root { display: none; } .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }…
各ブラウザの差異をなくすためのCSS (IE8以上) 現在のv2.0.1は、IE 8+, Firefox 4+, Safari 5+, Opera, Chrome に対応 IE6,7等に対応しているのは、v1.0.1のバージョン /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ==================…
CSS3用リセット @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, s…
スマートフォン向けのサイト作成の流れ サイトの目的・ゴールの明確化 サイトマップ作成・画面計画 デザイン コーディング サイトマップ作成・画面設計 サイトの階層をなるべく浅く １ページの情報量を適度に多くする ゴールへの導線をわかりやすくする 基本…
WordPressをローカル環境（XAMPP）にインストールする方法 このブログを参考にさせていただいて、インストールします。WordPressをローカル環境（XAMPP）にインストールする方法 - ウェブ学のすすめ
Webサイトのユーザビリティについてのまとめ 訴求ポイントをFAQ形式で表現 ユーザはFAQに対し、以下のようなイメージを持っていると考えられます。 一問一答で端的に表現されていてわかりやすい 会話形式の文体のため、読みやすく、頭に入りやすい 多くの人…
テキスト主体のWebサイトが増えてきている理由 アクセシビリティ・ユーザビリティ・SEO Webパフォーマンス マルチデバイス対応 運用の効率化、コンテンツへの注力 テキスト主体のWebサイトが増えてきている理由をあらためて考えてみた
色々なサイトでhtmlとcssの骨組みを毎日みてどんな形になっているのかを調べ、自分で理解するまで打ち他のサイトのリメイクが出来るようになる。 discrptionの表示が変わった。以前はpタグからのひっぱりだが今はdiscriptionからしっかりきているとのこと。 …
HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む HTML5によって実現するアプリケーショ…
サイト制作の際に、CSSの記述順序がごちゃごちゃになったので、整理します。 ボックス幅 コンテント領域幅＋パディング＋ボーダーの太さ＋マージン＝ボックス幅 ※コンテント：widthとheightプロパティで規定される長方形 パディング：padding ボーダー辺に対…
スタイルの優先順位 スタイルの特殊性（specificity） スタイルの読み込み順序のルール（あとから読み込んだものを優先する）は、あくまで特殊性が同じスタイルに適用される 風姿花伝より CSSのルールを忘れていた 課題サイト作成時に、何故CSSが適用されな…
アキュート・アクセント アキュート・アクセント ( ´ ) は、鋭アクセントともいい、フランス語、スペイン語、ポルトガル語、イタリア語、カタルーニャ語、アイスランド語、スウェーデン語、オランダ語、ポーランド語、チェコ語、スロバキア語、ハンガリー語…
ブログの検索順位 このブログ、http://d.hatena.ne.jp/island-web/ の検索順位を調べてみました。 キーワードは、 「しまWeb｜Webデザインの学習」 「しまWeb」 「Webデザインの学習」 感想 「Webデザインの学習」で検索すると、ブログを始めたばかりの頃は…
初心者のサイト構築 サイト構成を描く 作成順序を書き出す 新規HTMLドキュメントを作成する サイト管理して保存する（index.html） DTDを入力する 基本構造を入力する meta要素を入力する タイトル要素を入力する 随時保存する 新規CSSファイルを作成する in…
Flashの役割 初心者がつくる「動的コンテンツ」のパッケージ プレゼンテーションツール ビデオコンテンツなどのインターネット配信 ActionScriptを利用した「UI」 データベースと連動させたリッチコンテンツ AIRアプリの作成 ActionScript ActionScript3.0：…
positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static（静的） 特に配置方法を指定しません。 この値のときには、top、bottom、left…
【第１回】インターネット（5月2日予定） （1）URLとは URLとは［Uniform Resource Locator］の略で［インターネットにおける情報の住所］を示す場所です。 URLには、［絶対パス］と［相対パス］の２通りの指定方法があります。 「http://」は、［HyperText …
【Design01】 過去にあった選挙ポスターです。デザインの要素を説明しなさい。 デザインの目的を考える 要素を抜き出す（色、形、文字、写真、構成、被写体、ポージングなど） それぞれが、どんな目的で使われているのかを箇条書きにする 平成19年東京都知事…
【HTML01】 TeraPad（mi）を起動する 管理フォルダーにこの課題用のフォルダを作成し「index.html」として保存する HTMLドキュメントとして必要な要素を入力する 練習課題用テキストを「body」内に、コピー＆ペーストする（文字入力練習として入力してもOK）…
以下の画像の作者は誰か、そして絵のタイトルは？ ピエト・モンドリアン「ブロードウェイ ブギウギ」 Piet Mondrian Broadway Boogie Woogie（1942-43） Piet Mondrian オランダの抽象画家 はじめ具象画?よりキャリアを始めたが、多くの試行錯誤の末、水平線…
HTML 4.01 Transitional <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" Content="text/css"> </meta></meta></head></html>
JavaScriptを記述する場所 bodyタグの間に記述 HTML文書内に実行結果を表示したいとき。 属性に記述 イベントハンドラから直接呼び出すとき。 「input」などHTMLタグの属性に記述します。 *1 headタグの間に関数を記述 イベントハンドラに指定した関数を呼び…
【準備課題41】 「meta」の意味と役割を説明しなさい meta（metaphor） information その文書に関する情報（メタ情報）を指定して、 ブラウザや検索ロボットに知らせるためのタグ。 UA（user agent）に、表示するための必要条件とページの目的、そして外部と…
【準備課題51】 DTDの入力練習 Strict が目指す方向ではありましたが、現在それにこだわる必然性はありません HTML 4.01 Transitional <html lang="ja"> XHTML 1.0 Transitional IE6対策として、記述しないことの多い「XML宣言」ですが入力できるようにしましょう </html>
足し算 本来、変数を使う計算式も単純な数値のみの場合は、そのまま数値を計算します プログラム中に記述した値としての「文字列」や「数値」のことを「リテラル」と呼びます <script> document.write('<p>',5 + 3,'</p>'); </script> </body> JS課題13 「8 + 3 = 11」と表示させなさ…
10問30分で解きます。 ネットの海は彷徨い出すと出口がありません。 どこまでも行ってしまう。 そのため、ぐずぐずと時間ばかりが経過してしまいます。（私の場合）1回30分の時間なら、忙しい時でも捻出できます。 とにかく、やることが大事・・・だと思いま…
【準備課題31】ブログに、Googleマップ設置 「フェリカテクニカルアカデミーWebマスター養成科 受講場所 SHIMAビル」をGoogleマップでブログに表示させなさい 東京都豊島区南池袋３丁目18−40 SHIMAビル3F大きな地図で見る 大きな地図で見る 【準備課題32】ww…
準備課題はとても時間が取られそうで躊躇していましたが、 「まずスピード」を読んで、取り組むことにしました。 検索もスピード 「何を拾い、何を捨てるか」を瞬時に判断できるようになることを目指しましょう課題も、できるものとできないものを振り分けま…
