HTML/CSS のどんな質問にも優しく答えるスレ 32
レス数が1000を超えています。これ以上書き込みはできません。
UIを作るのに、
CSSのグラデーションやCanvasを使用することは多いですか?
それとも自分でイラレやフォトショを使って画像を用意することの方が多いですか?
もし後者の場合、イラレとフォトショはどちらの方が使えると今後に良いでしょうか?
両方使用するのが一番だとは思うのですが、毎月の出費が痛くて・・・
宜しくお願いします UIというかサイトにもよるけど
・CSS+アイコンフォント
・CSS+SVG
がほとんどかな
画像でごちゃごちゃすることあんまりない
イラストや装飾多いサイトなら画像もありだけどそうでなかったらわざわざ画像にする必要ないし
イラレかフォトショかだけど、アイコンフォントやSVG作るにはイラレ、イラスト描くにはフォトショが向いてる
とだけ言っとく イラレ使えなくてもWEBの仕事はできるがフォトショ使えないのは話にならんからな >>796 そうそう、イラレで制作しない
データ送られてきた場合は編集するからイラレの基本は知ってるけど
以前のAdobeは購入したら終わり=毎月の経費が掛からん
でも、最新verで送ってくる人の開けないaiファイルが多いんだよね・・・ >>793
いやいや
>もちろんFirefoxではそうならずに改行幅とフォントサイズは一致しており、
って書いてるし
ブラウザ依存のバグの可能性があるから聞いただけですよ
知らないなら絡む必要なし >>802
だからChromeでもならないって書いただろ
preだけならならないの
他のタグやcssが原因でChromeだけがなってるんだからコード見せろって言ってんだよ webでのイラレ使いをもうみんなで追い出そうぜ
そうすればアドビとの無駄な契約が1つ減らせる。
イラレなんてデータ開く為だけに契約してるわ Flashが消されたように
フォトショ、イラレも消されればいいのに
あんなの標準じゃない、標準にしてはいけない XD便利だよ
win10の最新版じゃないと使えないゴミだけど XD便利だよ
win10の最新版じゃないと、使えなくてゴミになるけど CSSでのセレクタ(?)の指定方法について質問なんですが
.header > .article-text > a { font-size: 18px;}
クラス→クラス→aタグの指定方法がわかりません。上記のように書いたのですがどこがおかしいのでしょうか?
(article-textクラスは複数あります。) >>810
おかしくないぞ
> の意味を勘違いしてるんじゃ?
htmlも出して >>811
<div class="header">
<div class="article-text">
<script type="text/javascript">
○○○○〇〇〇〇
</script>
</div>
</div>
中途半端な小出しで申し訳ありません。
JavaScriptで外部サイトから得たaタグへの編集を行なおうとしていました。
クラス→クラス→タグの場合の指定方法が分からなかったので質問させてもらいました。(>の後はドットが必要なのか等)
HTMLを見直してみます。
問題点を絞ることができ大変参考になりました。ありがとうございます。 >>804
>>806
おま環が標準だと世界中が困るw div.header > div.article-text > a
だろ イラレが要らないって意見フロントエンジニアなら理解できるけどデザイナーで言ってんなら機械音痴のジジイかな?って思っちゃうね 他人のサイトのソースをコピーして自分のサイトで使うのは
権利・倫理面で問題ないのでしょうか?
HTML,CSS共に参考にすることあるんですけど
「パクってんじゃねーよ」的なお叱り受けるのかなと。 ケース・バイ・ケースだよ。
現実してはみんな多かれ少なかれやってる。
バレたくないなら少し改変するとか。 比率の問題でしょ
あるサイトのコードが1千行あるとして
そこから10行コピーしてもコピーしたとは思われないないけど
数百行コピーすればコピーしたと思われる 要素一つだけ使ってそのbackground-colorを一部分だけ表示させたいんだけど無理だっけ?
(一部以外は透明でも不透明でもかまわない) >>819
>>820
ありがとうございます。
大層なものは作れるレベルじゃないので問題なさそうですね。
少しずつ参考にする形でやります。 >>823 d
beforeが使えるかもしれない
やりたいのはこんな感じ
http://jsfiddle.net/ba93sc1h/
これでmargin-topのautoが効いて中央に表示できれば・・
みたいな 企業サイトを作るのにwordpressって利点多い?
テンプレート作成の手間か、プラグインによる機能の後付の利便さか、で迷ってる >>825
素人がガンガン更新するなら良いかも知れないけど
そうでないならそれほどでも >>827
クライアント側の素人さんが自分で告知のニュースとかを更新したいという要望に応えるならかな レアケースかも知れんが
普通にデザインしてコーディングして必要ならJSで動きもつけて…
って普通に作ったサイトをポコっとWPに当てはめ
字面とか、コード複製でなんとかなる部分は客が更新
難しいところはこっちに振ってもらって都度請求
ってスタイルで運用してるサイトがいくつかあるな 運用してる会社がなく、やめるとなるともれなく死亡するスタイルな いや、俺が知る限りだが、それやってるの数社ある
望みは捨ててはいけない >>829
いやいや地方じゃ結構需要あるスタイル
毎月更新料は払いたくないがちょっとした更新は自分らで簡単にやりたいとか
個人経営の小口案件でははわりとある。あとトラブル対処は案外そういうとこの方がチマチマ取れるもんだ 大手代理店とそこそこ大企業案件でもそういうのやるよー
このHTMLをコピペするとこういうレイアウトになります
っていうコンポーネント集を一緒に作って渡して
お客さんが自分で更新していくスタイル dreamweaverCCでコードビューのソース自動改行を「無し」にすると
ソースの右端が切れるんだけどなにこのクソ仕様・・・
事故るわこれ <span style="font-family:'Times New Roman'; font-size:15pt">あ</span>
<span style="font-family:'Times New Roman'; font-size:15pt">い</span>
<span style="font-family:'Times New Roman'; font-size:15pt">う</span>
<span style="font-family:'Times New Roman'; font-size:15pt">え</span>
<span style="font-family:'Times New Roman'; font-size:15pt">お</span>
見たいなHTMLを
<span style="font-family:'Times New Roman'; font-size:15pt">あいうえお</span>
に修正してくれるソフトはありますか? `<span style="font-family:'Times New Roman'; font-size:15pt">` +
`<span style="font-family:'Times New Roman'; font-size:15pt">あ</span>
<span style="font-family:'Times New Roman'; font-size:15pt">い</span>
<span style="font-family:'Times New Roman'; font-size:15pt">う</span>
<span style="font-family:'Times New Roman'; font-size:15pt">え</span>
<span style="font-family:'Times New Roman'; font-size:15pt">お</span>
`.replace(/<span style="font-family:'Times New Roman'; font-size:15pt">(.*)<\/span>\n?/gu, '$1') +
`</span>` 正規表現だけでやるのは俺は無理だなあ…
俺ならperlでもphpでもいいから、
1行ずつマッチしたものを変数に結合していって最後に取り出しかな。 正規表現は面倒くさいので、なにか自動的にやってくれるソフトないですかね?
HTML整形ソフトにそんな機能は無いのでしょうか? >>841
単なる、「あいうえお」じゃなくて長文なんですよ。 ピンポイントすぎるw
そんな機能を持つソフトは知らん。
スクリプト書くスキルは必要だよ。
こういう機会に覚えていくもんだよ。
役に立たないレスですまんが… >>843
htmlは初めて触ったもんで、なにも知らんです。
PDF→HTML→某ソフト取込をした後にレイアウト修正が上手くいかないのでHTMLをいじろうと思ったら、このような無意味なコードが沢山ありまして、困っています。
こんな馬鹿なコードはあまりないんですかね? 例えばだけど、
Wordなんかで原本を作って変換すると、人間ならしないバカなコードは出るよ。
その話からして変換してるから仕方ない。
ブラウザに表示された文章をコピーした方が早くない?(笑) 電子書籍をHTML化しているので、コピペは物理的に無理ですね。 HTMLでどうこうするスレだから、ここでは難しい気がする。
アプリかスクリプトのスレじゃないかなあ?
お題を具体的に言わないと冷たくされて終わりそうだけど。 PDF(Wordなんかもそうだが)からHTMLに変換する方法には
大きく二種類ある
一つは、PDFのデータを解析して出力する方法
もう一つは、PDFを(仮想的に)印刷して、その印刷データを解析する方法
基本的に前者が取られるがこの場合、PDFをどうやって作成しているかが重要になる
ただしく作成しているのなら、>>836のようなことにはならなが
オーサリングソフトなどを使って、GUIで作成していると、
見た目とデータがめちゃくちゃになることがある。
例えば、文書の一部を黒塗りしたけど、データとしては残ってたなんて話があるだろ?
あれは、文章の上に黒い矩形をおいただけだから。見た目には消えててもデータ的には消えてない
他にも、第一版として作成された文章を誤字をなおすために、上から書き加えると
データ的には変わってなくて、修正済み文字が最後の方に登場したりする
図形(文字が含まれる)を後から追加したため、そのページの最後の方でいきなり図形の文字が登場する
見た目には段落になってるが、文字を大きくしただけ
とか、まあめちゃくちゃ。見た目とデータの位置が正しくなかったりする
PDFを(仮想的に)印刷して、その印刷データを解析する方法を使えば
そういったことは起こらないだろうが、今度はただ単にもっと処理が難しいだろうな Googleドキュメントで画像から文字化してくれるからこれ使えば? 文字ごとを括ってるタグ一緒なら一括置換で消せばよくね? そういえば、Acrobat DCからだと一括で出来なくて面倒くさいので、バッチ処理できるアプリを探したんですが、見つからなくてしかたなくRTF化してからHTML化したのが原因かもしれませんね。
へんてこりんなmsoなんちゃらというコードがあって調べたらマイクロソフトオフィスと関連があるらしいので、RTF化したのが悪いようですね。
パラグラフとパラグラフの間に何十行分の空白があってGUIだとどうしても消せないのも一旦RTF化したのが原因のようでした。Acrobatからだとちゃんとレイアウトが維持されていました。
それにしてもPDFをHTML変換するソフトはあるんですけど、ロクなのがない。Acrobat DCでバッチ処理する方法を探します。
いろいろとありがとうございました。HTMLは初めて触りましたが、面白いですね。 俺メモ
HTMLテンプレート
BootStrapテーマ >>849
レスさんくす
3日ぶりに開いたら何故か普通になってた。
環境設定いじった後に再起動してなかったからなのかもしれない。
デフォのフォントは半角英数と全角英数の区別がつきづらからそこでミス起こってMSPゴシックにしたし
色々機能ついてるせいかいちいちもっさりしてる印象。
スクロールバーの明度差が無さ過ぎて見えないし
遣い慣れたのが変わるとミスや事故に繋がるからコロコロ変えるのやめてほしいわ。 >>855
DWに限らんがAdobe関連は公式のCC道場とか
動画で解説やってるとこを見た方がわかりやすいね
Adobeといえば先日Museの開発終了がアナウンスされたな
まあ流石に需要無しってとこなのかな AIが奪うのはデザイナーの仕事のうち
時間をかければ誰でもできるつまらない作業
クリエイティブなことをしていれば、職を奪われたりなどしない
ということは、大半のやつは職を奪われるということだなw AIが仕事してくれるんだから何もしなくていいじゃん ベッドに寝てるだけで、ゲームも飯も糞も全部自動でやってくれんだよ。
憧れの生活すぎるだろ。 >>859
理想・・・ロボットがすべてやってくれて、人間は働かなくても食っていける
現実・・・ロボットがすべてやってくれて、儲けはすべて社長のもの。金を入手する方法がない AIが仕事してくれるのにそのAIを使いこなせる専門職が必要とかになるんでしょう 15年くらい前からイキった素人が無料のhtmlテンプレートあればデザイナーやコーダーなんていらねえ
MTあればデザイナーやコーダーいらねえ、WPあれば、BootStrap(略
なお現状は >>861
そんな人生が楽しいのか?という問題だなw
部屋に籠ってベットの回りに何でも手が届くような生活してると老け込むのも加速するんだとさ >>864
Googleなどの簡単無料サービスやSNSにかなり顧客を奪われたから
イキったプロが自分らの専売特許にしてるエリアはかなり切り崩されてるじゃんw
サイトの制作体制もスマホが中心の今はレスポンシブへの移行を余儀なくされてるし
何だかんだで振り回されてるわけだから自分らだけ特別とか思わず謙虚に行かなアカンよ >>866
ウェブ制作とSNSやグーグルが食い合っているかー?
むしろ彼らのおかげで仕事増えているような… 仕事は増えてるよなぁ
しかもデザイン外な事が増えてる
ツイッターや FBのアイコンまで作らされる
んなのテメェでやれってレベルの雑務が増えてる 情報発信はSNS主体に自前でやるってとこは多くなったな
まあスマホが生活の中心になった今はその方が自然な流れではあるが 質問です
htmlのtableタグで書かれた表があり、レコード数400くらい、カラム数は5列です
現在、1列目に「通し番号」が入っており、その昇順になっています
2列目には一意な別の番号が入っています。現状では完全にランダムな順です
この表を、2列目の値で昇順に並べ替えて欲しいと要望があったのですが、
何か良い方法ないでしょうか?
ソートできるように作り変えるということではなく、ソースコードそのものを書き換えたいのですが、
<tr>〜</tr>をちまちまコピペして並べ替えるのではあまりに骨が折れるので… >>870
ブラウザでコピってテキストエディタに貼ればタブ区切りになるじゃろ >>870
もしくは
二列目でソートするJSをチャチャっと書いて
開発ツールで実行して
描き変わったDOMを開発ツールでouterHTMLコピーすればよかろう エクセルにコピペしてフィルターかければいいだけじゃないのか そんだけの行数を手書きしたやつがいるだと?DBか何かのデータじゃねーの タブ区切りにしたものなり、直接なりをエクセルに貼ってソートまでは思いついたのですが
そこからhtmlに戻す方法が浮かばなくて…
コツコツと追記されてきたデータ表なのです >>875
ソースがどなってるかわからんから検証めんどくさい
2行ぐらい書けないの? >>875
エクセルでソートしたら、そこを範囲選択して右クリックしてコピー、
ブラウザ開いて、
`ここに貼り付け`.trim().split`\n`.map(row => {
var cells = row.split`\t`;
return `<tr><td>${cells[0]}</td><td>${cells[1]}</td><td>${cells[2]}</td><td>${cells[3]}</td><td>${cells[4]}</td></tr>`;
}).join``;
スマホなので確認できないけどこんな感じでどうだ × ブラウザ開いて
○ ブラウザのデベロッパーツール開いて pcで確認できた。多少冗長だったので修正
`ここに貼り付け`.trim().split`\n`.map(row => `<tr><td>` + row.split`\t`.join`</td><td>` + `</td></tr>`).join``; Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな? Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな? >>878
よくスマホでそれを書く気になれたなw
わりとマジで尊敬する >>881
スレ違いも甚だしいけど
アカデミックて転売・譲渡できんの?
出来るなら俺お金持ちになれる! 皆さんありがとうございます
確かにソースないとわかりにくいですよね、すみません
<table>
<tr>
<td>Clm_1_通し番号</td>
<td>Clm_2_別の番号</td>
<td>Clm_3_項目名</td>
<td>Clm_4_ファイルへのリンク1</td>
<td>Clm_5_ファイルへのリンク2</td>
</tr>
<tr>
<td> 1</td>
<td> 54</td>
<td>○○</td>
<td><a>リンク1</a></td>
<td><a>リンク2</a></td>
</tr>
<tr>
<td> 2</td>
<td> 263</td>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
上記のような繰り返しで、表としては単純な感じです
ごめんなさい、書いていて気づいたのですが
4列目・5列目にファイルへのリンクが<a>タグで貼ってあるので
エクセルに貼ってソートじゃダメですね… //要素選択の簡便ため<table>にidをふって<table id="odai">となっている前提
var tracks = [...document.querySelectorAll`table#odai tr`].map(track => [...track.querySelectorAll`td`].map(col => col.innerHTML)); //操作しやすいよう二次元配列に変換
tracks
.filter((track, index) => index !== 0) //一行目はヘッダのようなので除く
.sort((a, b) => a[1] > b[1]) //二列目の数値でソート
.map(track => `<tr><td>${track.join`</td><td>`}</td></tr>`) //マークアップを復元
.join``; >>883
自分も思った。スマホで多彩な半角の記号たくさん打てるとか信じられない。
自分にはストレスすぎて3行目で発狂だわ (横ながら)>>890
もしも>>888の通りだと「 54」スペース入ってるぽいから
a[1] > b[1]のところ数値変換しないとだめ?だった まちがってたらすまん >>893
スペース関係なくね?
"10" < "2" が期待通りとは思えん >>894
そういうことだわ
スペース関係なく文字列だと自分の環境では(不等号の向きによって)全部trueかfalseになってしまった .sort((a, b) => +a[1] > +b[1])にすればいいってこと? 名前・郵便番号・住所(郵便番号から一部自動入力される)・電子メール の入力フォームのテンプレどっかにないかな どうせ他人に見せるわけでもなし
どんどん使っていこうや >>902
ちゃんとコントロール出来てるなら問題なかろう
今は開発ツールが整ってるから
そんなに混乱することもないし コントロールできてないからimportantを乱発するんやで 見出し箇所を均等割り付けしたいんだけど、
最後の文字以外なんかのスタイルを適用するやつしかないのかな?
…おや、文字をそれぞれiで囲ってflexしたら解決か? >>905
自分の場合はdisplayプロパティ関連でimportantを乱発するわ
だってさ、displayプロパティって表示/非表示の側面と、レイアウト(改行される/されない)の2つの側面を持ってしまっていて
代替がきかない糞仕様じゃん。
visibirityだと見え方違うし >>906
自分だったら正規表現使ってjsでやるかな。 と思ったら質問の意味が良くわかんねw
text-justifyの事言ってるのかな? >>911
それそれ
効かないブラウザあるから困ったなと >>908
意味がわからん。
displayは元からblockとしてあつかうかinlineとして扱うか
なにもないものとして扱うかのレイアウトの機能でしかないんだが?
なにもないから見えなくなるのであって、
単に見えなくなるだけの意味しかないなら、レイアウトは変わらん
それとimportantを乱発することに何も関係ないんだが、
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。
すべては1.が根本原因なんだよ? >>906
その方法はアクセシビリティ的にはどうなんだろう… https://dotup.org/uploda/dotup.org1576039.jpg
細かいことなんですがお願いします。
縦方向の中央揃えをしたいのですが若干上方向へ寄ってしまいます。
categoryとh3を分けたらline-heightを調整して何とかできるのですが
.category h3のなかで調整できないかなと。 >>913
たぶんあなたはレスポンシブの経験浅いでしょ?
jQueryでいうhide();に該当するものがcssにあるか?
あるなら答えてみてよ。 https://codepen.io/brenden/pen/RNZXqx
最近javascriptからcssを勉強し始めたものです。
上記のページに記載されているコード(scssではなくcssにコンパイルされたもの)について質問があります。
また、記載のコードは私自身が書いたものではなく、ほかの方が書いたもの、
を自分が勝手に勉強用として使わせていただいているだけです。
bottomとtopでスクロールされる画像が左右にずれていると思うのですが、
これはどこにプロパティーを追加することで解消できますか?
上下で別の画像を使用する手も考えたのですが、コードで解消してみたい次第です。
また、スクロールのスピードを操作することはできたのですが、上下で画像を一致させるには、
どのような手を打つのが妥当でしょうか。
ご回答お待ちしています。 >>916
>913ではないが、display:none >>918
やっぱそうなるでしょ?笑
ちなみにその話を>>908でしたら意味ワカランとか言われたから
この質問をしているところ 円形の線を描くアニメーションを考えているんですけど、1つの要素だと難しいですか?
CSSで頑張るよりsvgつかったほうが早いですかね >>919
noneするのに書き出す必要ないんとちゃうか >>919
意味わからんのは、jQueryでhideするわけでもないのに、
cssでimportantを使うことなんだが。
そもそもhideでimportantは使われてないからなw displayは糞仕様でも何でもないし、
正しく理解していれば、
importantを多用することもない >>920
JavaScriptかCanvasかな。
JSなら、そのぐらいのライブラリはいっぱいありそう。 displayでimportant使うことなんてまずないしレスポンシブならなおさらないぞ
それこそレスポンシブ組んだことないんじゃないか?
さらにそこにhideが出てくる意味がわからん
支離滅裂 >>924
一本の線ごときで…と思ってしまいますがそれが一番簡単そうですね
円の上にマスクの要素を置いてそれを回転させるって方法も思いつきましたが、背景ベタ塗りじゃないと使えないから汎用性低そうですね
どうもありがとうございます >>914
見た目が最優先のサイトだからそういうのは置いとく…
でも、めんどくさいからただのテキストにしたよ… >>923,>>923
試しにさ、これcssでどう書くか言ってみて。
<span class="hoge">hoge<span>
.hogeは、スマートフォン用のレイアウト時のみ表示するようにする。
もちろんインライン要素のままで。 >>930
お前も書いてみて。
important使わなきゃできない理由が知りたい >>930
はい
@media (min-width: 600px) {
.hoge {
display: none;
}
}
PC優先のmax指定派ならこっち
.hoge {
display: none;
}
@media (max-width: 600px) {
.hoge {
display: inline;
}
}
ってかこれを書かされる意味がわからないんだけど…
今の話の流れからなんでこれ? >>930
それは特に困らないんじゃ…
ああもしかして
PC用に書いたスタイルがSPでも反映するようにして
必要なとこだけ上書きする方式なのか? >>934
いや、それは普通だろ
そのためのメディアクエリだ
それで困るとかならこの仕事向いてない display:inlienじゃnoneを上書き出来ないとでもおもってんじゃねーのw >>908
インライアンってプライベートライアンの親戚か何か? 便乗質問だけど
@media only screen and (max-width: 576px)
と
@media (max-width: 578px)
ってどうちがうの? displayするのにimportantって
結局何が言いたかったんだ?
結局これが的中か
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。 git push -f すればいい。
自分が管理するブランチの歴史を書き換えて
強制pushするのはよくやること >>933
ごめん質問間違った
PCの時は非表示、スマホの時は表示を
汎用クラスのみで制御する場合だった
もちろん場所によってはinlineであったりblockであったりのケース >>938
質問は only screen のこと?
だと思って回答します
メディアクエリを適用する対象デバイスを指定するんだけど指定できるデバイスが3つあって
screen:通常の画面
print:印刷
speech:音声読み上げ
それぞれにonly、notをつけれる
何も指定しないとデフォルトであるallになってすべてに適用する >>942
同じ
2つ目のやつのnoneとinlineを逆にするだけ >>942
だからお前が書けって言ったよね?
importantをクソな使い方を
見てやろうって言ってるんだよ。
ほらはやく importantなんてJavaScriptライブラリがつけたスタイルを上書きする時ぐらいしか使わないだろ
あとは破綻したクソなコードを引き継いでどうしようもなくなった時
自分でコーディングしててimportant使う必要があるとかよっぽどクソのコードしか書けないっていう証拠かと importantニキは新しい仕事探せ
それが世の中のため かなり大掛かりなサイトになるが
まずサイトの基本となるスタイル、コンポーネントがあって
その上で、各サブサイト毎に特有のスタイルが重なって
さらにそこに各スタイルをガン無視したLPを作ることになって…
みたいな時に使うことはあるし問題もないと思ってる
ただそこまで大掛かりなサイトは少ないし
それの制作に携わる人もそんなにいないだろうな >>950
その場合は高い優先順位で
スタイルを定義すればいいだけなので
importantを使うっていうのは、その優先順位を
正しく理解できてないだけ >>950
ああそれはあるかも
大がかりじゃなくてもWordPressで既存テーマを基に子テーマを作った時はそんな感じになる
いずれにしてもちょっと特殊なパターンで、>>930のようなこと言ってくるってことはそんなパターンでもなくそもそも理解してないんだろね >>951
ライブラリとかだとこいつには勝てねえってぐらいのセレクタ使ってる時があってそれにはimportant使う時ある >>951
必ずしも全てをコントロールで来るとは限らんのよその手の仕事だと
たまにあるじゃん、メーカーとかインフラ系で
ハウスエージェンシーが最上流を仕切ってて
基本スタイルの時点で頑張りすぎてるやーつ
もちろんそれ作ってる人達もそれが良くないことはわかってて
それでも仕事のしがらみでガッチリやらざるを得なかった感が溢れてる、的な
そういうの
理想的じゃないの >>953
その場合でもライブラリで使ってるセレクタ + 任意のセレクタにすれば絶対勝てるだろ >>955
へー、理想的じゃないのの例が
さっきのレスポンシブの簡単な例なんですか?w
無知な人が偉そうに、できないことだってあるんだよ!と
言われましてもね。お前がわかってなかっただけじゃんで
終わってるんですよ >>944
へ〜〜〜〜なるほど
ありがとうございました。 固定高さのdiv内にadsence(レスポンシブ)を配置
毎回広告サイズが変わるがdiv内トップに位置されて下が空いてしまう
高さを中央配置にできないものでしょうか?
ダメ元で
padding: auto auto;
vertical-align: middle;
をしたがやはり変わらずです
そもそもスクリプトがらみでcssだけで対処できるかですが >>960
importantは>>908=>>919=>>930=>>942が頭悪かったっことで無事決着がついた >>960
959ですが付けても付けなくても変わらずです ピクセル数とかってさ、8の倍数文化は意味あるのかな?
なんかコンピュータカッコイイ!にしか見えない。 devicePixelRatio
=> 3
orz... >959
1. 親要素にdisplay: table-cell を指定する
vertical-align は基本的に displayが inline 系の要素にしか効かない
(元々文字の縦位置を指定するスタイルのため)
ただし、例外的に display: table-cell の子要素には効く
tableもtable-row もなくても機能するので便利だが、それでいいのか?と使うときはいつも思う
2. 親要素に display: flex と align-items: center を指定する
未対応ブラウザを気にしないならこれでいい >>955
あるなーそういうの
今やってるのもまさにそうだわ
アホみたいなページ数のマニュアルがある 頼むからもうやめて、オレが悪かったよ・・・
サーバー代ケチる為にライブドアブログ使ったの。
で、独自タグからの展開で訳わかんなくなって乱発したの。 >>965
共に全く表示されなくなります
ちなみに子要素は
ins class="adsbygoogle" style="display: block; height: 90px;"〜です
読み込まれる(広告が変わる)度にheightも変わります
その後にもheightやwidh含むパラメータがずらずら並んでいます >>970
親要素にjustify-content: center;align-content: center;は?
https://jsfiddle.net/Lxtb4201/
(要素クリックで広告のサイズ変わるアクション) hrで水平線を作ったんですが、その上に文字や画像が重なってしまいます。
ロゴ、水平線、文字の順に上からならべたいのですがどうすればいいですか? >>972
何もしなければ重ならずに並ぶ
重なるのはcssでそうなってるから
cssがどうなってるのかはあなたしか知らない
なのでアドバイスしようがない line-heightがおかしいんじゃね?
ともかく先に言われてるようにコード晒してくれるとわかりやすい
あと使わない手もある <body>
<h1><a href=""><img src=""></a></h1>
<hr/>
<svg id"レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<style>.cls-1{fill:#ccc;}</style>
</defs>
<circle class="cls-1" cx="50" cy="50" r="50"/>
</svg>
<div style="position:absolute; top:120px; left:200px;">
<h2></h2>
長くてすみません
h1がロゴの画像(svg)、h2が文字です
その中間のやつはよくわからないんですが、それがあると円ができるので残してあります >>976
cssもあったほうがいいでしょうか...?
本当に情弱ですみません >>971
広告は表示されるが上下位置は変わらずです
>>976
h1 { border-bottom: 〜 } でhr失くすはダメ? ごめん
h2 { border-top: 〜 } か >>977
人に質問してコードを見せる時は
同じことを再現できるコードを渡すんだよ
ほんで答える人がコピペとかで手を煩わさずに済むように
jsfiddleとかに上げるといいと思うよ >>980取ったら次スレ立てんだよ。
あくしろや。 >>1をコピペしてURL変えただけなのにNGワード言われる
なにがいかんの(´;ω;`) てすと
以下自スレのテンプレ
―
HTML/CSS のどんな質問にも優しく答えるスレ 33
―
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!
質問側も節度あるレスで!質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう すみません
上の2つ繋げてスレ立てようとするとNGになる(´;ω;`)
誰か立ててください(´;ω;`) ここまでやっときゃあとは立てれるひとが立てるからそんな安心すんな >>979
解決しました、ありがとうございます
>>980
分かりました。また質問することがあると思うので気をつけます! しょっちゅう、NG ワードになる
よく、MANGO 板でテストしてるけど、さっぱりわからん。
2, 3 文字でも、NG ワードになることもあるし >>978
jsfiddleリンク先の要素の上下位置が変わらないのか
それとも
独自に実装してみた後の広告要素の上下位置が変わらないのか
がわからん >>991
つまり
(a)前者は大丈夫で後者はダメなのか
(b)前者も後者もダメ
(c)前者は試してない、後者はダメ
ということが聞きたかった
レスから察するに(a),(c)の可能性が高いと思うけど
もしも(a)なら、意外なところでハマってるだけで簡単に解決するかも https://jsfiddle.net/wha62x80/#&togetherjs=bPcdrH8FKT
これのbodyの中身を画面の真ん中(円の縦の中心軸)に合わせたいのですが、どうすれば良いでしょうか。
body{text-align:center}と、やってみたのですができませんでした。 >>993
そもそもソースがいろいろと崩れてるので動くかわからないが
https://jsfiddle.net/1zahrk7s/
外接させたい場合(円の中にテキスト全部収まる様にする)はちょいめんどい grid-areaって大昔CSSがない時代に
テーブルでレイアウトしてたようなもの? >>994
理想の形になりましたすごいです
本当にありがとうございます このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 118日 13時間 29分 0秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。