(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ18©2ch.net

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問大いに結構。分からない人は何回聞いても結構
(X)HTML / CSS / Dreamweaver の事なら何でもOK
ただし、JavaScript や PHP などはスレ違い / 板違い。該当スレ / 該当板でどうぞ

回答してくれる方は優しい人のみ！
質問者に対して暴言を吐く人は このスレを見るな！！

質問側も節度あるレスで！
質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ17
http://peace.2ch.net/test/read.cgi/hp/1385344752/

CS6の可変グリッドレイアウトについて教えてください。
デスクトップの可変グリッドにフルサイズの画像を挿入したいのですが
デスクトップの可変グリッドサイズは1232ｐｘで作成されています。
フルサイズで作成するにはどうすればよいのでしょうか？

さて前スレのDreamWeaverの話題、最新のCCではborder-radiusに対応している

では客がCS4など古いバージョンでの編集が可能なことを要求してる場合
border-radiusなどを使用すべきか？

>>3
そんなに悔しかったのか？
だからお前はゴミクズなんだよ

いきなり何言ってるんだ？ｗ

>さて前スレのDreamWeaverの話題、最新のCCではborder-radiusに対応している

そうなんだ。参考になったありがと！

＞では客がCS4など古いバージョンでの編集が可能なことを要求してる場合
border-radiusなどを使用すべきか？

border-radiusを使ったら客が楽できる場合は使う
border-radiusにかぎらず、客がより楽になる方を選ぶかな・・俺なら

Dreamweaverの機能を全部持ってて、よりレイアウトが正確な奴が出ればすぐ乗り換えるんだけどな

adobeは嫌い

>>5
独り言じゃね？　キチガイはほっとけ

CCです
シングル、ダブルクオーテーションの自動補完設定ができません
学校のCS5では、「 " 」を入力すると、自動的に閉じ " が補完されたのですが。
解決法をググっても出てきません
コードヒントのオプションとメニューは全てにチェック済み、終了タグは「"</"の入力後」にチェックしています

すみませんDreamweaverの話です

>>3
前スレでバージョンも明記せずに
DW貶めてたのは君？

まぁ、dwcc2014はカドマル対応してたとしてもposition表示の致命的なバグがある時点で使い物にならないんだけどな。

どういうバグがあるの？

>>14
cssパネルからposition指定しても反映されない。
一度ソースを編集(更新ではない)してやっと反映される。

致命的ってほどじゃないね

CSS関連ではパネル使わんなぁ
該当箇所へジャンプしてソースいじった方が早いし

CCって、ライブラリアイテムをデザインビューにドラッグドロップすると
変な位置にドロップされない？
これが解消されてるならアップグレード考えようかな

DreamweaverCS6を初めて使うのですが、これは知っておけってのありますか？

Dreamweaverってもう限界かもな
Adobeの買収で末路を辿ってしまったかわいそうなソフト

同じXHTML2文書ファイル内で文章の段落の始めを一字下げする場合と
一字下げしない場合とに使い分けたいのですが、
<p class="indent"></p>、<p class="noindet"></p>のようにクラス指定して
CSSで
p.indent {
text-indent: 1em;
}
p.noindet {
text-indent: 0;
}
とする方法、あるいは<br />を使ってしまう方法以外にもっとスマートで
合理的で正当な方法が何かありますでしょうか。
この方法だとたかがこの程度のことで大げさすぎる気がして。

>>21
至って普通じゃないかな？
強いて言えば、.noindentは別に指定する必要はないかもね。

他の方法としては、例えば「各々で初めのpだけインデント」みたいな法則性があるなら
p { text-indent: 1em; }
p + p { text-indent: 0; }
とかもできるけど。

>>20
お前の人生と同じだな、ホント可哀想
まあお前は誰からも買い手はつかないだろうがｗ

まあ優れたテキストエディタとブラウザの開発ツール、あと僅かの自動化ツール使える人は
要らん気がする

無料のIDEもあるし

wysiwygがどれだけ作業効率上げられるのか疑問

これだけ変化が激しい分野で、100％完璧にWYSISYGを達成して
簡単な編集を可能にするなんて、土台無理な話なのかもしれないな
Macromediaが続けてたとしても、同じようになってたかも

ただ、wysiwigないと、デザイナーは無理だよね
中途半端な再現じゃ意味ないから、inDesignなみにきっちり表示できるようにしてほしいわ

>>2

CS6可変グリッド

.gridContainerにMAXWIDTHが設定されてるので削除してはどうかな？

.gridContainer {
width: 100%;
padding-left: 0%;
padding-right: 0%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
これで100%画像を突っ込んでくれ

初期設定だと両幅に空間ができる
特にスマホで両端に隙間ができるのはいかん
320PXのアイホンで更に狭く使ってどうする
幅は100%がお勧め

>>26
そんなあなたにadobe muse

ペタペタ張り付けるだけ
クリックだけでアップロードも可能
しかもjqwery pluginがddで実装可能

>>28
おっ、これいいな
でもCSバージョンはないんだね
これ、サイトはDreamweaverで作って、Museでブラウザ編集の部分だけ可能にすることも出来るのかな？

可変グリッドって使い心とどう？
Gridって自作も可能だし、DWの可変グリッドの利点は何なん？

museがいいなんて制作者はじめてみたわ
クラに納品できるレベルのものなんてとてもじゃないができないよ？

>>29
サイト全体のインポートは出来ないと思うよ
HTML一部の挿入はできるからinframeで外部サイト
を参照とかならいけるかも
>>30
利点は特にないけど便利機能が少しあるｗ
http://i.imgur.com/uIhk6dc.png
こんな感じでDIV箱の大きさをデバイスごとにマウスで設定したり
表示非表示、フロート、コピー、順番の入れ替え、ゴミ箱、が
アイコンクリックで極楽に行える便利機能ｗ
>>31
デザイナー向けのツールでっせ
下請けには向かない
相手が素人ならわかりゃしないっすよｗ

http://i.imgur.com/O9SqgdL.png
htmlでHP作成を勉強し始めました
この画像のように文章とか内容の背景は白に、周り（青いとこ）を背景画像のようにするにはどうしたらよいですか？

>>33
background

>>32
詳細なお答えありがと
Muse自体で作らないとダメなんだね。ちょっと残念
逆に、簡単な編集はDreamweaverでブラウザ編集を可能にすればいいのにね。

>>32
Gridはこれから先も必須になっていくだろうけど
客に編集可能にさせる所が難しいよね。
客にDW触らせるのはよりいっそう無理になっていきそうだしなぁ

これとは違うの？
http://www.adobe.com/jp/products/contribute.html

>>37
なにこれ？買いきりでこんなのあったとは知らなかった

adobeは他にもレスポンシブサイト様のrefてのがあるし。
ccで体験版になってるけど実はプロトタイプなんでそのまま使えるんだよね

コントリビュートは悪くないソフトだと思うんだけど
あんまり知名度高くないんだよね

ブラウザから見てるページをすぐに編集できるから
活用の場面は結構あるのかなと思うんだけどね

>>37
あれ？Contributeって生産中止じゃなかったけ？

CCって、CSSのcalc()に対応して表示できてる？

質問
可変Gridで、HeaderとFooterだけブラウザ横幅100％の帯を表示するにはどうすればいいのでしょう？
横幅が1232pxに固定されているようですが、これは変えられるんでしょうか？

>>34
それだと全背景画像になって>>33の画像のように文章のとこだけ白にできないです…
どこか間違ってるかんじですか？

>>43
青い大きな紙の上に
白い紙を重ねるイメージで考えて

jqueyプラグインのtubularで全画面に動画が再生されるようになりました。
可変グリッドを使ってるのですが、スマホ、タブレットの場合は動画は無効にし
画像を表示したいのですがどうやればいいのでしょうか。

>>42だけど、自己解決しました

>>45
メディアクエリーの
スマホ以上で
dispray none
で非表示で良いんでないの？

>>44
HTMLだけでは色々工夫しても自分の技術では思った通りにいかなく
CSSというのに辿り着き>>33で思ってることができました

これでもいいのですか？

>>47
display noneでも非表示になりませんでした。

>>49
css見してちょ

>>50
スクリプトをdiv＝class"tubular”で囲み
CSSを以下のようにしました。
.tubular {
display:none;
}

>>51
この情報だけでではなんとも？
pc タブレットでも無反応でしょうか？

>>51
ちなみに消したい理由は？
cssで消すと表示しなくても読み込まれちゃうけどいいの？

ためしにPCをdisplay:noneで消せるか試しましたができなかったです。
消したい理由はPC以外に動画は重たいかと思って・・・
と思ったらｃｓｓでは表示しなくても読み込まれるのですか・・・

サイズが決まっているdiv内に画像とテキストがあります
テキストがはみ出ない程度に画像を自動縮小する方法はありますか？
テキストのサイズは可変です。よろしくです

>>51
スクリプトを囲んだの？
それとも表示領域を囲んだの？

>>56
以下のようにスクリプト部分を囲みました。
試しにデスクトップで非表示になるか試しましたが非表示になりませんでした。

CSS
@media only screen and (min-width: 769px) {
.tubular {
display:none;
}

HTML5
<div class="tubular">
<スクリプト>

</スクリプト>
</div>

スクリプトの中身がエラーで書けない；；

公式のだと

#tubular-container{
display:none;
}
で消えるけど

>>55
自動の意味がわからないが
普通にwidth指定height auto
てこと？

>>55
サイズが決まってるなら画像を固定サイズで指定すればいいでしょ
テキストのサイズが可変の意味が分からん
固定サイズ内に収めればいいじゃないか

>>62-63
説明が足りなかったです。すみません
そのdivの中に入る画像とテキストが【動的に変わる】ということです
テキストが長い場合、テキストがちゃんと収まるように画像を縮小したいです

>>57
スクリプトか表示領域か聞かれてスクリプトって答えるってことは<script>〜</script>を囲んだってことだよね？
それじゃあだめだと思うけど。

>>64
無理だと思う。
divの固定の大きさを十分に大きくしておくか、divのサイズを可変にするか、スクロールをつけるのが普通だろう。
どうしても実現したいならJavaScriptを使うしかないかと。それでもなかなか難しいと思うが…

>>64
動的に変わるのは理解したけど、何のサイズが固定なの？
http://jsfiddle.net/ にコードをUPしてくれた方がわかりやすいと思うけど

>>64
縦横比をキープすると隙間できるけど
それはいいの？

誰か>>10->>11の回答をお願いします

Dreamweaver CCってデザインビューでdisplay:flexは表示されますか？

旬のデザインって何ですか？

文字列数が表示する前にわかるのならphpでも可能そうではあるよね

>>70
2014では表示されてないよ
体験版落としてみたら？

<br>はあまり使わないほうがいいと聞いたのですが
下記のような文が続く場合はどちらが正しいでしょうか？

<p>〜すると<br>
<ul>
　<li>〜</li>
　<li>〜</li>
</ul>
になりました。</p>

<p>〜すると</p>
<ul>
　<li>〜</li>
　<li>〜</li>
</ul>
<p>になりました。</p>

上は文法的に誤り（pはulを内包できない）
なので下が正解になる

段落が分断されるのは変に感じるかもしれないが
そもそもHTMLにおける段落は、言語としての段落とは異なり
「前後に改行をともなうテキストの集合」のことを表しているので
意味の通る文章として成立していなくても段落となり得る

>>75に便乗するけど、HTML Standardで全く同じ例が載っているので、ご参考までに
https://html.spec.whatwg.org/multipage/semantics.html#the-p-element:the-ol-element-2

>>75
詳しくありがとう。
まさに疑問に感じてたツボでした。

>>76
ありがとう。そのままですね。
<div>を使えば上でもいいいってことですね（たぶん）。

>>77
divの直下にテキストを書くのはNG

>>78
そう思ったが上のサイト書いてるな
ここ信頼置けるのか？

文法上はdiv直下にテキストを書いてもいい
ただ、それだとテキスト自体には何の意味付けもされず
それはbody直下にテキストを直接書いてるのと変わらないじゃないか、
というのがNGと言われる理由

http://toyota-saiyo.com/biz/

このサイトの上半分だけ真似したいんだけど難しい？
画像が変わっていくのと「会社情報」とか書いてあるリンクの部分

>>81
jquery関連スレへどーぞ

CSSだけでも作れるけどめんどくささ半端ないからJSで作った方がいい

2年前くらいに作ったけどこれが自分の限界だった
アニメーションプルダウンメニュー（CSSのみ）
https://dl.dropboxusercontent.com/u/8986926/test.html
コレと合わせれば似たようなことはできる（と思う）
https://dl.dropboxusercontent.com/u/8986926/test006.html

質問
ブラウザの画面を拡大縮小しても、画像を全画面に表示したいのですが
画像の縦横比を変えずに、しかも余白無しで表示するにはどうすればいいのでしょう？

縦横比4：3の画像があったとして
画面が4：3より横長の場合は、画像の横幅を100％にして、縦をauto
画面が4：3より縦長の場合は、画像の縦を100％にして横をauto
…と、ここまでは思いついたのですが、これをどう記述するべきか

CSSだけじゃ無理ですかね？

>>85ですが、
JavaScript使ったら、画面の比率に応じた条件分岐ができちゃった！　ビックリ！
JavaScriptは全然初心者なもので、お騒がせしました。

>>85ですが、
backgounrd-size:coverで出来る事だった orz

>>87
ieで不具合なかったっけ？

>>88
そうでしたっけ？そうかもしれないですね。
ieは取り敢えず無視ｗ

可変グリッドレイアウトの列数って途中でどうやったら変えれるの？

初心者です。
コード書くとき入れ子になるタグはタブで空白空けてますが
みなさんはどうしてますか？

私は空けてません。


って意見が多かったら空けるのやめんの？
それが自分にとって書きにくくても？

>>92
はぁ、そんな訳ないだろ・・・
参考にしようと思ってるだけ。

今どきWeb Fontに対応してないDreamweaverって

>>93
自己判断できないならGoogleのガイドラインにでも従っておけばいいよ
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

>>94
バージョンも記載せずw

>>95
おまえアスペかよ

可変グリッドレイアウトで複数ページ作成はどうやればいいのでしょうか？

>>98
初期設定はないよ
コピペじゃ駄目なんか？