さくらぐみ別館 web-FAQ

さくらぐみ別館 web-FAQ

ホームピグアメブロ

芸能人ブログ人気ブログ

12Jun
- 《タグ》video
  webページに動画を表示させるためには、video要素を使います。終了タグ</video>が必要です。src="動画データのURL"　（再生する動画データのパスを指定）controls　（再生のためのコントローラーを表示）autoplay　（自動再生）loop　（ループ再生）muted　（ボリュームを０にする）width="000"　（表示させる幅の指定）height="000"　（表示させる高さを指定）［例］<video src="xxxxx.mp4" controls width="000" height="000">video要素に対応したブラウザでは動画が再生できます</video>
- パスの設定
  webページに表示させる画像ファイルの場所はsrc=""で指定しますがその場所を表す方法は２つあります。※ファイルのリンクも同じです。１、絶対パス　　一般的なホームページアドレスと同様、　　　「http://」や「https://」などで始まる形式です。　　［例］http://ameblo.jp/puri-cafe/xxxxxx.gif２、相対パス　　ソースコードを記述しているファイルから見た相対的な位置。　　上の階層は「../」、下の階層は「フォルダ名/」で書き、画像のファイル名を書きます。　　同じ階層であれば画像ファイル名だけで表示されます。　　［例］（下の階層）img/xxxxx.gif　　　　　（上の階層）../xxxxx.gif　　　　　（同じ階層）xxxxx.gif
- 《タグ》img
  webページに画像を表示させるためには、img要素を使います。終了タグはありません。src属性の値として指定します。HTML5で必須ではありませんが画像を見ることができないユーザーでも利用できるようにalt=""を使用し、代替えテキストを指定しておきます。［例］<img src="xxxxx.gif" alt="あああああ">画像の幅と高さも指定できます。（pxであれば単位は表記必要ありません）画像の表示領域を記載することでそれ以降のwebページの内容を表示させることができます。［例］<img src="xxxxx.gif" alt="あああああ" width="100" height="200">
- 画像と音声、動画ファイルの種類
  【画像】ウェブページ上に表示させる画像として現在利用されているおもなファイル形式です。すべての画像形式に言えることですがRGBで保存しないと、表示されないブラウザもありました。１、JPG形式（.jpg）　　一般的なデジカメやスマホで撮影するとこの形式で保存されていることが多いです。　　フルカラー（１６７７万色）対応ですが、データの圧縮率を高くすると　　ファイル容量は減りますが画像はその分だけ劣化します。　　写真などを使用する際に使うことが多いです。２、GIF形式（.gif）　　最大でも256色までしか表現できません。　　境界線のはっきりしているロゴやイラストなどを保存するときに使います。　　複数の画像を組み合わせてGIFアニメーションを作ることもできます。３、PNG形式（.png）　　フルカラー（１６７７万色）以上の色を使うことができます。　　透明や半透明を表現することもできます。　　広面積で使うとファイル容量が大きくなり過ぎであまり適していませんが　　それほど大きくない画像をシャープなまま保存したいときに使います。　　※IE6以前では透明部分が正しく表示できない可能性があるので注意が必要です。　　アニメーションの機能はありませんが、拡張フォーマットであるMNG/APNG形式では可能です。（ブラウザによって表示されません）【音声】１、WAVE形式（.wav）　　win環境で使われる形式です。通常データは圧縮されないため　　ファイル容量が大きくなります。２、AIFF形式（.aiff）　　mac環境で使われる形式です。通常データは圧縮されないため　　ファイル容量が大きくなります。３、MP3形式（.mp3）　　データの圧縮率も高く、音質も比較的良いことからWEBだけでなく　　音楽プレーヤーなどでも広く利用されています。４、AAC形式（.aac）　　MP3以上の高音質、高圧縮をめざして作成されました。MP3の後継ですが、　　2015年現在での普及率はMP3の方が多いようです。５、WMA形式（.wma）　　マイクロソフトが開発した高音質、高圧縮のファイル形式です。　　データを送受信する際に使われている文字列が違いますが、　　基本的に内部構造は　ASFファイルと同じです。【動画】MP4形式とWebM形式の両方のデータをようししておくと比較的新しいバージョンのブラウザであれば再生可能です。WebM形式が対応していない古いブラウザでも再生されるようにしたい場合はOgg 形式のデータも用意してください。１、MP4形式（.mp4）　　映像のコーデックに「H.264」音声のコーデックに「ACC」や「MP３」を採用した形式。２、WebM形式（.webm）　　映像のコーデックに「VP8またはVP9」音声のコーデックに「Vorbis」を採用した形式。３、Ogg形式（.ogv）　　映像のコーデックに「Theora」音声のコーデックに「Vorbis」を採用した形式。
05Jun
- よく使う特殊文字
  よく使う特殊文字コードです。他にもたくさんあるので、googleなどで検索してください。表示させないコードもありま。コメントタグと言います→　<<<>>>&&&"""™&trade™©©©®®®
- （３）ホームページの全体構造
  分類としてはブロックレベル要素になりますが、主に複数の要素をグループ化して使用します。基本的にこれらの要素は1つのHTMLファイルに1つしか配置できません。【header】一般的にページの上部にあるサイトのロゴ画像や検索フォーム、ナビゲーションなどといったヘッダー領域の範囲を示します。【main】メインコンテンツである範囲を示しています。※この範囲には各ページで共通するロゴや検索フォーム、ナビゲーション、著作権情報などの内容は含まないようする【footer】フッター部分をまとめておきます。
- （２）ブロックレベル要素とインライン要素
  XHTMLと同様にHTML5でも使用する「ブロックレベル要素」「インライン要素」ですがこの基本的内容は、CSSを理解する上で重要になります。【ブロックレベル要素】「見出し」や「段落」のようなひとつのまとまった単位となる要素です。タグをつけるとその前後は改行された状態（その前後のテキストとは明確に分かれた状態）で表示されます。横幅、高さの指定も可能です。h1、h2…（見出し１～６まで設定されています）p（このタグでかこった範囲がひとつの段落であることを示します）div（このタグでかこった範囲がひとつのかたまりであることを示します）ul（箇条書き部分全体を囲みます。unordered list 順序付けされていないリスト「●、●、●…」liとセットで使います）ol（箇条書き部分全体を囲みます。ordered list 順序付けされたリスト「１、２、３…」liとセットで使います）li（個々の項目を囲みます ulやolとセットで使います）dl（定義リストでdtとddを囲みます。dtやddとセットで使います）dt（リストの項目を定義します。 dlとセットで使います）dd（リストの内容を記述します。dlとセットで使います）【インライン要素】文章の一部分を構成する要素です。タグをつけても、その前後が自動的に改行されるなどは基本的にありません。横幅、高さの指定はできません。a（このタグでかこった範囲がリンク箇所であることを示します）img（画像を示します）strong（このタグでかこった範囲が強調された太字で表示されます）small（このタグでかこった範囲は小さな文字で表示されます）span（このタグでかこった範囲を細かく設定することによって装飾することができます）em（このタグでかこった範囲が強調され斜め字で表示されます）
- （１）HTML5の要素の種類
  <body>～</body>の中に入る内容を要素と言います。HTML5で記述する際に、要素は大きく7種類のカテゴリに分けられます。１、一般、子孫にテキストなど（Flow content）２、見出し（Heading content）３、セクション（Sectioning content）４、段落内に含まれる文章（Phrasing content）５、組み込み（Embedded content）６、ユーザーとの対話型（Interactive content）７、文書情報（Metadata content）
26May
- （6）HTMLの全体構造
  HTML5文書は基本的に次のような全体構造をしています。<!DOCTYPE html>　（←文書型宣言）<html lang="ja"><head>　<meta charset="UTF-8">　<title>ページタイトル</title></head><body></body></html>HTML5文書は下記順番に書きます１【文書型宣言】SGMLやXMLで作られた文書では必須なのですが、HTML5では文法的には必要ではありません。ですが、ブラウザの表示モードを正しく維持する目的で文書型宣言を配置することになっています。※文書型宣言がない場合、ブラウザはそのHTMLが旧式だと判断してしまい表示モードもそれに合わせたものに切り替えられてしまいます。２【html要素】<html>　～　</html>で囲います３【head要素】<head>　～　</head>で囲います基本的にブラウザウィンドウには表示されません。meta要素は、文字コードを示しtitle要素は、ウィンドウのタイトルバーまたは、タブの領域に表示されます４【body要素】<body>　～　</body>で囲います。ブラウザウィンドウには表示されます。
15May
- （５）HTMLの用語と書式
  <h1>　heading1の略「一番上の階層の見出し」<p>　paragrapf（パラグラフ）の略閉じるタグには</p>「/」記号を入れ、ここまでという意味を表しています。HTMLでは○○○="□□□"の書式でタグに補足を書き込むことができます。【例】<html lang="ja">□□□</html>lang　languageの略ja　japanを表す文字コード--------------タグの中にはテキストを囲わないものもあります。閉じるタグがない要素のことを「空要素」と言います。【例】<meta charset="UTF-8">UTF-8　文字コードがUTF-8ということ--------------HTMLを構成している各部分には名称があります。内容テキストの前にあるタグを「開始タグ」真ん中に「内容テキスト」その後に「終了タグ」要素名の後には「属性」を書き込むことができます。ダブルクォーテーション（○○○="□□□"）で「属性値」を囲みますが、※シングルクォーテーション（○○○='□□□'）でも可能です！
- （４）HTMLの種類
  現在使用されているHTMLにはバージョンが大きく分けて３つあります。HTML4.01（Strict/Transitional/Framesetという種類があります）　　SGMLで作られた最後の言語XHTML1.0（Strict/Transitional/Framesetという種類があります）　　XMLとも言われてますHTML5（HTML構文/XHTML構文という種類がありますHTML5は全く新しいHTMLでSGMLやXMLといった規格を使用せず一から作られています
- （３）なぜHTMLとCSS２段階で指定するのか
  文書データの互換性を高くするため、あえて文書データからレイアウト情報を除き、テキスト形式のデータにタグ付けすることによって、文書内の各構成要素の割合と意味だけを示すようにしています。ということで、きちんとタグ付けされていれば、音声読み上げでも、点字出力でも内容の理解できるデータになります
- （２）HTMLとCSSの関係
  ウェブページを作成するには、コンテンツに対してのHTMLでタグをつけ、タグをつけた範囲の表示方法をCSSで指定するという２段階の作業が必要です【ウェブページの作り方】コンテンツ......ウェブページのコンテンツであるテキストHTML......タグを使ってその範囲が何であるかを示すものCSS......タグで囲って示した各構成要素の表示方法を指定する
- （１）HTMLの役割
  HTML（エイチティーエムエル）とはHyperText Markup Languageの略ですハイパーテキストとは、直訳で「通常のテキストを超えたテキスト」＝「リンク機能のあるテキスト」マークアップ・ランゲージとは、コンテンツであるテキストに対して、タグをつける言語ということで、HTMLは「リンク機能を持った、テキストにタグをつける種類の言語」ということです！【テキスト例】南の島でお休みだー【HTMLソース例】<見出し>南の島でおやすみだー</見出し>上記の様にテキストの各構成要素をタグでかこってその範囲がなんであるかを示すのがHTMLのタグ（印）なのです※タグは半角アルファベットと記号で構成されます