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 前スレに書いてしまった。 キャプション折り返す奴はこれでいいだろ
<style>
.hoge{
display: table;
width: 0.1%;
}
</style>
<figure class="hoge">
<img src="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png";>
<figcaption>
あともう１つききたいんですけど
画像の下に長い文章かいたときに画像の幅で折り返すっていうの画像の幅を指定せずにかけたりしますか？
</figcaption>
</figure> 俺が書けたりします（できます）て答えたのに
できないって事で勝手に進めるなよな やっぱりここにいるプロの方でもすぐできない難しいことみたいだしあきらめます
ありがとうございました 今度はなりすましもNGって書いておかないとな
すぐにバレるのに 996 名前：Name_Not_Found[sage] 投稿日：2018/01/27(土) 21:23:01.87 ID:???
>>994
わああああああああ
素敵すぎます
できるだけじゃなくてこんなシンプルにかけるんですね
ありがたく使わせていただきます
作ってもらってばっかりでほんと申し訳ないんです
HTML勉強したのが4.01トラディショナルとかだったので
float left ぐらいでしか特殊レイアウトできなくて
いまdisplay スタイルでいろんなことができちゃうんですね
ほんと学校でＣＳＳ勉強したかったです＞＜ >>10
トラディショナルじゃなくて、
トランジショナルな。 親となるブロック要素の、最初の子要素にmargin-topがあると
親ブロック要素そのものの位置が変わってしまうように見えるのはなぜでしょうか
* { margin: 0; padding: 0; }
div.parent { background-color: pink; }
p.child { background-color: green; margin-top: 30px; }
p.test { background-color: blue; }
<div class="parent"><p class="child">child</p></div>
上のように書くと、divの座標自体が30px分下にずれてしまいます
最初に30pxの高さのdivの背景色pinkが、次に背景色greenのpの領域が、表示されるものとばかり考えていました
<div class="parent"><p class="test">test</p><p class="child">child</p></div>
このように最初の子要素にmarginを持たない<p>が入る場合は期待通りになります 何が困るのかというと
>>12の例では親ブロック要素が30px分下がった位置から開始されてしまうため
親ブロック要素の高さを固定値で指定していて高さが300pxだとすると
親ブロック要素が終わる位置が330pxになってしまいます
最初の子要素にmarginではなくpaddingで指定しておけば
>>12の例ではおおよそ期待通りになります
marginではなくpaddingなので当然これはこれで困る場面もあるんですが
どういう仕組みでこういうことになるんでしょうか 自己解決しました
CSSの仕様にきっちり書かれてました・・・ ttp://vr-lab.voyagegroup.com/entry/2016/11/16/122115
ここのサイトを参考にしてHTMLのDIV要素をA-Frameライブラリで描画しようと思ったんだけど、
VR空間に描画した平面オブジェクトのほかに元となるDIV要素も表示してしまうのって何とかならないかな
元のDIV要素だけ消したくてCSSのdisplayプロパティやvisibilityプロパティも試してみたんだけどVR空間での表示も消えてしまうんだよね 自作のWEBサイトで、自分がアクセスした場合には、[管理者]みたいなボタン
を表示したいのです。
自分のIPアドレスが固定ならそのIPで判断できますが、IPアドレスがよく変わるんです。ですのでIPアドレスで判定する方法が使えません。
良い方法を教えてください。 それphpとかrailsとかでやる話ではなくて？
ブラウザ側でやるの？？？ じゃこのスレの担当分を回答しときますね。
<button>[管理者]</button> >>17
アクセスしてきた人をいわゆる"認証"以外で判断する方法はない
管理者用ログインページのURLをリンク・公表せずに、ブラウザのアドレス欄に直入力するのがベスト
URLを公表していなくても通信傍受などでバレることはあるのでパスワード制限は必須 >>21
ありがとうございます。
良く分からないのですが、
私の自宅からそのサイトにアクセスしていて
誰がどういう手段で通信傍受をするのでしょうか？
簡単な例を教えて下さい。 >>21
スレ違いに甘い顔して調子に乗らせたんだから最後まで責任とれよ？逃げんなよ？ >>17>>22
ログインすればいいだけだろう
そういうシステムを0から作るよりも、wordpressを覚えてログイン周りだけはwordpressに任せたほうが良い >>22
通信傍受をマネする人が出ないとも限らないのであえて難しい方法で
パソコンにウイルスを仕込んで、アクセスしているURLを入手する
一般的にはキーロガーも一緒に仕込んでURLとパスワードをセットにして入手するでしょうけどね >>12のマージン相殺ってなんで横方向では起きないんだろうか
歴史的経緯とか？組版由来？ >>22
私たちはGoogle先生に常にアクセスを報告してます 質問ですが、facebookの個人アカウントの投稿内容をタイムラインとして運営サイトに埋め込みたいのですが、
上手くいきません(タイムラインとしてサイトに表示されない)
どうすればタイムラインとして表示可能でしょうか？ 何も表示されないならタグミスだし
違うものが表示されるなら埋め込んでるＵＲＬが違うだけだからこのスレの範疇じゃない アドブロックが有効になっていましたというオチを期待 やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた（防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官）
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/ DWのCS3使ってるんだけど、
Sassと互換性ないからSassを覚える気になれない。
どうしたもんかのお いま必要ないものを無理に学んでも
ほとんどの場合は幸せにならない >>34
いまドリ使ってる人中々いないぞ
VScode
Brackets
Atom
SublimeText
などなどフリーの高機能エディタの方が圧倒的に現場で使われてる >>36
vsc まだまだ微妙
brackets プチフリ多発
atom 重い
sublime バグあり
dw 検索便利
お前のいう現場はどこのなんの現場で何に使われてるの？
ほんとに圧倒的というほど現場を見てきたの？ brackets→VSCodeと来たけどオーサリングソフトも使ってみたいぜ。
まだまだDWなの？Museってどう？使いもんになってる？ 俺は旧dw→dwcs→bracket→dwcc→sublimeだけどたまにdwも使うな
テーブルとか作るの楽だし確かに検索も使いやすいよね
他のはプレビュー機能がなぁーって感じもする
museは結局position.absoウンコ書き出しだろ museダメなのか…がっくし
どうせブラウザでの挙動確認しながらやるのでプレビューはいいんだがローカルサーバー立てるのbracketsはデフォの稲妻ボタン一発で楽だったな。
VSCodeではコマンドで立ち上げてる。拡張機能あるんだろうけどなまくらして調べてない。 DWなんて正規表現使うときしか開かんわ
拡張出来ないし無駄な機能多いし起動遅いし >>40
知らなかったらなんだ？
じゃあgoogleで圧倒的な現場の数を確認できる方法おしえてよ >>43
現場で仕事したことある？
https://www.slideshare.net/mobile/uzuflat/2016-66421027
2年前のアンケートですらドリとそれ以外とで圧倒的な差があるのは見てわかるよね？
逆に圧倒的にドリ以外のエディタが使われてないソースを提示しておくれよ >>44
SublimeTextがDWの2倍以上あるね
たぶん今はAtomが一番で、SublimeTextが二番
DWは三番以下に落ちていそう >>45
今はAtomとVScodeで1位で2位争ってる気がするな。
うちの会社では半数以上がAtomからVScodeに乗り換えてた
Sublimerはガクっと減った印象。DW使いはここ数年で見かけたことないわ 俺もSublimeTextからatomに乗り換えた
atomは当初、PCとの相性か何かでものすごく重かったんだけど今はそんな問題なくなってるみたいね
しかしMSがVScodeなんて神アプリダストは思わなかったゾ AnglarはVScodeとTypeScriptで開発されてるらしいゾ。 ＤＷ 対 フリー高機能エディター(全て) ってくくりは流石にハンデ有りすぎるだろwww
イラレフォトショつかうためにCC入ってりゃ一緒に使えるんだしウェブデザイナーってくくりでいったらフリーソフトみたいなもんじゃないの うちは地方都市だけど
Webデザイナーの求人見てたら
まだちょくちょくフォトショイラレに加えてDW使える方
って条件をよく見るよ
むしろDW以外のソフト名が書かれてるのは見たことないｗ DWはいいのに後継のmuseがダメなのはなぜ？
position.absoウンコ書き出しってどういうこと？
使ってみたことある人くわしく教えて >>50
Adobe使うんだからdwはデフォ、使えて(使ったことあって)当たり前でその他のフリーエディターは個人で効率アップで使うならお好きにどうぞってかんじでだろうね >>51
MuseはDWの後継じゃないよ
どちらかというとビルダーとかのどこでも配置系の流れ ハンデもクソも無いけどな。実際にDWが現場で使われてるか使われてないかって話じゃないの？
まぁもしも社員全員がDW使ってるような会社があんならロクな制作会社じゃないだろうな。まじで。 >>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の解説が英語だけだと躊躇するタイプなんじゃね？
英会話じゃないんだから
海外のサイトでも落ち着いて読めば理解できるのにな ■ このスレッドは過去ログ倉庫に格納されています
