月別アーカイブ: 2015年10月

激短【jQery作成講座】をうけて

たったの3日間であるが

講座をうけてわかったこと

それは

プログラマーはすごい!

ということだった。

繰り返される

ドルとカッコとコロンの暗号…

&(){}:;#””/¥

全く理解できない。

理解しようって気にもなれない。

自分で書いてみよう!となり

$ だけ書いてあとが続かない。。

なんとなく、初めは$のような気がしただけで

$ が何なのかもいまいちわからない。

 

“頭文字$”だ。

この講座もあと2日。

一つでも記号の意味が理解できるだろうか。

基本のキホン《 jQuery 》

jQueryとは?

javaScriptのライブラリのひとつ。

簡単にまとめると
魅力的なユーザーインターフェースを
手軽に作ることができて
軽量でバグが少ない便利なやつ です。

早速テストwebページをつくってみた。

まずはjQueryのベースとなる書類をダウンロード
基本はこの名前:《jquery.js》

※バージョン;
1.x は古いのも対応
2.x はcss3でないといけない

※google code等は設定せず
必ず自分でファイルを用意する

 

新規htmlファイルを開いて

ヘッド内にscriptタグで
ダウンロードしたjQuery本体を読み込む

 

  • 新規jsファイルを作成
     入力型式はこんな感じ
    $(document).ready(function)({
           $(‘#sample1’).hide();
      });
    この書き方についてはこれから学ぶ予定
  • このファイルも先ほど作成した
    htmlファイルに読み込ませる
基本の設定は以上!
プラグインをダウンロードし
読み込ませてみたらこんなかんじでした!
 スクリーンショット 2015-10-22 21.30.02
補足;
jQueryを使用したwebサイトを構築する時は
確認用ブラウザをInternetExplorerに設定すると便利。
開発者ツールでデバッカーもしくはコンソール画面を表示すると間違ったところを指定してくれる。
この機能はchromeにもあるが
ちょっといまひとつだそう。
もしくは、
有料ソフトのVisual Studio (Visual Studio Communityは無料)やEclipseでも同様のプレビュー表示をしてくれるそうなので
今使ってるMacにインストールしてみたいと思う。
metaタグ

押さえておきたい<metaタグ>について

はじめまして。
TRENSYS新入りデザイナーのあゆみんです。

現在WEBページを制作するにあたっての
HTMLとCSSというのを勉強しています。

ここでは勉強したことやその他にも様々なことを
日々綴っていきたいと思います。

今日は、HTMLのHEAD内に記述する
meta というタグについて紹介します。

metaタグとはHTML文書の内容ではなくHTML文書そのものの情報を
ブラウザや検索ロボットに知らせるためのものです。

metaタグに書くことのできる属性

  • charset=””
    文字コードを指定
  • http-equiv=””
    httpヘッダ名を指定
  • neme=””
    名前の指定
  • content=””
    内容を指定
  • scheme=””
    詳細を指定

metaタグに記述できる情報の代表的なものの一覧

  1. 文字コードの指定
    <meta charset="UTF-8">
  2. 標準で使うスタイルシートの書類
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">

    HTML5では標準になるので書かなくてOK

  3. ユーザーエージェントの指定
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    ユーザーエージエントとは
    ユーザーが使用するブラウザのバージョンを
    サーバ側が判断してそれに合った文書を送ること
    “IE=edge”はIEでは常に最新のバージョンを指定する
    “chrome=1″はクロームフレームを有効にする指定

  4. クリアタイプ オン/オフの指定
    <meta http-equiv="cleartype" content="on">

    クリアタイプオンで表示されるフォントの縁の
    ギザギザをなおしてくれる
    あまり効かないようだがたまに効くらしい

  5. フォーマットディレクションの指定
    <meta name="format-detection" content="telephone=no,address=no,email=no">

    電話番号やメールアドレスをリンクにさせることができる

  6. ビューポートの指定
    <meta name="viewport" content="width=device-width">

    レスポンシブサイトを制作する場合はこれを書く

  7. 検索ロボットの動きを制御する
    <meta name="robots" content="noindex,nofollow,noarchive">

    index=表示している語句
    follow=リンク先の情報
    archive=グーグル検索アーカイブにデータを保存

  8. 提供範囲の指定
    <meta name="coverage" content="worldwide,asia,japan">
    
  9. 作成・更新日時の指定
    <meta name="date" content="2015-01-01T00:00:00+09:00">

    書式通りに記述

  10. 作成日時の指定
    <meta name="creation_date" content="January 01, 2015 00:00:00">
  11. 著作権情報の指定
    <meta name="author" content="著作権情報">
  12. 対象年齢の指定
    <meta name="rating" content="general">

    日本国外ではかなり重要
    “general”で一般向け

  13. ジャンルの指定
    <meta name="classification" content="general">
  14. ページの詳細を記述
    <meta name="description" content="ページ詳細">

    以前では検索画面のページタイトルの下に表示された
    最大64文字くらい

  15. キーワードの設定
    <meta name="keywords" content="キーワード">

以上が代表的で実用的と言えるmetaタグです。

SEO対策の為に、
descriptionやkeywordsを設定しても
実際はあまり意味がありません。
検索の優先順位を上げる為には
‘書類に間違いがないようにする’
ということが大切です。