あなたの映画力を試せる!POPLETA映画検定(無料) >>

こういう動きのサイトを作りたい場合↓
http://madebytung.com/

何から勉強すればいいでしょうか。
htmlの初歩の初歩ぐらいは理解してますが
最近のweb業界のことは全くわかっていない初心者です。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

一昔前はFlashというソフトを利用して動きのあるサイトが作成されていましたが、


iPhoneはFlashで作成したサイトは見られない仕様であったため(ジョブズの意向?!)、
Flashは急速に廃れました。

今ではこのような動きのあるサイトはJavaScriptで作成するのが一般的です。

書店に行くと「HTML5〜」というタイトルの本がたくさんあると思いますが、
Webアプリの可能性を追求する上でJavaScriptは絶対に外せないため
HTML5 = HTML5 + JavaScript と捉えてもいいでしょう。

###

まずはJavaScriptの基本を学びましょう。

そしてJavaScriptで動きを表現する際に便利な
jQueryというライブラリを勉強してみるといいです。

とりあえず今のWeb業界では上記が一般的な見地です。
    • good
    • 3
この回答へのお礼

早速にありがとうございます!
JavaScriptの基本、jQuery。
何から取りかかれば良いのかがわからなかったため
その単語を教えていただけて有難いです。
早速とりかかってみます!

お礼日時:2016/04/08 16:00

う~ん。


二か所の
<p><a href="#Top">閉じる</a></p>
は、
<p><a href="#Top">トップへ</a></p>
のほうが良いですね。

そしてスタイルシートの最後の部分を
section:target a[href="#Top"]{position:absolute;bottom:0;right:0;width:6em;text-indent:-4em;overflow:hidden;}
section:target a[href="#Top"]:after{content:" 閉じる";}

この方が本来の姿でしょう。

このように文書構造とプレゼンテーションを分けると・・HTMLは弄らずにユーザーエージェント(ブラウザとかスマホとか携帯電話とか、印刷機とかスクリーンリーダー)ごとにデザイン変えられるし、気が変わったらスタイルシートだけ書き直せば、サイト全体を一挙にデザイン変えられる。
 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 のページをIEやfirefoxのような代替スタイルシート対応のブラウザで訪問して、メニューの「表示」から「スタイルシート」に進み、色々なスタイルを選択してみるとそれがわかる。もちろん印刷プレビューで印刷イメージを確認してもよい。
    • good
    • 0

じゃあスタイルシートを書いてみます。


★ これはscreenメディアだけに適用されますから、携帯電話(フィーチャーホン/ガラケー)や印刷には適用されません。同じことをjavascriptでしようとすると検索エンジンには内容がわからない。

>こういう動きのサイトを作りたい
 は初心者が良くハマるドツボですよ。ユーザーも検索エンジンも、それがどのようにインタラクティブで華やかでも一切評価してくれません。せいぜい面白いねという程度。
 重要なのは、内容です。あなたが頻繁に訪問するサイトは実はとてもシンプルだったレするのでは・・。ひれどころかシンプルで内容が充実しているページがお気に入りだったりする。

★タブは_に置換してあるので戻してください。

<style media="screen">
<!--
*{margin:0;padding:0;line-height:1.6em;}
html,body{margin:0;padding:0;}
header,section,footer{
_width:80%;max-width:960px;min-width:420px;
_margin:0 auto;padding:10px 20px;
}
blockquote{
_margin:0 1em;
_border:solid 1px black;
_border-radius:10px;
_padding:20px;
}
header h1{
_background-color:rgb(100,255,255);
}
header nav ul{
_transition-property: background-color,height;
_transition-duration:1s;transition-timing-function:ease-in-out;
_height:0;
_overflow:hidden;
}
header:hover nav ul{
_height:30px;
_overflow:visible;
}
header nav h2{
_height:30px;
}
header:hover nav h2{
_visibility:hidden;
}
header nav ul{text-align:center;}
header nav ul li{
_list-style-type:none;
_display:inline-block;
_width:5em;
}
header nav ul li a{
_display:block;text-decoration:one;
_transform: rotateZ(0deg);
_transition-property:transform,background-color;
_transition-duration:1s;
_transition-timing-function:ease-in-out;
_background-color:rgb(255,255,0);
}
header nav ul li a:hover{
_transform: rotateZ(360deg);
_background-color:rgb(255,160,0);
}
section{position:relative;}
section section h2{
_font-size:30px;height:40px;line-height:40px;
_background-color:lime;
}
section section{
_height:30px;
_overflow:hidden;
_transition-property:height;
_transition-duration:1s;
}
section section#Q:target{height:250px;}
section section#A:target{height:500px;}
section:target a[href="#Top"]{position:absolute;bottom:0;right:0;}

-->
</style>
    • good
    • 0

今では、flashはむろん、極力jquery--すなわち、javascriptを使わずに、動的なサイトを構築する方向になっています。


いくつか理由がありますが、
・検索エンジンが利用できない
・javascriptを利用できない端末で機能しない
・javascriptを停止しているブラウザでは動作しない
・・・
>htmlの初歩の初歩ぐらいは理解してますが
 いや、失礼ですが、それはされていないと思います。そもそも、htmlではなく、HTMLですから・・

 HTMLは1999年(15年前)のHTML4.01の勧告以来、強く言われてきたのは「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」すなわち、HTMLは文書の構造をマークアップするもので、プレゼンテーションはスタイルシートに任せる。ということ
 HTMLの最大の目的であり,それゆえに、ここまで普及したのは「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

サンプル上げておきますが、このようにHTMLでは文書構造だけをマークアップしておきます。一目見てわかるように検索エンジンだけでなく、メンテナンスも容易です。
★タブは_に置換してあるので戻す。
 また、:は全角の:に置換してあるので戻す。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
/* ここに書くスタイルシートは後で示す */
-->
</style>
</head>
<body>
_<header id="Top">
__<h1 id="title">Your title</h1>
__<nav>
___<h2>目次</h2>
___<ul>
____<li><a href="#Top">Top</a></li>
____<li><a href="#Q">質問</a></li>
____<li><a href="#A">回答</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<section id="Q">
___<h2>質問</h2>
___<p>こういう動きのサイトを作りたい場合↓</p>
___<p><a href="http://madebytung.com/">Tung - Graphic Design and Art Direction</a></p>
___<p>何から勉強すればいいでしょうか。</p>
___<p>
____<abbr title="Hyper Text Markup Language">HTML</abbr>の初歩の初歩ぐらいは理解してますが、最近のweb業界のことは全くわかっていない初心者です。
___</p>
___<p><a href="#Top">閉じる</a></p>
__</section>
__<section id="A">
___<h2>回答</h2>
___<p>
____今では、flashはむろん、極力jquery--javascriptを使わずに、動的なサイトを構築する方向になっています。
___</p>
___<p>
____いくつか理由がありますが、
___</p>
___<ul>
____<li>検索エンジンが利用できない</li>
____<li>javascriptを利用できない端末で機能しない</li>
____<li>javascriptを停止しているブラウザでは動作しない</li>
____<li>・・・</li>
___</ul>
___<p>
____<abbr title="Hyper Text Markup Language">HTML</abbr>は1999年(15年前)のHTML4.01の勧告以来、強く言われてきたのは<a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4"><q cite="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4">構造とプレゼンテーションの分離</q></a>、すなわち、「HTMLは文書の構造をマークアップするもので、プレゼンテーションはスタイルシートに任せる。」ということです。
___</p>
___<p>
____これは、<abbr title="Hyper Text Markup Language">HTML</abbr>の最大の目的である。
___</p>
___<a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">
____<blockquote>
_____<p>
______HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
_____</p>
____</blockquote>
___</a>
___<p>
____に基づいているのです。これこそ、HTMLがここまで普及した―最大の―要因なのですから。
___</p>
___<p><a href="#Top">閉じる</a></p>
__</section>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
    • good
    • 0

HTMLの初歩の初歩で十分だね。


業界は関係ない。
    • good
    • 0
この回答へのお礼

ありがとうございます。
業界は関係ない、の言葉に勇気をもらいました。

お礼日時:2016/04/08 16:36

とりあえずこの画面上で右クリックして「ソースを表示」といったメニューを選んでみましょう。


そうするとこのページのHTMLが表示されます。

その意味を理解できるようHTML(つまりはタグの種類と要素)を勉強しましょう。
そうすると「こういう技術を使っているのか」というのが見えて来ます。

参考まで。
    • good
    • 0
この回答へのお礼

ありがとうございます。
チンプンカンですが、ソースを確認することからはじめてみます。

お礼日時:2016/04/08 16:37

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

Qブラウザ依存?へ飛ばない

ブラウザ依存でしょうか?・・・

<li class="yyy"><a href="hoge.html#xxx">ホゲ</a></li>
と記述しているリンクをクリックして、URLは
http://hogehoge.com/hoge.html#xxx
へ移動するのですが、
hoge.html内に
<a name="#xxx" id="#xxx"></a>
と記述している指定箇所に飛んでくれません。

IE7は正常に飛んでくれますが、
Firefox, Safari, Opera, GoogleChromeなど、
IE7以外のブラウザを用いると飛んでくれないのです。

この機能はIEだけの機能だったでしょうか?
ご存知の方がいましたら、ご教授いただけると幸いです。
よろしくお願いします。

Aベストアンサー

>同html内で、例えば、ページ上部に飛ばす場合は、
><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html/別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
 <タグ id="xxx">

 →「id=」と書いているので、さらに「#」を付けて
  「これはid値ですよ」と明示する必要はありません。
 

・リンクのhrefには"#"+id値を書きます。
 同html <a href="#xxx">
 別html <a href="hoge.html#xxx">

 →「xxx」だけではパスの一部と認識するので
  「#」をつけて「これはid値ですよ」と明示します。
 →hrefにページの指定が無いなら(同html)、
  同html内の「xxx」というid値の要素へ移動します。
 →hrefにページの指定があるなら(別html)、
  指定html内の「xxx」というid値の要素へ移動します。

>同html内で、例えば、ページ上部に飛ばす場合は、
><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html/別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
 <タグ id="xxx">

 →「id=」と書いているので、さらに「#」を付けて
  「これはid値ですよ」と明示する必要はありません。
 

・リンクのhrefには"#"+id値を書きます...続きを読む

Q「のべ」人数の、「のべ」の定義・かぞえ方などをおしえてください。

どうも、お世話になります。

 必ずしも、こちらのカテゴリーだけに関するものではない、とは思うのですが、特に言葉使いとして興味があるので、教えていただければと思います。

 報道や、ものの本の中で

 「事件の時効までに、のべ20万人の捜査員を投入し・・・」
 「東大寺大仏の建設には、のべ100万人の人民が動因され・・・」

などと言ったときの、「のべ」の定義が、どうもよくわかりません。

 もし「トータル」という単純な意味だとしても、「銀河系には、全部で千億個の星がある」という時、「のべ千億個」とはあまり言わないように思いますし、もし言ったとしたら、まさしく「総計で」という意味だと思います。

 しかし、100万人の人間が奈良の都にいたら、邪魔でしょうがないでしょうがないし、20万人の捜査員を事件捜査に投入したら、警察署に警官がひとりもいなくなるような気がします。

 人数について、文章で言及したり、報道したりするときに使う「のべ」人数とは、どのような意味で使われているのでしょうか?
 「一日平均50人の捜査員を動因した」と言ったりすると、少ない気がしてありがたみが少ないんで、「のべ20万人」などと意味もない数字を使ったりするのでしょうか?

 どうも「のべ」という言い回しには、使う分野での、言外の仮定が隠されているような気がするのですが、ご教示いただければ幸いです。

どうも、お世話になります。

 必ずしも、こちらのカテゴリーだけに関するものではない、とは思うのですが、特に言葉使いとして興味があるので、教えていただければと思います。

 報道や、ものの本の中で

 「事件の時効までに、のべ20万人の捜査員を投入し・・・」
 「東大寺大仏の建設には、のべ100万人の人民が動因され・・・」

などと言ったときの、「のべ」の定義が、どうもよくわかりません。

 もし「トータル」という単純な意味だとしても、「銀河系には、全部で千億個の星がある...続きを読む

Aベストアンサー

人を単位にするときには、その事案に関わる人の生活単位から「日」を単位として使うことが暗黙の了解なのではないかと思います。
ただ、必ずしも単位が「日」にあるわけではなく、10人が1日あたり8時間づつ10日間にわたって従事した仕事量を「延べ800時間」という例もあります。
「延べ」の後にどのような単位がくるかで異なるものでしょう。

「重複計算や重畳的計算をしてます」というのが「延べ」の意味合いだというのは、既に他の方の回答にあるとおりです。

Qディレクションって何ですか??

求人広告を見ていていまして、職種;広報
”パンフレット等の印刷物のディレクションを担当して頂きます。”
っとありました。ディレクションとはどういう仕事なのでしょうか??

”広告代理店や広報、宣伝部署の経験者歓迎”とも書かれていたのですが、未経験では難しい仕事ですか??

そういう関係に全く知識のない私がわかるような御説明を宜しくお願いします。

Aベストアンサー

映画ですと、映画監督を「ディレクター」と言いますね。
シナリオを元に、俳優さんに演技をつけたり、カメラワークや美術セットのセッティングを指示したり、撮り終えたフィルムを編集して映像にあった音楽やナレーションを吹き込む…といった、制作に関する全ての方向性を決め、制作スタッフの総指揮を執る人のことを指します。

ご質問にある「印刷物のディレクション」も、ジャンルは違いますが、考え方は映画監督の仕事内容と同じです。
まず、パンフレットなど印刷物の制作目的を的確に捉えた上でその内容をまとめあげ、エディターやライター、デザイナーに制作を発注、方向付けした通りに進行しているかをチェックしながら、印刷物として完成するまでを、責任を持って一元管理する「パンフレット制作に於ける総指揮官」の役目ではないでしょうか。

>”広告代理店や広報、宣伝部署の経験者歓迎”とも書かれていたのですが、未経験では難しい仕事ですか??

その会社が、どの程度のスキルを求めているかにも依りますが、恐らく未経験では難しいと思います。とにかく、覚えなければならないことが山ほどあるので…
この手の求人では、パンフレットやカタログの制作関連の仕事など、印刷物の制作経験があることが条件となる場合が多いようです。

映画ですと、映画監督を「ディレクター」と言いますね。
シナリオを元に、俳優さんに演技をつけたり、カメラワークや美術セットのセッティングを指示したり、撮り終えたフィルムを編集して映像にあった音楽やナレーションを吹き込む…といった、制作に関する全ての方向性を決め、制作スタッフの総指揮を執る人のことを指します。

ご質問にある「印刷物のディレクション」も、ジャンルは違いますが、考え方は映画監督の仕事内容と同じです。
まず、パンフレットなど印刷物の制作目的を的確に捉えた上でその内容...続きを読む

Q丁寧な言葉で「教えてください」を表現するには?

おはようございます。
こちらではいつもお世話になっております。

こちらを利用していていつも気になってしまうことがあるのですが、質問をするときはほとんど必ず「教えてください」という言葉が質問文に入りますよね。
この「教えてください」という言葉、個人的にはそのまま書くとあまり丁寧ではない響きに感じます。

●質問●
そこで質問なのですが、丁寧な言葉で「教えてください」と伝えるための表現にはどのようなものがあるでしょうか?

できれば↑のように「どのようなものがあるか」と問うことで教えてもらうというものではなくて、「教えてください」という言葉にそのまま換われる表現を知りたいです。
また、国語のカテゴリで質問しているのに恐縮ですが、文法的に間違っていたとしても一般的に違和感のない表現であれば構いません。

みなさんが普段使ってらっしゃる丁寧な表現をぜひ知りたいです。
よろしくお願いいたします。

※「ご教示願います」という言葉も見かけるのですが、目上の方には使いにくい響きがある気がしてしまいます。この言葉の言い換えや言葉尻を変えるだけで言いやすくなる…なども教えていただけると助かります。

おはようございます。
こちらではいつもお世話になっております。

こちらを利用していていつも気になってしまうことがあるのですが、質問をするときはほとんど必ず「教えてください」という言葉が質問文に入りますよね。
この「教えてください」という言葉、個人的にはそのまま書くとあまり丁寧ではない響きに感じます。

●質問●
そこで質問なのですが、丁寧な言葉で「教えてください」と伝えるための表現にはどのようなものがあるでしょうか?

できれば↑のように「どのようなものがあるか」と問うこと...続きを読む

Aベストアンサー

はじめまして。

「教えていただけますか?」

が一番です。
女性的な上品さを持ち、かつ簡潔で、ひらひらした装飾部分がなく、理知的なイメージを与えます。

やや、丁寧なヴァリエーションは
「教えていただけますでしょうか?」
があります。

ここまでが限度ですね。それ以上の敬語(丁寧語)の装飾を施しますと、妙に軽薄なオーラが漂います。

ちなみに「ご教示」という言葉は、漢語ですので、男性的な堅さを醸し出します。女性にはエレガントではありません。

また、「~ませんか」「~ないでしょうか」という否定語との複合語は、相手に「~してくれないということはありませんよね」という二重否定の婉曲表現になっていますから、遠まわしで、素直な感じがしません。ここは素直に「~くれますか」といった肯定形が、率直でストレートに伝わります。

要は好き好きですので、ご参考になさって下さい。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q複数の画像を横にスクロールさせる方法について

複数の画像を横にスクロールさせる方法について
こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。
また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。
よろしくお願いいたします。

Aベストアンサー

NO.1番の回答者です。 追記。

NO.1では画像がで落ちるのでわかんないですね・・・

<div style="overflow:auto; width: 600px; height: 200px;">
<div style="width: 2000px;">
<img><img><img><img><img><img><img><img><img>
</div>
</div>

これを表示したら理解出来ると思いますが。
<img>は実際の画像を利用してね。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング