みなさん、こんにちはー。
ちょっと質問させて下さい。
リンク先のデザインをしたいのですが
どのようにすればイイですか?
http://www.shimajiro.co.jp/kosodate/
真似たい箇所は…
「特集」と「最新NEWS」の部分です。
1.全体が3列で、その中の2列は
どうすれば作れるか?
2.「特集」をタイトルをどのように作るのか?
・背景の作り方
・特集という文字の縁取りが白いこと
スタイルシートで作るのか、
PHOTOSHOPで作るのか分かりませんが
どなたかご指導頂けると嬉しいです
No.2ベストアンサー
- 回答日時:
Photoshopは画像を作成するためのソフトで
スタイルシート(css)はhtmlをレイアウトするための言語です。
使い方はそもそも違います。
通常サイトを作る際には、
PhotoshopやFireworksなどの画像処理ソフトでページごとにデザインを作成し、
デザインが決定してから、画像をパーツごとに切り分けて保存し、
htmlとcssで組み立てるという流れになります。
> 1.全体が3列で、その中の2列はどうすれば作れるか?
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をきちんと入れておかないと崩れますので注意してください。
> 2.「特集」をタイトルをどのように作るのか?
> ・背景の作り方
> ・特集という文字の縁取りが白いこと
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でのインデントもしくは半角スペースに置き換えてください。
No.1
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Web・クリエイティブ 趣味でグラフィックデザインをして見たいと最近考えてるのですが、質問で、平面構成のデザインとはなんです 1 2022/08/21 19:32
- Web・クリエイティブ チラシやフライヤー、バナーを適度にダサいデザインで作成するコツについて 1 2023/01/14 15:54
- その他(芸術・クラフト) デザイン系の専門学校に今年から通い始めて、いよいよ2学期からポートフォリオを作る予定です。 そこで夏 1 2022/08/20 14:56
- Web・クリエイティブ 今とても悩んでる事があるんです。至急アドバイス頂けたら助かります。 現在学生で、Illustrato 1 2022/09/18 20:02
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- タブレット クリエイター?向けタブレットを教えてください 3 2023/06/06 09:03
- Excel(エクセル) 【マクロ】同じフォルダ内にある複数ブックから1つのブック内の1シートにデータを集めたい 6 2022/09/28 18:16
- C言語・C++・C# c言語の問題です 3 2023/01/10 16:15
- 美術・アート ある背景イラスト画集を探しています。 はじめまして。 以前、ヴィレッジヴァンガードで1度 売られてい 1 2022/11/09 02:22
- Ameba(アメーバブログ) アメブロ テンプレート 1 2022/06/27 00:54
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
line-height指定で発生する余白...
-
一括で全体を右にずらす
-
article、section、hgroup?
-
div要素が重なってします
-
html5でheaderの中にnav
-
ブログのサイドバーが下にくる
-
オシャレな区切り線はありませ...
-
グラフィックス
-
idとclassの指定方法
-
HTML属性での「""」 「''」違い
-
<div>テキスト</div>
-
html divボックスの入れ子で中...
-
html5にて水平線の引き方は?
-
HTMLとCSSの次に覚えることは何...
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
【html&css】太さの違う2本線の...
-
改行がしたいのですが、うまく...
-
携帯サイト、ナノでのタグ編集...
-
コンピューターの画像ブロック
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報