HTML/CSS の質問に優しく答えるスレ 30
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を age にすることをおすすめします
回答してくれる方は優しい人のみ！質問者に対して暴言を吐く人は このスレを見るな！！終わった話を蒸し返すやつは このスレにくるな！！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 29
http://mevius.2ch.net/test/read.cgi/hp/1503136885/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494233240/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>777
いい加減関係ない人は首を出さないでくれないかね？
俺は質問者と話をしてるんだよ プログラム板C++のスレで話題になっているんだが、
http://mevius.2ch.net/test/read.cgi/tech/1511509970/
日本語と英単語が混在した文章で、
英単語と日本語の境界に半角スペースを（見た目だけ）挿入するのって、CSSだけじゃ無理だよな？
具体的には、「定数を示すキーワードは const です」みたいに表示するとか。 利益の有無は質問者が判断すればいいことであって、第三者がいちいち突っかかることが無意味 >>782
無理だなぁ
英語だけ幅広フォントで
ーワードは c o n s t で
みたいなのなら実現できるけど。フォントから作らんとアカンけど。 >>784
やっぱそうか。サンクス。
どうやら今は半角スペースを文書内に混ぜているようだから、需要はあるって事で、
標準化に携わっている奴が居たら提案しておいてくれ。 やるならjavascriptで正規表現でa-zと先頭末尾を識別してタグ挿入とかだろな >>782
せいぜいこんな感じじゃないかな
<p lang="ja">定数を示すキーワードは<span lang="en">const</span>です</p>
p[lang=ja] > span[lang=en]:before,
p[lang=ja] > span[lang=en]:after{content:" ";}
タグを使わずに、文章内の一部分に適用するのは無理
スタイルはタグ（要素）に適用されるものだから >>787
一文字目だけに適用されるcssもある
使ったこと無いし名前も忘れたけど >>788
:first-letter擬似要素
日本人には馴染みがないんだけど
英語には最初の文字を強調して段落をわかりやすくするinitial capsていう文化があるんよ
raised（上）、drop（下）、hanging（横）にはみ出させるのがある >>787
MDNの ::first-letter のページでは、半角スペースが挿入されている。
https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter
自動挿入する場合はタグでも半角スペースでも手間は変わらないから、
現実的に、こちらの方がいいという判断なのだろう。
（この場合は、画面の端まで行って結果的に改行され、
偶々半角スペースが次行の行頭に来てしまった場合、
《俺が試した限り》その半角スペースは全行末尾に表示され、
行頭が英単語でも行頭に半角スペースが表示されることがない。
なお、タグの場合でも同じかもしれんが）
CSSで切り替えることを諦めるなら、
・DB上はスペースなし、
・鯖側で挿入、または
・JavaScriptで挿入、
といったところか。 逆に日本語の文字同士だとソース内の改行が
消されるようになったブラウザ（FF）はあるな
→ こんな感じに「…改行が消される…」 >>793
そのレス、chromeでもFFでも見た目変わらないし、俺には意味が分からないが。
改行はHTMLの仕様で表示しないことになっているし、
明示的に改行したければ<br>挿入するしかないだろ。
というか、HTML的には<p>内の改行は自動で行われるべきであって、
2chみたいに各ユーザーが各自の環境に合わせて改行を入れるのは悪手となっている。
この俺のレスみたいに改行して欲しいのなら、全ての句読点に<wbr>挿入しろってことだろ。 改行は表示上半角スペースに変換されるだろう、今更何を言ってるんだ >793 の消されるは、
ソース内の newline 文字は、表示上は space 1 個分の空きではなく本当に空間を占めなくなる、という意味な。 >>783
>>778の通り無意味なことは最初からわかる >>767
大丸と小丸はリンク先おんなじなん？
だったらaひとつにしてカドマルにしてボーダーと背景色でおんなじことできるぞ http://yume.hacca.jp/koiki/css/midashi/midashi8.htm
を、spanを使わずに実現することは可能でしょうか？
https://jsfiddle.net/zdndgdf6/
こんな感じで作ってみましたが、contentの"."が残ってしまいます
fontsizeを0にすると今度はborderが消えてしまいます
width:0とoverflowでなんとか出来ないかと思いましたが、なんかずれてしまいます
https://jsfiddle.net/zdndgdf6/2/
何か良い方法はありますか？ >>799
>contentの"."が残ってしまいます
簡便に片付けるなら “.” の代わりに にあたる文字にする
（ Unicodeエスケープで書けば明瞭）
スペースでもOKかも？ 違う、afterを使う
ケツに要素を置いてabxoluteで持ってくる。border-leftじゃなくbackgroundにする
そうすればずれない
.h4title4 {
position: relative;
font-size: 120%;
margin: 10px;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
.h4title4::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #3498db;
border-radius: 4px;
}
それとfont-size0でborderが消えるんじゃなくてheightが0になるから見えなくなるだけ。heightを設定すれば良い >>799
content: ".";でやりたいなら、text-indent:-9999px;付ければ解決はする
https://jsfiddle.net/m0yr11rs/
>>800
テキトーに答えるなよｗ >>797
質問者は無意味とはいってないが、第三者が指摘したことは無意味だった >>799です、いろいろな方法ありがとうございました！ >>804
それで解決すると勘違いするとこでしたので指摘は意味がありました フラットデザイン、マテリアルデザインなどがありますが、
その前のデザインにはは何か名前があったのでしょうか？ >>807
form（+fieldset）かdivかが問題ではなかった
少なくとも質問者は知っていた >>808
ないよ。あったとしても一般的ではなかった。
2005年くらいにWeb2.0風デザインみたいな流れがあって
ボタンがやたらテカテカ、ツヤツヤ、とかMac風デザインとかあったけど
論理的、定量的に行うようなものでは決してなかった。 テンプレートを弄ったことは在るが、フルスクラッチで作ったのが初めてなので
奇特な方レビューしてもらえないでしょうか？
http://www7b.biglobe.ne.jp/~megatherium/
色合いとか線の太さとかマージンの広さとかのバランスがよう分かりませんわ urlに含まれる文字列で ! には何か特別な意味がありますか？
と言うのは、以前どこかで
example.com/!aaa
example.com/#!aaa
どっちか忘れたのですがこんな記述を見たのですが。
aaaは何らかのキーワードです。 >>812
パット見、海外の怪しいソフトみたい。ダウンロードしたくない、というかしてはいけない感じがしてくる
とりあえず
・基本的に文字サイズはgoogle辺りを真似すると良い。フォントはでかすぎる
・でかい画面でどうなるかも確認したほうがいい。倍率を変えれば擬似的に確認できる
良い
・cdn使ったのは正しい。
・アイコンフォントも正しく使えている○
悪い デザイン
・色を使いすぎ。青、緑、茶色、紫って虹か。ゲイか？配色はもう少し勉強した方がいい
悪い 全体
・レスポンシブが壊滅的。まぁPCソフトならやらんでもいいっちゃいいけどね
・上のでかいバナーが邪魔すぎる。うざい。googleの検索画面ぐらいで良い。それとhomeへのリンクをつけ、更にh1で囲む
・guideをクリックするのがめんどくさすぎる。マウスオーバーでアコーディオンだsu
・下のhomeはパンくずと思うけど、homeにパンくずは不要
・referenceの右側なんで開けてるの？広告載せるスペースならとりあえずダミーとか入れておいてほしい。何も入れないなら中央揃えにする
・イメージ画像へのリンクはいらん
・htmlが惜しい。以下のようにすればすっきりする
<body>
<header>内容</header>
<article>内容</article>
<footer>内容</footer>
</body>
途中で飽きたけど、ヘッダは小さくすれば大体こんな感じ
https://i.imgur.com/JqpRXXV.png >>813
ないけどバグりやすいから使わない方がいい #! はハッシュバングだね
Ajaxで操作するためのハッシュ
! は要らないんだけど、昔Google Botが上手く処理できないから作ったもので、それを「SEOのために必要」と勘違いした人たちがこぞって付けてた
今はpushStateができたので完全に不要 >>814
詳しいレビューありがとうございます。とりあえず速攻で出来る色を減らすは実行してみました
が、refarenceの中でで使っている色がどうもしっくり来ないのでとりあえずそのまま
あとバナーにリンク張るのと中央揃えは済ませました
flexは今日覚えたばかりで使いこなせていませんね
色々参考になります、ありがとうございました。 >>812
スマホで開いたら右側に変なスペースが開いてるね
まあPCソフトだしスマホは無関係だからいいのか >>819
justify-content: center;が効いていないんですかね？
一筋縄ではいかない物ですね XSLの質問もここで良いですか？
要は、とあるXSLコードのSVGへの適用方法を知りたいです。
環境： Win7-Pro､FirefoxとChrome >>820
なんかソフトウェアの画像とメニューのとこの一部が右側にはみ出てる
横画面にすると画像は収まるけどメニューのはみ出しはそのまんま >>822
スマホのときは画像を小さくする小細工が要るんだな
もう少し研究しますわ >>823
imgにwidth:100%をつけるだけでいい
あと「番組名のフォルダー」のフォントを変えて強調しなくていい。分かる。強調するのはリンクをつける時。逆にリンクが無くて腹立つ
それとはみだしてるのはヘッダメニュー。メニュー〜カウンタ〜言語選択、全部縦並びにでもしてみては サブページのナビゲーションメニューからトップページの各所へページ内リンクをしている（#aaa，#bbb，#cccとします）のですが、
「パソコン画面での#aaaへのリンクのみ」がうまく飛ばず、トップページの一番上（ファーストビュー）が表示されます。
・#aaaはページ内リンクとしては一番上（トップページのファーストビューでは見切れています）
・ナビゲーションメニューはスマホ版とPC版で別のもの表示切替えして使っていますが#aaaへのリンクは同じ（コピペ）です
・スマホ画面ではちゃんと飛びます（chromeのデベロッパーツールで確認）
・ieでもためしましたが結果は同じでした
どのような原因が考えられますでしょうか？ 補足
今確認しましたが、アドレスバーへのurl直打ち（●●●.com/#aaa）でも、スマホ版だと飛んで
PC版は飛ばない（同様にトップページの一番上に飛ぶ）です ファーストビューに大きな画像があって、imgタグにheightが指定されていないとか
Ajaxでコンテンツ取得して表示してるとか なんか色々いじってたら解決できましたｗ
原因はうまく説明できないですが、#aaaを含むクラス名を#bbb,#cccと同じにしたらちゃんと飛ぶようになりました
なのでクラス名を同じにしてレイアウトをhtml側のstyle属性で調整することで一応解決しました
#aaa含む要素のcss設定に問題があったのかな…と思ってます 昨日レビューしてもらったものだが、まだ途上だし指摘もこなせていませんが出来る限り直してみました
http://www7b.biglobe.ne.jp/~megatherium/
皆さんのおかげで少しは見れるものに近づいたと思います。色々ありがとうございました はい、ありがとうございます、頑張ります
また何か聞きたいことできたらそのときはよろしくお願いします シバンを見るとJSよりもFlashやってた頃を思い出す アフィカスだと教える気が起きないんだが、
こういうフリーソフト作ってる人とか
プログラマーとかだと何故か教えてあげたくなる不思議・・
俺だけかな ローカルで見た時とサーバーに上げたときの見た目が異なります。
cssに書いたdisplay:noneがサーバーから見ると消えてるんですがどうしたらいいですか？
fc2ホームページを利用しています
https://i.imgur.com/a/k1SPD アップロードしたファイルの反映に時間が掛かってるとかじゃ？
サーバー側CSS（HTMLも）がローカルのものと同一か確認してみよう
ブラウザのキャッシュも疑って >>837
仰るとおり時間を開けてアクセスしたら思ったとおりの表示でした。ありがとうございます >>836で思ったけど、
例えばあるページを保守していたとして、
更新してもCSS反映にラグがあるとページを見た人が不完全なものを見ることになってしまうけど、こういうのってどう対処してるの？ アクセスしたときの現在時刻からCSSのバージョンつけてるわ no-cacheが更新がすぐに反映される上にキャッシュ利用されて書き換え箇所も少なく一番良いと思う >>844
あんまり詳しくないけど、それって自鯖の話？ >>847
no-cacheってキャッシュしないってことじゃないぞ 目的はキャッシュさせないことではなく
更新を反映させることなんでは >>852
no-cacheは常に更新確認をした上で更新が無ければキャッシュを利用するすごい奴だよ 質問です。
某ECサイトでアコーディオン（折りたたみ）メニューが作りたいのですが、以下の制限でどうにか作る方法はあるでしょうか？
・javascript禁止
・CSSインライン表記のみ（外部・ヘッダー表記不可）
・onclick属性不可（onclickという文字がソースから消去される）
擬似クラスとかのインライン表記（style=":active {処理}みたいな）とかも試してみたのですが、
もうすでにHTMLの仕様から消されてる？とかで使えなかったです・・・。 >>854
チェックボックス使ってそれっぽいことしたことはあるけど
あんまりオススメせんな
それやることよりも
その程度のJS書ける自由度のない
もしくは用意のないCMS使ってることを改善する方が先な気がする >>854
タグ書けるなら<style></style>で書きゃーいい。アコーディオンで遊んだことあるけどラジオですりゃいけるぞ >>856
ヘッダー表記無理と言っているのが読めない？ 文法違反になるけど<body>内に<style>を書いても適用される
（ブラウザのバージョンアップで使えなくなる可能性もあるけど）
onclick属性やonclickという文字列が使えないだけなら別の方法でいけるが
javascript禁止ならダメだな やほおの使ったことあるけど
ちょっとでも自由にしたいならトリプル契約すべき
linkタグは使えるからジオシティーズドメインで読み込め レスありがとうございます。
<body>内の<style>も以前試したのですが、
<style></style>間の表記がまるごとテキスト変換（pre?）されて表示されてしまい無理でした。
チェックボックスでやる方法は、結局、擬似クラス？（input:checked）でチェックしてるみたいで、
インラインで表記が出来ず、諦めてしまったのですが、
ただ単に書き方が悪かっただけなのかな・・・
もっと試してみます。
>>860
事情があり、有料契約できないのですよねorz JavaScript禁止でcssはインラインのみとか不可能じゃん
:checkedも使えないってことでしょ ダイヤログウインドウ出したいんですがjquey ui使うのが普通ですか？ >>861
手っ取り早いのはそのアコーディオン無しで見やすいものを作ることじゃない。
アコーディオン使うくらいだからメニュー項目がどっさりあるのかもしれんが… >>854
CSSルールがなければいけるんだけどな……
ところで、ONCLIConclickKって書けばonclickできたりしないかな >>865
ヤフーとか楽天を実務レベルでやった事ない人には
この苦労や仕様はきっと理解できなだろう・・マジつらいんだよな
なんでそんな糞モール使うかって、
そりゃ無名店でも自社ECより集客が格段にあるからなんだが
それにしてもトリプル申し込めないなら、アコーディオンなんてやろうとしちゃいけない。
昔cssだけでカルーセル設置したけど運用していく上でも糞すぎたわ とりあえず>>864の方面で考える事にしました。ありがとうございました。
メニューはどっさりあるのですが、ECサイト自体の機能と組み合わせることで、
大見出しのみでもなんとか妥協できるような機能性・デザインにはできそうです。
これ以上はスレ違いなので・・・
>>866
今、管理システムがメンテ中なので試せませんが、自分のローカル環境ではその表記では動作しませんでしたねー。 アコーディオンの開閉ボタンやタブなどのクリッカブル要素は何タグで書くべきですか？ aタグってページリンクじゃなくても使って良いものなですか >>878
ページ限定じゃないよ。
ページを含んだリソースへのリンク
リンクを意味するならばどれでもいい ■ このスレッドは過去ログ倉庫に格納されています
