CSS

はてなダイアリー公開デザインmemo2

シンプルなデザインで自分好みな公開デザインをmemo。 asym http://d.hatena.ne.jp/designset/1310 id:chepooka http://d.hatena.ne.jp/chepooka/ 公開デザイン見てると良さげなデザインにかなり魅かれてしまう。 俺もいつか作ろう。暇なときに。 でもまずは…

はてなダイアリーの公開デザインmemo

はてなダイアリーのデザインはユーザーが作成し公開することができる。 公開デザイン一覧から自分のブログに適用できる。 最近公開されたenableさんのデザイン「sinscape」がかっけー。 http://d.hatena.ne.jp/designset/1339 頑張って時間見つけて自分でも…

CSS Frame Generator / htmlソース貼り付けでCSSの枠組みを自動出力

CSS Frame GeneratorはWeb上のツールで、htmlソースを貼り付けて実行すると、スタイルシートに記述するclassやidの枠組みを自動的に返してくれる便利なサイト。 CSS Frame Generator htmlだけ先に記述し、これを使えば時間をかけずに簡単にデザインの指定のC…

サイト製作 - 8 / html

サイト製作 - 7のつづき この見え方だとやっぱりちょっと変で、やる気が出ないので、画像作って適用してみた。また、「body」で指定した背景も同じ画像だと気持ち悪いのでなくして、色をdivのid:headerと同色に設定。 「index.html」は下記に修正して、 <html> <head> </head></html>

サイト製作 - 7 / html

サイト製作 - 6のつづき 前回まではこんなかたち↓ なんか味気ないサイトになってきましたが、ここで思い切って画像を使用してみる。サイトを公開するにあたって、画像は何を表示しても良いのかというと、それはNG。著作権にふれるものや、人物であれば肖像権…

サイト製作 - 6 / html

サイト製作 - 5 / htmlのつづき ここで、サイドのメニュー部分左の「・」黒いマークを消したり、ページの一番下に記述するフッターの部分メニューを横並びに表示したりと、細かく設定していく。 その場合はliタグを横並びにするプロパティをCSSファイルに追…

サイト製作 - 5 / html

サイト製作 - 4 / htmlのつづき このままでは殺風景なので、もっとデザインを加えて見栄え良くする。 フォント設定や枠を加えたり、背景色を設定するだけでも随分変化する。 プロパティ名 指定内容 指定例 font-weight 文字の太さを設定 normal/bold/400 な…

サイト製作 - 4 / html

サイト製作 - 3のつづきCSSスタイルシートで形を作ってレイアウト作り。 CSSについては「CSSとは」を参照。 ソースは下記。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> </meta></head></html>

CSSとは / CSS

CSS

CSS(Cascading Style Sheets カスケード・スタイル・シート)とは、ホームページ作成に欠かせない存在。HTMLやXHTMLで作られたページをデザイン(装飾)する命令文が書かれたもの。外部スタイルシート(つまりCSSファイル)で指定したものが一般的になって…