要素を均等に配置するための余白の計算式と計算プログラム
Webページのレイアウトやその他のデザインにおいて、同じ大きさの要素を均等(等間隔)に配置したい場合があります。 最近は自動的に余白(マージン)を計算してくれるソフトも多いですが、手で計算しなければならない場合のための計… 続きを読む »
Webページのレイアウトやその他のデザインにおいて、同じ大きさの要素を均等(等間隔)に配置したい場合があります。 最近は自動的に余白(マージン)を計算してくれるソフトも多いですが、手で計算しなければならない場合のための計… 続きを読む »
前回はDOMの概要と、javascript で DOM を利用して、タグ名を使った要素の書き換えを行いました。 今回は、DOMで操作する要素(タグ)をタグ名以外で指定する方法について紹介します。 class属性による要素… 続きを読む »
Webページにおける javascript の役割は、主にページ内の要素(タグ)の追加や編集、削除やそのスタイル(CSSによる装飾)の変更などを動的に行うことです。 「動的に」というのは、ページが表示された後でもリアルタ… 続きを読む »
javascriptの最も基本的なデバッグ(不具合の調査)方法はコンソールにログを出力することです。 これから javascript を書いていく中で「ちゃんと書いているはずなのにうまく動かない!」ということが起きるかも… 続きを読む »
前回はdivタグを使ってページレイアウトを作る例を紹介しました。 今回は「spanタグ」を使ったページ装飾例を紹介します。 spanタグ も divタグ と同じく用途が決められていないタグです。違いは divタグ がブロ… 続きを読む »
前回はブロックレベル要素とインラインレベル要素の違いについて説明しました。 今回は、ページレイアウトを作る上で重要なタグを紹介します。それは、ブロックレベル要素の「divタグ」とインライン要素の「spanタグ」です。 こ… 続きを読む »
CSSを使ってホームページの見栄えを自由に決められることがわかりました。次にページの要素(メニューやロゴ)の配置を決めるために必要な概念について紹介します。 ページ要素の配置のことをレイアウトと言います。 レイアウトを設… 続きを読む »
さて、今まで背景色や文字色を変更する際に以下の方法を使っていました。 「red」「blue」など具体的な色の英語名(カラーネーム)を使った指定 各色の成分(RGB)を整数(0〜255)で指定 色を指定する方法はこれ以外に… 続きを読む »
前回は、要素の「外側の余白」と「内側の余白」について説明しました。これらを組み合わせることで、様々な表示の間隔を自由に設定することができました。 さて、だいぶ見た目が整ってきましたので、今回は仕上げをやっていきましょう。… 続きを読む »
前回はこのようにページコンテンツ全体を線で囲むところまでCSSを書きました。 線で囲えたのはいいのですが、線の中の余白が整っていませんね。今回はこれを直していきましょう。 要素の外側の余白を調整する margin まずは… 続きを読む »