skillup

技術ブログ

「 HTML+CSS 」 一覧

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 HTML5のメリット 動画の埋め込みなどが比較的簡単にできる 新しいタグが作られ、よりHTMLをすっきりかけるよう …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 ボーダー表示 通常のtableのラインは二重線でちょっと気持ちが悪いです。通常はcollapseが一般的でしょう。 [crayon-5ada7e28cf31e4 …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 positionの使い方 相対配置 relative 相対配置は通常表示さ …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-align:centerはインラインのみ。 margin …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 ブロックレベルとインライン ブロックレベル要素 その名のとおり、HTML上でブロックを構成する要素。div,p,table …