- ベストアンサー
デザインについて
みなさん、こんにちはー。 ちょっと質問させて下さい。 リンク先のデザインをしたいのですが どのようにすればイイですか？ http://www.shimajiro.co.jp/kosodate/ 真似たい箇所は… 「特集」と「最新NEWS」の部分です。 １． 全体が３列で、その中の２列は どうすれば作れるか？ ２．「特集」をタイトルをどのように作るのか？ ・背景の作り方 ・特集という文字の縁取りが白いこと スタイルシートで作るのか、 PHOTOSHOPで作るのか分かりませんが どなたかご指導頂けると嬉しいです
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Photoshopは画像を作成するためのソフトで スタイルシート（css）はhtmlをレイアウトするための言語です。 使い方はそもそも違います。 通常サイトを作る際には、 PhotoshopやFireworksなどの画像処理ソフトでページごとにデザインを作成し、 デザインが決定してから、画像をパーツごとに切り分けて保存し、 htmlとcssで組み立てるという流れになります。 ＞ １．全体が３列で、その中の２列はどうすれば作れるか？ htmlの横配置は、cssのfloatという指定で行えます。 position等で配置する事も出来ますが、こちらはきちんとやるには比較的難易度が高いので、 初心者の方でしたら、無難にfloatを使用する事をお勧めします。 書き方は色々ありますが、私が一番簡単だと思うやり方はこんな感じです。 【html】 <div id="contents" class="clearfix"> <div id="left"> <div class="clearfix"> <div class="special"> </div> <div class="news"> </div> </div> </div> <div id="right"> </div> </div> 【css】 #contents{ width: 900px; margin:0 auto; } #left{ float:left; width: 690px; } #right{ float:right; width: 200px; } .special{ float:left; width: 460px; } .news{ float:right; width: 220px; } この記述でも難しいと感じるかもしれませんが、 最低これくらいは理解して書かないと、Webサイトの構築は出来ません。 clearfixというクラスを使用していますが、 これはfloatを使用する際に出る不都合を無理やり回避する記述で、 これをfloatするものの親ボックスに入れているととりあえず安心、というものです。 本来は邪道なやり方という声もありますが、プロも普通に使用しているので初心者の方なら気にせず使いましょう。 clearfixの書き方は検索するとweb上に沢山ありますので、検索してみてください。 floatする際には、widthをきちんと入れておかないと崩れますので注意してください。 ＞ ２．「特集」をタイトルをどのように作るのか？ ＞ ・背景の作り方 ＞ ・特集という文字の縁取りが白いこと Webでは「文字」は、プレーンテキストと画像文字の2種類あります。 プレーンテキストとは、そのまま文字情報で、選択してコピペできるものです。 画像文字とは、Photoshopなどで作成した文字の画像を表示しているもので、見た目は文字ですが実際には文字情報ではありません。 で、該当サイトの「特集という文字」のタイトルは画像です。 Photoshop上で文字を書き、「効果」の「境界線」という機能で縁取りを作れます。 特集の所にある背景画像は人物のイラストですが、こういうものはPhotoshopでは難しいので 大体の人がIllustratorで描いています。 絵を描くのが難しいなら、fotolia等の画像販売サイトで購入するか、 無料素材のサイトを探してダウンロードしましょう。 作成した画像は、cssのbackgroundで指定できます。 【例】 .special{ background-image:url(images/special_bg.gif); background-repeat:no-repeat; background-position:right bottom; } ※文中の記述はインデントを全角スペースで書いてますが、このままでは使用できませんので、 全角スペースは削除するか、Tabでのインデントもしくは半角スペースに置き換えてください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Photoshopは直接は無関係です。画像ソフトですから・・ オーサリングツールではありません。 基本的にはHTMLとCSSです。 ・背景の作り方 適当な画像ソフトで、 http：//www.shimajiro.co.jp/kosodate/img/201010/top/feature_title.gif のように作る ・特集という文字の縁取りが白いこと 同様というか同じもの。 ウェブページは、カタログ作成とは根本的に異なります。・・とっても多くの人が誤解されている。ワープロやDTPとは違う。 まずHTMLで文書構造だけを書きます。 ★示されたサイトは、デザイン以外は、全く参考にはならないでしょう。 ⇒Another HTML-lint gateway( http：//openlab.ring.gr.jp/k16/htmllint/htmllint.html ) [例]わかりやすいので、HTML5での例です。HTML4.01などでしたら <header>を<div class="header">のように書き換えます。 <body> <header> 文書のヘッダ部分 </header> <section> 本文 <section> <section> 特集 </section> <section> ニュース </section> </section> <section> テーマ別記事 <section> 育児体験 </section> <section> 子供の病気・トラブル </section> <section> 以下省略 </section> </section> <aside> 本文とは直接関係ない記事 </aside> </section> <footer> 文書情報 </footer> </body> となるでしょう。 あとはスタイルシートでデザインして行きますが、この様に文書構造しか書かれていないと、自由にデザインできます。ベネッセのまねをしようが、全くご自由に・・ ★ごく簡単な例です。(本文部分しかデザインしてません) ★HTML本文には文書構造しか書かれていないことを確認してください。 →自在にデザインできるし変更も出来る。→内容の追加や変更も自由に ★HTML5で書いてますが、HTML4系統にも直せるでしょう。 ★<body></body>内は、ご提示のサイトよりずっと簡単でわかりやすいでしょう。 ★Validatorを満点で通過するでしょう。検索エンジン対策(SEO)もバッチリ (注)httpの:(半角コロン)は：(全角)に置換してあるので戻すこと! (注)タブは＿に置換してあるので戻すこと <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA1951"> <style media="screen"> <!-- body{background-color:gray;} h1,h2,h3,h4,p,ul{margin:0;line-height:1.8em;} /* sectionのみデザイン */ header,section,footer{width:95%;min-width:800px;max-width:1200px;;margin:0 auto;background-color:white;} section{position:relative;} section section{width:75%;min-width:0;margin:0 1%;} #feature_news h3{display:none;} #feature_news section{border:solid silver 1px;border-radius:5px;} #feature{width:62%;min-height:250px;} #news{position:absolute;right:0;top:0;width:30%;height:100%;} #articles section{width:45%;display:inline-block;height:180px;} #articles p{border:solid 1px gray;height:130px;border-top-width:3px;} section section section[id] h4{text-indent:-100em;background-repeat:no-repeat;height:40px;} #feature h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/feature_title.gif);} #news h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/news_title.gif);} #hamigaki h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/theme_118_title.jpg);} #hiragana h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/theme_hira_title.jpg);} #ikuji h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/theme_ikuji_title.jpg);} #shick h4{background-image:url(http：//www.shimajiro.co.jp/kosodate/img/201010/top/theme_trouble_title.jpg);} #hamigaki p{border-top-color:#0BABC1;} #hiragana p{border-top-color:#8EBB08;} #ikuji p{border-top-color:#FF6600;} #shick p{border-top-color:#339900;} section aside{position:absolute;top:0;right:0;width:23%;height:100%;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> ＿＿<section id="feature_news"> ＿＿＿<h3>特集とニュース</h3> ＿＿＿<section id="feature"> ＿＿＿＿<h4>特集</h4> ＿＿＿</section> ＿＿＿<section id="news"> ＿＿＿＿<h4>ニュース</h4> ＿＿＿</section> ＿＿</section> ＿＿<section id="articles"> ＿＿＿<h3>テーマ別に見る</h3> ＿＿＿<section id="hamigaki"> ＿＿＿＿<h4>歯みがき情報</h4> ＿＿＿＿<p></p> ＿＿＿</section> ＿＿＿<section id="hiragana"> ＿＿＿＿<h4>ひらがな</h4> ＿＿＿＿<p></p> ＿＿＿</section> ＿＿＿<section id="ikuji"> ＿＿＿＿<h4>育児体験</h4> ＿＿＿＿<p></p> ＿＿＿</section> ＿＿＿<section id="shick"> ＿＿＿＿<h4>子供の病気・トラブル</h4> ＿＿＿＿<p></p> ＿＿＿</section> ＿＿＿<section> ＿＿＿＿<h4>以下省略</h4> ＿＿＿</section> ＿＿</section> ＿＿<aside> ＿＿＿<h3>本文とは直接関係ない記事</h3> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
