HTML・CSS

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と指定することで、それぞれの要素を左右へ移動させること…

ツールチップ

ツールチップって何? フォームにマウスをのせたときに、吹き出しみたいに出るアレのこと。 名前を入力するフォームにカーソルを当てたら、「名前を入力してください」って出るみたいな。 入力時の注意喚起に使われたりする。 しょぼいけどとりあえずツール…

見出しをデザインする。グラデーションにしたり、画像をヘッダにしたり。

見出しをグループ化するタグはhgroup hgroupタグを使えば見出しをグループ化できる。 <body> <div id="header"> <hgroup> <h1>ヘッダーすなわち見出しです</h1> <h2>サブタイトルはこちらです</h2> </hgroup> </div> </body> 上記のようにグループ化すると、見出しはh1でマークアップしたものとして扱われ、サブタイトルのh2は後続の…

Internet ExplorerにだけHTMLやCSSを有効にする条件付きコメントの書き方。

ボックスモデルとは ボックスモデルとは、HTML/XHTMLのタグでマークアップした文字や画像が構成する箱のこと。 文字や画像を表示する部分がコンテンツエリアとなり、そもまわりにパディング、羅線、マージンが挿入される。 ボックスモデルを採用したことによ…

セマンティックWebのこと。

セマンティックWebとは、コンピュータがHTMLを見て、それがブログの記事の本文なのかタイトルなのか、商品名なのかなどを細かく判別できるようにしようとする動きのこと。 コンピュータが情報を細かく判別できるようになることによって、検索エンジンの処理…

Facebookの開発者登録とか、tableの勉強とか、ヌルバイトとか。

Facebookアプリのデベロッパー登録をした際のメモ(まだ開発してない) 1.以下のページ「facebook developers」で開発者として登録する。 https://developers.facebook.com/?locale2=ja_JP2.右上の「Register Now」をクリック3.「I accept the Facebook Platfo…

POSTとGETとブラウザと。

ブラウザはPOSTリクエストをキャッシュしない POSTリクエストはブラウザにキャッシュされない。 ブラウザにキャッシュされるのはGETリクエストの場合のみとなる。ブラウザのキャッシュはリクエストが以前に送られたものと同一であると判断したら、リクエスト…

GIF、JPEG、PNGの違いと使い方

CSSのこと ドット(.)に続けてクラス名を指定するような書式のセレクタをclassセレクタと呼ぶ。 idセレクタの使い方は、ウェブページ内の一箇所を特定してスタイルを適用する場合に使用する。 ウェブページ内の複数箇所に同じスタイルをまとめて適用する場合…

自分のWebページ内にリンクを貼るなど

主要なブロック要素 タグ名 用途 h1〜h6 見出し p 段落・文章 ul 順序なしリスト ol 順序ありリスト dl 定義リスト form フォーム hr 区切り線 tabel 表 div 構造 順序なしリストを利用する例 ・ナビゲーション ・商品一覧 ・記事一覧 ・フッタリンク順序あ…

セレクタとセンタリング

・どの部分にスタイルを適用するかは、セレクタで特定する。・div要素は、それ自体は意味を持たない。しかし、特定の範囲を指定したり、複数の要素をグループ化してまとめるコンテナとして使用する。・ボックスのセンタリングを設定する方法 /** 上下マージ…

リストを横に並べてヘッダメニュー的に見せる方法

【追記】 この記事ではわかりづらかったので、2013/11/8に新しく記事を書きました! リンクを横並びにして、メニューバーみたいな形で表示するためのHTMLとCSS 【ここまで】li要素はデフォルトではリスト項目が改行されて縦に並ぶようになっている。 リスト…

基本をまたしても復習する。しつこく。何度も。

要素とは、HTML文書内で何らかの役割を持ったひとまとまりのこと。 タグとは、目印をつける記号のこと。 HTMLでのコピーライトの書き方 <small>Copyright (c) hogefuga株式会社 All Rights Reserved. </small> smallタグは、HTML5からは「面積・警告・著作権などの注釈や細…

Webデザインの新しい教科書を読んだ感想と学んだことのまとめ

Webデザインの新しい教科書を読んだ感想 まず、この本は良くも悪くも「教科書」だということだ。 良い点は、基本の基本から、モダンなWebページの開発を解説してくれるところだ。 また、簡単ではあるがサンプルも載っていて、実際に手を動かして学ぶことがで…

ブロック要素とインライン要素

ブロック要素とインライン要素 ブロック要素はh1要素などの「見出し」や、p要素などの「段落」のように前後に改行が入るひとつのまとまった要素のこと。 ブロック要素は縦に並んでいく。インライン要素は、ブロック要素に対し、文中の一部分にだけ意味付けや…

復習。

同じような勉強を違う本で、ペンキを繰り返し塗るように勉強する。 記憶は必ず薄れていくので、何回も重ね塗りすることが大事。 記憶は薄れてもいいから髪は薄れないでほしい。・DTD・・・それぞれのHTMLのバージョンで使用できる要素や属性の種類、記述ルー…

自動的に何かを追加するなら、同じように自動的に削除できるようにするべきである。

ことば どんなメカニズムを使用するにしても、可逆性をもたせるようにしてください。自動的に何かを追加するのであれば、同じように自動的に削除できるようにしておくのです。 達人プログラマー―システム開発の職人から名匠への道 HTML Webページで情報を発…

「コードは他の人が最短時間で理解できるように書かなければならない」

ことば 読みやすさについて、鍵となる考えは 「コードは他の人が最短時間で理解できるように書かなければならない」 ということだ。 「他の人」というのは自分のコードに見覚えのない6ヶ月後の「君自身」かもしれない。 常に一歩下がって、「このコードは理…

メンテナンスしやすいソフトウェアを作る唯一の方法は、DRY原則に従うこと。

ことば 信頼性の高いソフトウェアを開発して、開発そのものを簡単に理解したりメンテナンスできるようにする唯一の方法は、DRY原則に従うことです。 Don't Repeat Yourself.繰り返しを避けること。 達人プログラマー―システム開発の職人から名匠への道 この…

フォントサイズを設定するサンプル

【フォントサイズを設定するサンプル】 HTML <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フォントサンプル</title> </meta></head></html>

フォーム要素の一覧

canvasの機能を極限まで使い倒したサンプルを見たい場合は、以下のサイトを見ると良い。 http://www.chromeexperiments.com/HTML5ではフォーム機能が大幅にパワーアップしている。 フォーム要素を一覧にするとこんな感じになる。 <html> <meta charset=Shift_JIS> <title>フォームを試す</title> <body> <h1>フォー</h1></body></meta></html>…

Webページにサイドナビやトップナビをつけるサンプル

■HTML <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title> TEST </title> </meta></head></html>