読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

floatを使って画像を回り込ませる

1.基礎 floatプロパティというのは、指定された要素を左または右に寄せて配置する際に使用する。 後に続く内容は、その反対側に回り込むようになる。今回は、画像をコンテンツ(文章)の左側に回りこませるサンプルを作ってみたい。 けっこうシンプルなCSSで実…

サイドバーにメニューをブロックにして表示する

1.デモ 前の記事からの続きみたいなもので、今回はサイドバーにメニューを表示してみた。 前の記事→2段組の固定レイアウトを作成するCSS サイドバーに色々とリンクを貼ったりすることはあるかと思うが、それをどうやってやればいいか、イメージを掴むことが…

2段組の固定レイアウトを作成するCSS

1.デモ まずはデモ画面から。 こんな感じで、コンテンツとサイドバーがあるようなレイアウトをどうやって作るかをみていく。 2.サンプル まずはサンプルに使うHTMLから。 <html> <head> <meta charset="utf-8"> <title>二段組の固定レイアウト</title> <link rel="stylesheet" type="text/css" href="./css/sample.css"> </head> <body> <div id="container"> <div id="header"> <p>ここはヘッダーです。</p></div></div></body></html>

CSS 見出しの区切りを画像で表示する

1.基礎 前回の記事の続編。 →CSS 見出しの下に区切り線を表示する今回は、見出しの部分に画像を使ってみる。 女性のブログとか、見出しのところにかわいい絵が使われていることが多いけれど、そういうかわいい見出しはCSSをいじることで実現することができる…

CSS 見出しの下に区切り線を表示する

※おいさん(id:Doraneko1986)からコメントをいただき、追記しました(「4.追記」の部分) 1.基礎 h2タグなどで見出しを作ることはブログなどではよく見られる。 現時点(2014/01/30)ではこのブログでは区切り線をつけていないけれど、区切り線をつけるためにはbo…

見出しをバーの形で表示するCSSのサンプル

ブログとかで、見出しの部分が横棒のバーみたいになって表示されていることがあると思う。 こいつをどうやってCSSで表現するか。イメージとしてはこんな感じ。 超雑だけど。 見出しはだいたいのブログがそうであるように、h2タグだ。 画像のようにバーにする…

リンクを横並びにして、メニューバーみたいな形で表示するためのHTMLとCSS

ずっと前にこんな記事を書いたが、なんかわかりづらかったのでもう一度まとめたい。 メニューを上の方、つまりヘッダーあたりで、横並びにして表示しているようなサイトはたくさんある。これは単純にHTMLのリストを、CSSを使って横並びにしているだけなのだ…

Strict型とTransitional型。インライン要素とブロック要素

HTML&CSS 標準デザイン講座の1章を読んだ。 今日読んだのは1章で、何度か勉強したことの復習になるけれど、解説部分がすごく丁寧で、もっと最初から出会いたかったなーって思った。■インライン要素とブロック要素 この分類は本で読んで覚えておきたいと思っ…

ブラウザのデフォルトのCSSをリセットするためのスタイルシート。ノーマライズするためのスタイルシート(Normalize.css)

CSSのデフォルトスタイルとノーマライズCSS ブラウザによって、デフォルトのCSSがあらかじめ設定されている。 自分でマークアップするために、デフォルトのCSSをリセットするときもある。 デフォルトのCSSをリセットするためのCSSは以下からダウンロード出来…

floatプロパティを使って回り込みや段組みレイアウトを実現する。

floatプロパティ floatプロパティは要素の回り込み方法を指定するもの。 ブロック要素はCSSで何も指定しない場合は、縦方向に順番に配置されていく。 しかし、floatプロパティを使って、leftやrightと指定することで、それぞれの要素を左右へ移動させること…