関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
回答募集中のトピック（お題）
ホームページ作成
【ホームページ作成】ノートのように罫線（下線）を引くデザイン
ボックスや枠線の表示・装飾 (HTML,CSS)
更新日：2009年07月13日
ノートのように罫線（下線）を引くデザイン
「ノート」のように、文中の各行に下線を引くデザインを作ってみましょう。画像とスタイルシートを組み合わせて、簡単に「ノート」っぽく見えるデザインが作れます。
「ノート」のように、各行に下線を引くデザインを作ってみましょう。
スタイルシートと画像を使うことで、下記のように「ノート」っぽく見えるデザインが簡単に作れます。
2009年7月13日 ■ノートのような罫線を引く
「下線を引く」というと、text-decorationプロパティに値「underline」を指定したり、border-bottomプロパティを使ったりする方法を思い浮かべる方々も多いでしょう。
しかし、text-decorationプロパティを使う方法では、文字のない箇所には下線が引けないため、あまりノートのようには見えません。
また、border-bottomプロパティを使う方法では、ボックスの最下部に下線が引かれるだけで「各行」には引かれないため、まったくノートのようには見えません。
ここでは、スタイルシートで下線を引いているわけではありません。 下線（罫線）はあらかじめ画像「 
」で用意しておき、その画像と本文をスタイルシートでうまく配置することで、「ノートのように見えるデザイン」を作っています。
カテゴリ［スタイルシート］ ■ノートのような下線画像
ノートのような罫線（下線）は画像で作るため、点線・破線など様々なラインが使えます。 画像さえ用意すれば、下線の色も線種も自由自在です。
罫線画像は背景画像として指定するため、本文は何行でも好きなだけ延ばすことができます。
今回は、このような「ノートのように見えるデザイン」の作り方をご紹介いたします。 罫線画像を用意して、数行のスタイルシートを記述するだけで簡単に作れます。
July 13, 2009. ■ノートに見えるデザインを作る
この記事の目次：
１．ノートに見えるデザインのサンプル（このページ）
２．ノートに見えるデザインを作る
３．ノートの外側をデザインする
４．ノートのタイトル部分を作る
５．タイトル部分の右端にも文字列（日付など）を加える
６．ソースのまとめ
それでは、「ノートのように見えるデザイン」の作り方を、順番に見ていきましょう。
この記事の担当ガイド
関連キーワード[PR]
ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
おすすめ記事
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
スポンサードサイト
-
ガイド：坂口 亮二
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます