WEBデザインのコツを教えてください

2023/08/16 06:06

このQ&Aのポイント

WEBサイトを初めて作る方に向けたデザインのコツを紹介します。
スタイルシートの使い方やサイトのデザインのポイントについて解説します。
HTMLとCSSの基礎を学んだ高校生がWEBデザインについて学びたいと思っています。

ベストアンサー

WEBデザインのコツ（仕方）を教えてください。

2012/06/14 22:19

こんにちは。 WEBサイトを初めて作っている者です。作っては見たものの… なんかつまらない・・・ドコをどう直せばよいでしょうか？？教えてください。また、サイトのデザインの仕方って何でしょうか？？？それから、このサイトにおいて直したほうがよいという点を教えてください。基本的に、スタイルシートはすべて外部CSSで、各ページ共通のスタイルと、そのページのみのスタイルと二つに分けています。 head.cssが共通です。サイト作成に、HPビルダーを使っていますが、使っている機能はビジュアルサイトビューくらいなもので、あとはタグ打ちと、ソースの整形にしか使っていません。自分はタグ打ちしかしていません。今、高校一年です。いまのところ、将来、WEBデザイナー等になるというつもりはありませんが、 WEBサイトを作れるようになりたいと思っています。理系の高校に通っています。 HTML、CSSは、だいぶマスターしてきました。（上に”初めて”と書きましたが、最初にHTMLに触れたのは、2ヶ月くらい前で、ここに掲載したURLは二つ目です。ただ、ほぼ同時進行で作成したので、初めて見たいなもんです（笑））よろしくお願いします。 WEBサイトデザイナー、クリエイターのかたの回答をお待ちしております。 URLはhttp://wingnovel.web.fc2.com/です。

elecpigeon
お礼率89% (123/137)

CSS
回答数8
ありがとう数8

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/20 19:30 回答No.8

＞Pタグですが、私のWEBページの場合どのようにすべきでしょうか？　正規表現の扱えるテキストエディタで、 <br>[\n\t]*<br>[\n\t]*<br>[\n\t]*</p><p> → </p><p calss="pose3"> (<br>[\n\t]*<br>[\n\t]*)</p><p> → </p><p calss="pose2"> とかするのが現実的です。　たとえば、EmEditorとか・・・pro版だとファイルから置換でファイルを開かなくてもできる。Free版だとファイルを開いてからになる。　別に急ぐことはないです。順次直していけばよいだけです。時間はたくさんある。私は君のお父さんより、ずっと年上で残された時間はあまりない。　理系に進めば、必ず卒業論文を書かされるでしょう。数学科でない限りTex(LaTex)はないでしょうがXMLは必要になります。そのためにも、正しいマークアップは身につけておくほうが良いでしょう。　二ヶ月でここまでたどり着いているというのは、私が指導した多くの人たちに比べて遜色はありません。速いほうだと思います。　頑張りましょう。・・・みんなも通ってきた道です。

質問者

お礼 2012/06/21 18:11

回答ありがとうございます。なるほど！！正規表現がありましたか！正規表現はちょっとかじった程度しかわからないので調べながらやってみます。ありがとうございました。

その他の回答 (7)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/19 18:39 回答No.7

ちょっと気になりました。＞インデントについては、段落ごとにPで囲めていないので、できそうにありません… 　pは、Paragraph(英:段落)の意味です。最低限のマークアップですよ。これすらできないようでは、「WEBデザイン」は無理です。　段落--意味は小学校の国語の教科書--は、センテンスのひとつ上で、最後のブロックです。　文章のレベル：全体の文章＞章＞節＞段落＞センテンス ( http://d.hatena.ne.jp/adgt/20100124/1264302927 ) 　私は、科学系の論文を書いていた経験から、Texで言うところの \part{部} \chapter{章} \section{節} \subsection{小節} \subsubsection{少々節} \paragraph{段落} \subparagraph{小段落} 　などをとても気にします。実はHTML5でも、これは極めて重視されます。HTML5にはsection以外の文書構造示すものがありませんから <body> 　<header> 　</header> 　<section> 　　<section> 　　　<section> 　　　　<section> 　とすることが強く推奨されることになります。そして、それぞれの各sectionは<h1>から<h6>の見出しがひとつ(二つのときは<hgroup>で囲む)--基本的に必須(ないし存在すると仮定)や、<p>(段落)、<article><aside><figure><nav>などのブロックが入ることになります。　HTML5では、<section>の階層によって、階層が決まります。HTML4.01までは見出しレベル<h1>～<h6>でした。HTML5では<h1～6>の数字は文章の階層とは無関係です。　Texは、理系の大学ではこれで論文を書くことが求められることもあります。私自身も出版社から、「原稿をLaTexでいただけますか？」と今でも言われる。　これほど、段落や章/節は大事なことなのです。　→論文の書き方 ( http://www.nvrc.rie.shizuoka.ac.jp/takty/interest/writing_guide.html ) 　私がウェブに入ったきっかけは、自分の研究成果を広く利用してもらいたかったからです。　「文書構造を気にすると、デザインができなくなる」と誤解される人が、ままありますが、まったく逆です。きちんと文書構造がマークアップされていたら、段落間を広げたり狭めたり、あるいは p:first-leter{font-size: 200%; font-style: italic; float: left} とドロップキャップしようとかが、自由自在にできます。 <p>　なんたらかんたら<br></p> じゃ、できないですよね。　HTMLとCSSの関係が「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」といわれているのは、そのためです。 ★すばらしいデザインのページを作ろうとするなら、まずHTMLをきちんと覚えなさい。そうすれば、デザインの幅は大きく膨らむでしょう。 [例] ロールオーバー効果について・・・のその後。 - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7542119.html ) 　での回答をご覧ください。あんなに簡単にHTMLを書いてあるから、簡単なCSSで自由にデザインできるのです。もちろん、まったく異なるデザイン（メニューを横にしたり、floatでページ幅に合わせてメニューを並べ替えたり）にすることも簡単ですよね。

質問者

お礼 2012/06/20 19:06

回答ありがとうございます Pタグですが、私のWEBページの場合どのようにすべきでしょうか？私の場合、3行空く段落もあれば、一行しかあかない段落もあります。たとえば、CSSで『p.○○○{margin-top:1.6em（line-heightを1.6emとした場合）;}』とした場合、二行あけたければ、その段落のPタグに対し個別に『style="margin-top:3.2em"』としなければなりませんよね？一箇所や二箇所であるならこれでもまったく問題はありませんが、残念ながらそんな時間は到底ありません……… または、 1行分のマージンを指定したclassと、 2行分のマージンを設定したclassと、 3行分の（略）・・・・・・・という風に設定するしかないような気がします。上に上げたいずれの方法をとるにせよ、現在の私にはとても時間が足りません。もっと別の方法がありましたら教えていただけないでしょうか。上記の方法だと、きっと、すべての段落にPタグを入れるだけでもほぼ不可能な気がします（時間的に）。高校生という身であるため、あまり時間をかけることができません・・・ Pealみたいな言語が使えればよかったのでしょうけど、現在の私は知りませんので… そうすると、結局brタグを多用するしかない気がします。小説家になろうのサイトのほうも、brで空白をあけています。（よくない例なのはわかっています。）

01mk
ベストアンサー率0% (0/1)

2012/06/19 16:19 回答No.6

たしかに中身もすごい大事です。ですが外身も大変重要だと自分は思っています。毎日どこかの国で洒落た中身もすばらしいサイトが出来上がっています。そのサイトを見て刺激されて最初はマネでもいいから作ってみる事が大事だと思っています。マネなんてダサイと言ってる人はその場で足踏み。マネでも頑張って作れば力となって、どんどんデザインも構築も良いものができると自分は思っています。 http://web-daysign.net/ 上記のサイトは毎日色々なサイトを紹介しています。一度見てみて下さい。いい刺激になると思います。あくまで自分の意見なので流して下さい。

参考URL：: http://web-daysign.net/

質問者

お礼 2012/06/19 17:48

回答ありがとうございます。そうですか。マネでも最初はいいのですね。大変参考になります。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/15 19:28 回答No.5

ちょこっと訂正 p{margin:0;line-height:16em;text-indent:1em;}

質問者

お礼 2012/06/15 20:44

ありがとうございます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/15 18:58 回答No.4

＞私もBRを極力使わないようにしたいのですが… 　日本語の長い文章の場合は、基本的に次のような設定をしています。 p{margin:0;line-height:16em;txet-indent:1em;} <p style="margin-bottom:4.8em;pause-after:300%">これで日本語の記事らしくなります。写真の入る行などで必要ないときは</p> div.photo p{text-indent:0;}とかより詳細度が高い宣言で消します。 <p style="margin-top:6.4em;pause-before:400%">また、段落間に間を空けたいときは上のようにしたり、このようにmarginを指定します。</p> 　HTML要素のstyle属性での指定は、詳細度がa=1で、優先されます。　読み上げソフトを考慮するなら、上記のように待ち時間を入れておきます。小説の場合は、スタイルシートの@media:auralの指定もしたほうが良いですね。男声とか、右からとか小声でとか、早口でとか・・(^^)

質問者

お礼 2012/06/15 20:44

回答ありがとうございます。 line-heightを1.6em（16ではなくて1.6の間違いですよね）にさせていただきました。インデントについては、段落ごとにPで囲めていないので、できそうにありません… 最悪、全角スペースでも入れます。読みあげを考慮するつもりは今のところありません…すいません。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/15 09:08 回答No.3

補足への回答＞私は、IDやCLASSというのは極端な話、意味をなさないアルファゲットの羅列でもよいと思っていました。　これは、先に書きましたように【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書 7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］よりです。この部分が理解されなかったのでHTML5では、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 3.1. 新しい要素　HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )］より　この二つを結びつけると、class名やidにどのようなものをつければよいかわかりますよね。HTML5が候補に挙がってからは、このHTML5の「新しい要素」とその意味をclass名に付けるようにしています。・将来HTML5が一般的になったとき、直ちに転換できるよう。・これらの要素名は、googleが提唱してきたもので、検索エンジンは理解している・たとえば、left-boxじゃ中身が何かHTMLを開かなきゃわからない、それはスタイルシートを修正するとき大変です。　div.section div.nav{position:absolute;left:0;top:0;width:20%;} だと、「本文(section)中のナビゲーション(nav)は左に20%幅で配置している」ことがスタイルシートを読むだけで理解できるので、左に配置したけりゃ　div.section div.nav{{position:absolute;right:0;top:0;width:20%;} ですむし、上に並べたければ　div.section div.nav{{position:absolute;right:0;top:0;width:100%;} 　div.section div.nav li{float:left;width:20%;} ですむ。　left-boxじゃ、そもそもそんな書き換えなんてしたら、ますます訳がわからなくなります。HTMLでは文書構造のマークアップのみ心がけて、スタイルシートをHTMLを見なくても書ける様にする--と考えても良いでしょう。＞タグ打ちなどが手入力というのはおかしいでしょうか。　いえ、おかしくないです。私も基本--マークアップは上記の理由で手打ちです。手打ちでなければ無理・・。おかしいといったのは、使われているid名やclass名が、オーサリングツール出自のものばかりだから、「本当に手打ちなの？」という嫌味でした。(ごめんなさい) ＞HTMLも一種のプログラミングかな…と　いえ、「その要素が何であるかをタグを用いてマークアップするメタ言語」であって、プログラミング言語ではありません。　また、先の回答で'》　　　'は不要と言うのはスタイルシートで div.section h2:before{ content:"》 ";white-space:pre-wrap;} 　で追加できるということです。　それと、単にスペースを広げるために<br>が使われていますが、<br>は「ひとつの段落内であっても強制改行」という意味です。余白を取りたかったら、 div.section div.section{padding-bottom:2em;} とかです。　

質問者

お礼 2012/06/15 18:23

回答ありがとうございます。なるほど。HTML5の新しいタグ（sectionとかnavとかfooterとか）にはそういう意味があったのですね。大変参考になりました。 ”》”は私はなくてもいいかなと思っているので削除しました。 content:"x"の使い方がやっとわかりました。こういうときに使うんですね。なるほど～～＾＾これから一括置換ソフトを使って、置き換えをはじめます。ということは、このようなIDの名前にすることで、ロボットウケも少しよくなるってものですかね…（笑） SEOに手を出している暇があったらもっと基礎的なHTMLを勉強しろと怒られそうですが（笑）また、具体的な例を多く示していただきありがとうございます。 <br>については、ご指摘のとおりなのですが、小説を書いているのは私ではないので… 作者が下にコレだけの余白をあけてほしいという感じなので、毎回毎回異なる余白を設定してあげるより、BRで無理やり改行してあげたほうが楽かな？と思ったのですが… 私もBRを極力使わないようにしたいのですが… 各行の後ろに自動でBRを挿入するソフトもありますし、一部は小説家になろうのほうからのソースのコピーなので… （因みに小説家になろうのほうもBRで強制改行でした）最初はすべてPタグで囲もうかとも思ったのですが、非常に大変な作業を強いられそうだったので… あきらめてBRを使っています。たとえそうであってもBRを使わないほうがよいものなのでしょうか… ------------------------------------------ 先ほどの補足に二箇所訂正があります。 ×もう一月になったので ○もう1つ気になったので ×プロの方も多く折られます。 ○プロの方も多くおられます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/15 01:33 回答No.2

ウェブでもっとも重視するべきものは、デザインではなく内容です。自身で理系といわれているならなおさらです。　どんなにデザインがきれいと感じても、それで人は訪ねてきませんし、利用もされません。大事なのは内容です。　そして、HTMLの目的が【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　だということです。　提示されたページを幅の狭いディスプレイ---ウィンドウ巾を縮めて閲覧できますか？たとえばスマートフォンを横にした640px巾だと・・・　また、タグやスタイルシートが手打ちとのことですが、ちょっと信じられません。HTMLは、文書を読み解き、その文書を構成する要素に分解して、その要素が何であるかをタグを用いてマークアップするメタ言語といわれるものです。すなわち、ここが見出しなら<h1>～</h6>、ひとつの段落なら<p>というふうに。用意されているタグが足りなければ【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　ですね。すなわち、本文でしたら <div class="section"></div>とかのはずです。 <div id="contaior"> <div id="left-box"> <h2>メニュー</h2> ・・・【中略】・・・ <br> </div> <div id="center-box"> なんてことにはならないはずです。 <div class="section"> 　<h2>勝利ｇの小説部屋へようこそ！！</h2>   　<p>ただいま、作成中です・・・・・・</p> 　<p>自分で言うのもなんですが・・・完成ががたのしみです（笑）</p> ・・・【中略】・・・　<div id="tableContent" class="nav"> 　　<ol> 　　　<li><a href="novel/raijuu/">最強の雷獣と落ちこぼれの魔獣使い</a> 　　　<li><a href="novel/kenshi/">最強の剣士(改訂版）</a> 　　　<li><a href="novel/tenrai/">天雷の契約者</a> 　　　<li><a href="novel/elementer/">Elementer!!</a> 　　</ol> ・・・・以下、省略・・・　　　idはリンクやjavascriptのターゲットや、よほど特殊な場合以外使わないほうが良いです。スタイルシートでの詳細度が高くなりすぎて、スタイルシートが肥大する大きな原因になります。　デザインを考える前に、その元となるHTMLをきちんとマークアップできるようになりましょう。そうすれば、デザインの自由度も完成度も高くなります。

質問者

お礼 2012/06/15 06:16

回答ありがとうございます。こういう認識でよろしいでしょうか。 ID属性や、CLASS属性は、その名前自体に意味があり（検索エンジンにとって）正しい名前をつけるべき。私は、IDやCLASSというのは極端な話意味をなさないアルファゲットの羅列でもよいと思っていました。 http://www.tagindex.com/stylesheet/basic/naming.html このようなサイトを参考にしながらID、CLASS名をつければよいでしょうか。

質問者

補足 2012/06/15 06:20

すいません。お礼に書いてしまえばよかったです… もう一月になったので教えてください。タグ打ちなどが手入力というのはおかしいでしょうか。 ”以前、ホームページを作ろう”という感じのサイトで、タグは手打ちで作られるプロの方も多く折られます。という文章を見つけたのですが間違いでしょうか？てっきり、皆さん、手打ちでされるものと思っておりました。たとえば、C言語などのプログラミングは、手打ちで行うと思います。（定型文的な部分は違うかもしれませんが）なので、HTMLも一種のプログラミングかな…と

ennalyt
ベストアンサー率29% (398/1331)

2012/06/14 22:38 回答No.1

綺麗な字が書きたい！と思ったら、まず上手い人の書を見て真似るところから始めるじゃない？カッコイイwebサイトをいっぱい見ていこうよ。イタリアとかフランスのwebがいいんじゃないかな。 http://it.yahoo.com/ http://fr.yahoo.com/ こういうとこからリンクたどってってさ。上手い人の真似をしよう。ここの動画も役に立つはずです。ドットインストール http://dotinstall.com/

質問者

お礼 2012/06/15 05:51

回答ありがとうございます。 Yahooのページ確かにかっこいいですね！ドットインストールはとても勉強になりそうです。

WEBデザインのコツを教えてください

WEBデザインのコツ（仕方）を教えてください。