ナビゲーションメニュー(基本Ⅰ)

ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい [...]

ナビゲーションメニュー(基本Ⅰ)の続きを見る

~2008/09/12~

罫線を使って日記風テキスト

背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回はCSSでunderlineを引いて日記風のデザインを作ってみます。 しかし、単純にtext-decoration: underline;で下線を [...]

罫線を使って日記風テキストの続きを見る

~2008/09/11~

行の折り返し位置を指定した見出し

行の折り返し位置を指定した見出しをデザインしてみます。 #h2-headline03 {       width: 10em;       height: 2.5em;       margin-top: 3em;    [...]

行の折り返し位置を指定した見出しの続きを見る

~2008/09/08~

CSSで見出しをデザイン(擬似クラス:first-letter)

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。 #h2-headline02 {       color: #600;       border-bottom: 1px [...]

CSSで見出しをデザイン(擬似クラス:first-letter)の続きを見る

~2008/09/07~

CSSで見出しをデザイン(付箋風)

CSSで便箋風の見出しをデザインしてみます。 backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出し [...]

CSSで見出しをデザイン(付箋風)の続きを見る

~2008/09/05~

罫線をデザインする

段落の間を分かりやすくする事で可読性を上げられます。 <hr />要素にCSSでデザインを入れます。、これにはborderプロパティを使って罫線を作ります。      .line01 {       bord [...]

罫線をデザインするの続きを見る

~2008/09/04~

リンクをボタンにする

CSSでボタンを作ってみます。ボタンが作れればナビゲーションも割と簡単に作れるようになります。 まず、普通にリンクテキスト同じCSSを作ります。 .button01 a {       color: c00;       [...]

リンクをボタンにするの続きを見る

~2008/09/02~

おもしろリンクアクション

リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。 リンクのboxを作ってその中のリンクに対してこの効果を有効にす [...]

おもしろリンクアクションの続きを見る

~2008/09/01~

link要素の操作

リンク要素は、擬似クラスで訪問済みと未訪問のテキストの色を変更したり、リンク領域のマウスオーバー時のアクションなど色々な表現が可能です。例えばリンクテキストの下線を消してまったり、マウスオーバー時に色を変えるなどの方法な [...]

link要素の操作の続きを見る

~2008/08/31~

CSSでスモールキャピタル

スモールキャピタルは小文字に対してサイズはそのまま大文字として表示させられる技術です。ちょっとしたアクセントに使えます。 スモールキャピタルは font-variantプロパティで使用します。 #small-capas [...]

CSSでスモールキャピタルの続きを見る

~2008/08/27~

最近チェックした記事

福岡のホームページ制作会社ソースマリン提携会社

Source Marineパッケージプラン

  • HP+
  • cmsホームページ制作プラン
  • 携帯ホームページ制作プラン
  • ホームページ&ブログプラン
  • ショッピングサイト構築プラン

福岡のホームページ制作会社ソースマリンのコンテンツ

おススメサーバ