デザインの学校

東海村のパソコンスクール ~デザインの学校~

gBase

すべての記事

投稿が見つかりませんでした。

  • HTML文書を作成する

    HTML文書を作成する際の基礎中の基礎をまとめてみました。
    HTML4,XHTML,HTML5の違いを簡単説明しています。
    (さらに…)
  • ブロックレベル要素とインライン要素

    ブロックレベル要素とインライン要素

    ブロックレベル要素とインライン要素

    HTMLで定義されている要素のうち、~の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。

    ブロックレベル要素(Block-Level Elements)

    ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

    ブロックレベル要素には、以下のものがあります。

    <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、
    <noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
    

    インライン要素(Inline Elements)

    インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

    インライン要素には、以下のものがあります。

    <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、
    <dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、
    <samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、
    <tt>、<u>、<var>
    

    配置ルール

    ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。

    正:ブロックレベル要素の中にインライン要素を配置
      <p><strong>段落となります。</strong></p>
    
    誤:インライン要素の中にブロックレベル要素を配置
      <strong><p>段落となります。</p></strong>
    
  • HTMLタグリファレンス

    Webコーディングをするときによく使うタグについてまとめてみました。
    (さらに…)

  • タグやスタイルシートの読み方:タグ編

    Webコーディングをするときによく使うタグやスタイルシートの読み方についてまとめてみました。
    (さらに…)

  • CSSのtext-indentを使ってぶら下がりインデントを表現する方法(一行目を前に出す方法)

    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    これを…

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    こう書きたい!

    注意書きなどを記述する時に頭に「※」マークなどをつけて

    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    などと書きますが、文章が長くなると自動的に折り返されて「※」マークの下に文字が続いて書かれてしまいます。こんな時「※」だけ前に出ていたらいいな…と思うことがよくあります。これをCSSで設定することができます。

    CSS 記述例)
    p{
    	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
    	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
    }
    

    さらに応用
    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    ※MOT所有者、インストラクター経験者優遇

    上記のように項目が2個以上の場合、リストタグを使って表記することがあります。

    表示例) ul li をそのまま記述

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    • ※MOT所有者、インストラクター経験者優遇

    表示例) CSS の text-indent を使って ul li をインデント(字下げ)

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    • ※MOT所有者、インストラクター経験者優遇
    CSS 記述例)
    ul.hedge li{
    	list-style-type:none; /* li で表示される「・」を非表示にする */
    	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
    	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
    }
    
  • HTMLの基本

    HTML

    HTML(HyperText Markup Language)は、Webページを構成する言語の1つです。コンピュータがその文書の構造を理解することで、検索エンジンがウェブページの構造を把握して解析したり、Internet Explorer(IE)やGoogle Chromeなどといったwebブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。

    XHTML

    XHTML(Extensible HyperText Markup Language)はHTMLを、XMLに適合するように定義し直した言語です。HTMLと違い、タグの省略が許されない、空白は と記述しなくてはいけない、などとより細かな規定ができました。XHTMLは文書構造の指定に特化しており、スタイルやレイアウトの指定はすべてCSSによって行います。

    HTML5

    HTML5はHTMLの5回目に当たる大幅な改定版です。HTMLやXHTMLでは複雑だった処理(例えば動画や音声、グラフィックの描画など)が出来るようになりました。(正式な勧告がまだなのすが…HTML5は、まだ発展途上です・汗)

    HTMLのタグについてはこちらの記事をお読みください>>

お問い合わせ

以下よりお気軽にお問い合せください。