HTML/CSS のどんな質問に必ず優しく答えるスレ 31
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>54
DWかどうかは別として環境統一してないほうがロクな会社じゃないだろ…
数人規模とかなら別だけど Atom 194件
Sublime 205件
Dreamweaver 5483件
求人件数 indeed調べ >>55
おいおいEditorConfigも使えないDWで環境統一できんのかよ >>55
現場でお仕事したことないからそんなこと言えるんだろうな。ほんとに現役のコーダー（笑）さんですか？ DWって使ったことないんだけどすぐに覚えられるのかな？ 覚えることなんてコーディング以外になにかあんのか？ DWをただのテキストエディタとして使えばいいよｗ
そうすりゃDWのクソな使い方を覚える必要はない DWは削除のショートカットが間違いやすいという恐怖仕様だったな
あれのせいで使うのやめた dwこだわってるやつ多すぎだろw
はなからビヘイビア？とか使ってる奴なんていないしコードかくのってスクラッチ前提だろ
余計な機能がついてて分かりにくい！とかさー使うわなきゃいいだけじゃんそんな機能
重いとかいうけど別にどれもたいして変わらないーって思ったけどカフェでノート勢か!そりゃ重いのきになるねw 重さはエディタによってまじで違う。重さの違いがわからないなんて、対したソース書いたこと無いんだろうな 自分今台湾のシリコンバレーと言われている場所へ週に何度か行って
現地のエンジニアさんと一緒に仕事するんだけど
DW使ってるの一人も見たことないｗ
VSCが一番多いかな。
DWでも良いけど効率落ちるよね。
社内がソレ指定してるんなら仕方ないが。 世界的に見ても超絶圧倒的にVSCだろうな
DW指定の会社なんて素人集団だろ。テーブルレイアウトとかしてそう わかりやすいDWディス基地の再来www
あんな過去ソフトほっときゃいいのに相当根が深いな 丁度いいからvscで聞きたいんだけどtag〜tagの選択ってどうしてる？
sublimeでいうとctrl+,のやつ
ショートカットみても乗ってないんだよね Adobeってフォトショやイラレについては圧倒的なシェアのはず？なのに
DWについてはダメダメなのね >>70
閉じてShiftクリックで全選択しちゃうわ
>>71
フォトショやイラレはそれに変わるツールが中々ないからな。
コーディングに関してはメモ帳でもできることだし、それだけツールが充実してる <td>にvertical-align設定してもきかないんだけどなんでかな…
<td style="vertical-align:top">
連絡先:<span style="display:inline-block">mail<br>twitter</span>
</td>
これで連絡先の部分が下にくっついちゃってかっこわるい
上にくっつけたいんだけど… >>73
vertical-align:top;をspanに移してみる わああ すごいすごい
うまくいきました！！！
ありがとうございます！
でも span の範囲の外なのになんで valaign されるの？？？
なんでこうなるのかぜんぜん意味がわからない… >73-74
これ何で変わるの？
flexに頼り切りだからマジでわからん またわからないことがおこったんだけど…
<div style="display:inline-block; min-width:33%; margin:0">１</div>
<div style="display:inline-block; min-width:33%; margin:0">２</div>
<div style="display:inline-block; min-width:33%; margin:0">３</div>
これでなんで３行になっちゃうの？
横に３つならべたいんだけど ならないよ
<div>1</div><div>1</div><div>1</div>
div {
display: inline-block;
min-width: 33%;
} paddingかなんかはいってるんじゃない
それか改行文字が半角スペースになっているか 親要素にletter-spacing: -.4em;
インラインブロックにした子要素にletter-spacing: normal;
ググれば15秒で解決するから、少しは自分で調べよう CSS animationで文字をゆっくりと移動させるとChromeで見た場合に文字が点滅したような状態になってしまいます
検索して出てきたちらつきを抑える対処法はやってみても変わりませんでした
これはどう直せばいいでしょうか？
https://jsfiddle.net/kc01rckj/ 最初にDWがSassに対応してなくて覚える気がしないって書いた者だけど、
HTML/CSS中心の作業ならDW以外だと結局何のエディタがいいのかわからないんだが
この条件満たせるのってDW以外は無いよね・・？
・文字コード変換ができる（重要）
・ecc-jp、shift-jisにも対応している（重要）
・html、jQuery、phpのシンタックスエラーをその場で知らせてくれる（重要）
・html/cssの入力補完機能（候補表示）がある（重要）
・Sassに対応している
・フォルダ丸ごと置換できる（どこを置換したかの結果も表示）（やや重要）
・正規表現が使える（やや重要）
・htmlの入れ子構造が表示される（重要度低）
・タブで複数ファイル開けて、タブ自体に閉じるボタンが付いてる（重要度低）
・ブラウザプレビューに複数のブラウザ登録できる（重要度低）
・テーブル構造が視覚的にわかりやすい（重要度低）
・クリッカブルマップ使える（重要度低） >>80,81
ありがとうございます
改行せずに１行でかいたらおりかえさなくなりました
タグの外に改行入るだけでもダメなんですね…
うー；； ソースかなりみにくくなる… >>84
どのエディタでも大抵できるよ。フリーだから落として比べてみるといいよ
DW使ってると馴染みないと思うけど、
他のエディタはエクステンション追加で機能拡張できる。
他にもやりたいと思ったことが大抵はエクステンションで解決するはず。
拡張性の高さで言えばAtomかBracketsかな
ただ、今からその手のエディタに手を出すならVScode一択と言ってもいいくらい世界的に流行してる >>85
flex使え
<div>
<p>a</p>
<p>a</p>
<p>a</p>
</div>
div {
display: flex;
}
p {
width: 33%;
border: solid 1px red;
} >>83
スマホのChromeで見たけど別にちらついたりはしなかったよ？ 感情の原因はそれを感じる者自身の固定観念・価値観・自己ルール
解釈の原因は情報発信者ではなく受信者。誤解の原因も解釈者
「言葉 風紀 世相の乱れ」はそう感じる人の心の乱れの自己投影
問題解決力の低い者ほど自己防衛の為に礼儀作法やマナーを要求する
憤怒は無知 無能の自己証明。中途半端な知識主ほど辛辣に批判する
論理的思考力の低い者ほどデマ宗教フェイク迷信に感化傾倒陶酔洗脳
史上最も売れているトンデモ本は聖書。神は人間の創造物
全ては必然。偶然 奇跡 理不尽 不条理は思考停止 視野狭窄の産物
人生存在現象に元々意味価値理由目的はない
「真実は一つ」は錯誤。執着する者ほど矛盾を体験（争い煩悩）する
宗教民族領土貧困は争いの原因ではなく「理由口実動機言訳切欠」
社会問題の根本原因は低水準教育。必要なのは適切十分な高度教育
体罰は指導力・問題解決力の乏しい教育素人の独善甘え怠慢責任転嫁
死刑は民度の低い排他的集団リンチ殺人。「死ねば償える」は偽善
核武装論は人間不信と劣等感に苛まれた臆病な外交素人の精神安定剤
投票率低下は社会成熟の結果。奇人変人の当選は議員数過多の徴候
感情自己責任論 〜学校では教えない合理主義哲学〜 m9｀･ω･) 自分のハードウェアの問題だったのですね
回避はできないようなので諦めます フリーランスでWebデザイナーになりたいと思っている、17歳です。四月から通信高校に2年間通います。
通うのは週に一度だけなので、他の日はwebデザイナーになるための勉強を独学でしようと思っています。ちなみにすでに少しhtml cssをやっています。フリーランスでやっていくにはなんの知識が必要ですか？phpは？
あと、卒業したらフリーランスしながらも他の仕事をして稼ぎたいです。例えば、ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。などです。
どう思いますか？ >>86
流行と出来るかできないかは別だろ…
vcsはhtml/cssエディタでみたら上にあげてる項目ほとんどできないじゃん？
その他のエディタもタグのアウトライン関連は弱いしbracketはdwが吸収したしっしょ？(もちろん開発が続いてるのは知ってる)
vscや他のフリーエディターが悪いっていってるわけじゃなくてさ >>93
＞ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。
意味がわからん
他の仕事なんてやってる暇ないぞ
ひたすら最先端のデザインとツールの使い方を覚え無くてはならない
今はweb系のバイトで働くのが一番の近道
うまく行けば仕事も取ることができるだろう >>94
おいおい大抵できるぞ。使ったことあるか？
流行るのには理由がある、それだけ使い勝手が良いってこと
使い勝手悪ければ流行らない 物心ついたときにパソコンに入ってたのがDWだったから…コード画面以外の機能ほとんどさわったことない エディタ関連の話はこのスレで話すよりググったほうがいい
まぁ大半がググれば解決するようなことばっかなんだけどな >>96
Pluginの解説が英語だけだと躊躇するタイプなんじゃね？
英会話じゃないんだから
海外のサイトでも落ち着いて読めば理解できるのにな <div class="button large">
<a href="#">ホーム</a>
</div>
みたいな書き方してるサイトで
<div class="large">
<a href="#">ホーム</a>
</div>
ってやっても large にならないんだけど
特定のクラスと一緒にかいたときだけ反応するクラスみたいなのつくれるの？ クラスを２個ならべると自分より下のクラスに適用ってきいたんですけど
同一階層で並べても大丈夫なんですね
教えていただいてありがとうございます あれ；； おおきくならない なんで？
これどっかまちがってる？
<style>
<!--
.button a { border:solid 1px black; text-align:center; text-decoration:none; }
.button a:hover { opacity:0.5; }
.button .large a { font-size:large; padding:0.5ex 1ex; }
-->
</style>
<div class="button large">
<a href="#">ホーム</a>
</div> >>104
あれ；；？じゃねーよ
それがどうやったら>>102と同じに見えるんだ？
聞くのはいいけどちゃんと見てやれよ >>103
この2つは別物
.button.large{〜〜〜}
.button .large{〜〜〜｝ ごめんなさい くっつけてかかないといけないんですね
ありがとうございます >>108
>>107ですけど自分ですか？ エディタ？ Chromeですけど >>110
そりゃブラウザだろｗ
HTMLやCSSをどのソフトで作成して保存してるのかっていう話でしょ >>93
頼むから一度、web制作会社に身を投じる事を経験してから独立してくれ。
業界経験すらない素人が起業とかマジやめてくれ。
店舗だったらどう？材料、機材、店舗、集客、客層、ライバル、立地、経理、とか経営の事わからないでお店だす気する？
市場の評価（クオリティ）と価格を破壊するだけだからマジやめて。 素人でもいきなり起業できちゃう業界って思われてる時点でこの業界もダメだなこりゃｗ
単価が上らん訳だ・・ >>111
んー FC2ホームページのソース表示で編集ってやつだけどあれ何っていうエディタなのかな
タグに色つくからすごい見やすいです 日本のWEBは終わってるから今から勉強するなら英語とセットでしっかり勉強してアメリカかカナダ行きなさい。
20年遅れてるんだよ。君が生まれる3年前のアメリカのWEBに、日本はやっと追いついたんだ >>104のスタイルで
<ul class="button">
<li><a href="#">次へ</a></li>
<li><a href="#">前へ</a></li>
<li><a href="#">上へ</a></li>
</ul>
ってやるだけでなんで３つともボタンになるの？
ＵＬ全体が１個のボタンになりそうなのに すごいclass名だ
せめてbuttonsとかにしてほしい >>118
自分の書き方は基本的に単数形だな
<ul class="button"><li><a>
でも
<li class="button"><a>
でも
<p class="button"><a>
でもいける >>118
複数形とか命名センスなさすぎ
せめてbuttonContainerとかbuttonListとかでしょ >>118
わざわざ文字数増やしてどうすんのbtnでしょ母音無しが基本 CSSだけで縦横のサイズが異なる画像を等間隔で並べる方法ってあります？
float:leftを使えば自動的に横に並び、
入りきらない分は次の行に行きますが、
画像に正方形じゃないのがあると上下の位置がガタガタになって上手く並びません。
また、なぜか一行だけ右端に一個だけ配置されて次の行に行く場合がありました。 .justifyLayout > * {
display : inline-block;
}
.justifyLayout img {
vertical-align: middle;
}
<ul class="justifyLayout">
<li><img src="http://placehold.jp/100x200.jpg";></li>
<li><img src="http://placehold.jp/200x200.jpg";></li>
<li><img src="http://placehold.jp/200x100.jpg";></li>
<li><img src="http://placehold.jp/200x100.jpg";></li>
<li><img src="http://placehold.jp/200x200.jpg";></li>
<li><img src="http://placehold.jp/100x200.jpg";></li>
</ul> ごめんこれもいる
ul.justifyLayout {
list-style-type: none;
} 縦横比がばらばらなだけでサイズ近いのがそろってるならそれでいいけど
サイズ自体もばらばらなら正方形の固定サイズのboxを並べて
max-width min-width指定するほうがきれいかもね >>119-121
すまん普段しないから変なことしてしまった
普段ならliにbuttonかulにnavをラップしてそのnavにclass付けるとこだわ >>123-125
ありがとうございます。
右に一個だけ配置される行が出来る現象は無くなりました。
＞サイズ自体もばらばらなら
幅は%で固定にしていますが
そもそもこの並べ方だと、他よりかなり縦に長い画像があるとその行だけ縦に長くなりますね
max-heightとoverflow:hiddenを指定すると、縦の長さは短くなりますが、画像は上の方だけが切られて表示されます
あまり縦に長い場合は画像を予め表示したい部分だけ切る加工をするか
画像に余白を付けるしか無いのかもしれません 仕様をはっきり定義すれば何とでもできるが先に定義しないと
今 width: きめうちで横幅固定してるんだろうけどそれだと縦長の画像は拡大される
width: を max-width: にかえて height:auto; と max-height: 指定すれば高さも上限で縮小することもできる
その場合もちろん縦長の画像の横幅はせまくなるのでそろわなくなるが 質問者じゃないけど width の 33% の正方形に自動縮小して表示ってできる？
pixやem使わずに縦に横幅の%指定と同じ長さにするってＣＳＳできるのかな 親要素からの指定はないんじゃないかな
vw使えば画面全体からの割合幅はとれるけど
メニューと２列になってたりbodyにmarginやpadding設定してあったりしたらうまくn等分にはならないだろうけど >>129
思いっきり質問で笑った
できる
css 比率 固定
とかでぐぐればなんぼでも答えが出てくるよ
ただ個人的にはあまり好きではないな >>129 はアスペクト比を固定して拡縮したいって意味だったのかな
だったらできるね
てっきりwidthの33%分の長さと同じ高さの正方形に収めたいって意味かと思ったわ いわゆる3分の1にしたいときって
calc(100% / 3)
33%
33.333%
とかのうちどれ使ってる?
古いieに対応しなくちゃだめーとかだと
33.333%
かな? HTMLやCSSのソースをタグをエスケープして
キーワードやタグにハイライトつけてHTMLに変換する方法ってないですか？ >>134
calc(100% / 3)
でいいんじゃね
古いのに対応させるなら、もうざっくりと33%でいいと思う >>135
ハイライト コード html
あたりで検索すれば割りと出て来る jsライブラリみたいなのはあるけどどれも大変そう
左の入力欄にはったら右のテキストエリアのハイライト付のHTMLソースでてくるみたいなお手軽サイトないんですね…
あきらめます＞＜ 世の中いろんな暇人がいるとは言えそんな特殊な要望にピンポイントでこたえてるツールなんてあるにしても探すの大変そう…
自分だったらライブラリ使ってnodeスクリプト書くけどめんどくさいならhttps://codepen.io/penとかにコード貼るとハイライトされるからそれコピーしてWordとかのhtml保存対応のリッチテキストエディタに張り付けてhtmlで保存すれば？ まぁこの人は質問して答えをそのまま使いたいだけの人だから適当にあしらえばいい >回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！ >>134
sassのpercentage使うのが主流じゃない？
33.33333%にコンパイルされる 定期的に現れるsass使えば基地はなんなの？
そもそも今回なんて質問の意味すら理解できてないし >>145
ああそれいつも思う
sassは別スレにした方がいい
話変わってくるからな ごく普通の二つのselectをdivの中に入れて横並びにしました。
＜select＞
＜option＞111＜/option＞
＜option＞222＜/option＞
＜/select＞
＜select＞
＜option＞１１１＜/option＞
＜option＞２２２＜/option＞
＜/select＞
optionの文字列は最初のやつは全部半角文字、二番目のやつは全角文字です。
そうすると何故か、
[111][２２２]のように水平に並ばずに、二番目のselectが数ピクセル上にずれて表示されます。
原因と対策を教えてください。 >>147
テキストの baseline が整列しているからじゃないか？
optionを vertical-align: top にすれば上端が整列するかもしれないが
コントロールなので効かないかも >>147
半角数字（英数）と全角数字（日本語）だからじゃない？ vertical-align: topで解決するね >>148>>149>>150
select {
vertical-align: top;
}
で解決しました。ありがとうございました。 jQueryスレできいたのですがこちらの方がいいと思って来ました
<tag data-hoge=値>でなく
HTML <tag hoge=値>
CSS [hoge] {}
は独自属性(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） >>152
翻訳版だけど。
＞独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、
＞ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
http://www.html5.jp/tag/attributes/data.html
好き勝手に付けたらバッティングする可能性が普通にあるから"data-foo"となっている 変なおじさんスレできいたのですがこちらの方がいいと思って来ました
HTML <unkochinchin></unkochinchin>
CSS unkochinchin {}
は独自要素(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） ■ このスレッドは過去ログ倉庫に格納されています
