HTML/CSS のどんな質問にも優しく答えるスレ 41
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!
質問側も節度あるレスで!質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 40
https://mevius.5ch.net/test/read.cgi/hp/1564569787/
■関連スレ
Webサイト制作初心者用質問スレ part251
https://mevius.5ch.net/test/read.cgi/hp/1564414228/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html これから質問してくる人には「何が?」と返します(怒) お前はゴミクズだなを
まろやかに言った言葉、パンくず
そいつらのリスト liタグに対してdisplay:block ;を指定するのはどんな時ですか? 縦並びでmarginとpaddingを指定したい時 >>18
レギュラー、朝マック、夜マックでそれぞれ違う。
それと、季節限定のメニューってのもあって
今なら黄金の月見バーガーってのがバリューセットで690円である このサイトみたいにスマホ表示の際に、ハンバーガーメニューの中に検索ボックスとカテゴリリストとSNSのアイコンを表示させたいのですが、どうすればよいですか?
初心者でよくわかりません。
https://www.webcreatorbox.com Macでオススメのテキストエディタを教えてください
なるべくWindowsのTerapadに近い操作性と外観のソフトだと嬉しいです >>22
いまの自分にそこまでのパワーはないので、無難なレイアウトに変更しました。
これから更に勉強してレベルアップしますね >>18
ケツ毛バーガー事件というのが昔ありました さっきちょうどマナちゃんからメルマガきてて
使用中のiPhone6sが瀕死の状態って書いてた。
海外でも活躍してすごい儲かってるかとおもってたがそうでもないのかな? >>29
1000台あるうちの一台が瀕死なんだろ
999台は無事だよ >>31
彼女はある意味同業者の成功例であり
夢と希望だからそうあって欲しい・・・ 自作曲をHPでダウンロード出来るようにしたいです。
そのファイルを「aaa.wav」とします(WAV音源なのは合ってます)
で、そのファイルを公開したいページと同じ階層に置いて
<a href="aaa.wav" download="あああ">というような感じで打ったのですが「ダウンロード失敗」と出ました。
FFFTPを使っていますが、音源をアップロードする必要はないですよね? >>35
自分がローカル環境で試した感じだと普通にダウンロードのダイアログ出てきてダウンロードフォルダに落ちて来たけど
・audio.html
・test.wav
の2ファイルを同じ階層に置いて、
<a href="./test.wav" download>download test.wav<a>
を書いてブラウザのリンク上で右クリックして「リンク先のコンテンツを保存」から普通にダウンロードされた >>36
何度アップロードしようとしても中止になってしまうのですが、mp3に書き直した方が良いのでしょうか?
また後で試してみます >>38
何が?って思ったらaタグか
手打ちだからミスりました
すまんね 学校でHTML習ったので復習で
index.htmlっていう名前のファイル作って
IEで開いてみたら普通にみれちゃったんですけど
これ全世界に公開されてるってことですか?
ただPC中で htmlファイル作るだけでインターネット発信されるってことですか?
index.html っていう名前だけが特別なんですか? WEBサーバっていう単語をご存じでない?
サーバも無いPC内にhtmlファイル作っただけで全世界からアクセスされたら大変なことになるっていう想像は付かない? >>43
全世界どころか、全宇宙に公開されてしまってないよ >>43
htmlファイルはどんな名前だろうがブラウザで開けるよ
ブラウザで見れる = 世界中で見れる
ではないからその辺ちゃんと理解しようね >>43
.htmlファイルをブラウザで開けるのは、
.txtファイルをメモ帳で開けたり、
.docxファイルをWordで開けたりするのと同じで、
ファイルに格納されているデータをソフトが解釈して
モニター画面に表示しているだけ HTMLの書き方の前に理解すべきことがあるな
どんな学校だよ >>44-48
じゃあ後悔されてないんですね
大丈夫なんですね
あせりました
何がちがうのかわからないんですけど
httpっていうのをつけてみれるのが全世界で
file:ってついてるのはじぶんのPCからしかみれないってことですか?
httpっていうのがつかないようにするにはどうすればいいんでしょうか
ファイル名をhttpっていう拡張子で保存しなければ大丈夫ってことですか? 専門学校とか専門コースとかじゃなく、
一般クラスで、数学か何かの延長じゃないかな >>50
httpっていうのは拡張子じゃなくてプロトコル
「インターネット上で文書をやりとりするための決まり」みたいなもん
クライアント(ブラウザ) <---httpプロトコル--->Webサーバ
自分のPC内のhtmlファイルを自分のPC内のブラウザで開くのにはサーバーは必要ないわけだから当然httpも付かない >>50
とりあえず、ホームページの作り方・公開の仕方を解説しているサイトで勉強しておくれ HyperText
複数の文書が紐づいたり関連付いている文書を超えた文書
html
HyperText Markup Language
ハイパーテキストを作成するためのマークアップ言語の1種
http
HyperText Transfer Protocol
ハイパーテキストを通信する上での決まり >>35ですが、どうやら僕の使ってるサーバーでは10MB以上のファイルをアップロード出来ないみたいです
そもそもFFFTPではhtmlファイル等も含め、合計で30MB以上は無理みたいですね
なので100MB以上あったwavファイルをmp3変換して6MBくらいにしたら行けました!
試しにダウンロードしたら出来ました、ありがとうございました サイトよんで勉強してみたけど
サーバーソフトウェアっていうのを起動してないとファイルが存在するだけでは外からアクセスできないんですね
たとえばapacheっていうソフトをPCにいれると
特定のフォルダ内にファイルをおいただけでそのファイルがそとからみられるようになるらしい
でも配信したいならじぶんのPCでやるより
そういうソフトがはじめから入ってる無料のサービス使った方がいいよみたいなことかいてありました
結論から言うと余計なソフトいれたりしなければ
PCに内でHTMLかいてダブルクリックしてブラウザ開いただけでは何もおきないってことですよね
おさわがせしてすみませんでした
回答頂いた方ありがとうございました
まだHTML習いたてで
H1 H2 ってかくと文字が大きくなる
Pってかくと文字が折り返されるみたいなことしか習ってないので
いろつけたり絵はったりできるようになったら自分のサイト公開してみたいと思います >>62
あとポートフォワードね
もし、自分のPCにサーバー入れても、そのサーバーへ通信を転送する設定ができないと公開されない。
基本的にはファイアウォールで勝手に転送されないようになっている。 >>50
後悔してないのかというと嘘になるかもしれません。
彼のご両親ともこのような結果になってしまった事を
心のどこかで今でも悔いています。 firefoxのdevelopertoolsってxpathで検索できないの? >>67
コンソールタブかペインで$x('xpath')実行してターゲットアイコンで移動すれば? >>64
たけし・・たけしです!
ダンカンコノヤロー cssで無限に背景がうねうね波打つやつってどうやるんですか? >>72
70じゃないけど
SVGつかわないでCSSだけでもできるんだな
勉強になったわ 画像の左クリックだけを無効にするCSSの記述方法を教えてください
右クリック、画像の保存は有効なままでお願いします
サイトの利便性を考えて、左クリックするたびに拡大されないようにしたいです >>73
ありがとうすげーよ君。
あの1行でここまで察したとは・・・ >>75
pointer-events: none; >>77を同時に2つ開くと
うちの古いcorei7のpcクーラーが激しく回りだしてウルサイw bootstrapでフォトギャラリーを作成しています
class="img-thumbnail"で画像を並べているのですが
chromeやEdgeでは正常に表示されるのに
IE11だけ一部の画像に×マークが出て表示されません
原因のわかる方いらっしゃいますか? すみません、再起動したら治りました…。
おま環だったようなので質問取り下げます。 >>85
ソース見ないとわからないよ
その4行だけで無理やり推察するなら
・webフォントで記号を表示して不具合の可能性
・sslに対応してない書き方混在
・セキュリティ関連
・容量関連 .x {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
border-bottom-width: 1px;
}
.x:hover {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
border-bottom-width: 3px;
}
セルの中央にテキストを表示して、マウスオーバーしたときにボーダーの太さを変えて表示したいんですが、
上のような記述だけだとボーダーの太さを変えた分だけテキストの表示位置がずれてしまいます。
位置が変わらないようにする方法ってあるでしょうか。 テキストにclassかidつけて親にdisplay:flexとjustify-content : centerあたりでできない? 自己解決。border-widthの分paddingを調整していけました。
.x {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
border-bottom-width: 1px;
padding-top: 0px;
padding-bottom: 2px;
}
.x:hover {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
border-bottom-width: 3px;
padding-top: 0px;
padding-bottom: 0px;
} >>95
<doctype!>
<p>chibadman come here please!</p> 下記のcssが反映されません。どこにミスがありますか?
@charset "UTF-8";
/* すべてのwebページに適用される*/
html {
font-family: sans-serif;
}
html * {
box-sizing: border-box;
]
body {
background-color: #eeece9;
}
h2 {
color: #3f5170;
font-size: 22px;
border-bottom: 3px dotted #3f5170;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 5px
padding-right: 5px
padding-bottom: 5px;
padding-left: 5px;
} 本物のエディタを使ったことがないんだな、可哀想に。明日もう一度来てください。僕が本当の >>102
自己解決してたんだよ
ここに張り付けて一目瞭然やった
でも自己解決って書かずに作業してたら教えてくれてる人が居たからお礼言っておいた
わいド素人やねん(恥 {入力したら自動で閉じてくれるエディタ使った方がいいとおもうの 動かない時に何度もソース見ても気が付かなくて
次の日みると気がつくあるある >>97
おそらく私が>>96のコードを入力したおかげでしょう。私に、感謝すべきです。 タグは開けたら閉じる事。
回答もらったらお礼してクローズする事。
ケツは出したら入れてもらう事。 終了タグを先に書けば良いんだよ
カッコなら閉じカッコから >>98-99
W3C CSS 検証サービスで、チェックすれば?
CSS Validation Service
https://jigsaw.w3.org/css-validator/validator.html.ja
HTML・CSS の文法チェックツールも、一杯ある ベンダープレフィックスってもういい加減なくしていいですか?
勧告からもう5年くらいたってるのになんなんこれ いまどきベンダープレフィックスつけてるやつは、DreamweaverやらAutoPrefixerとかの設定を
ろくに更新しないで惰性で使い続けてるだけだから、なくしてもかまわんよ XHTMLは論理的だったのになんでHTML5でまた終了タグの省略を許したのかねぇ。 省略じゃねぇ。余計なもの付けるのが許容されてるだけ。 <style>
table.aaa td{
padding:10px;
}
</style>
<table border="1" class="aaa">
<tr>
<td>aaa</td>
<td>
<table border="1">
<tr>
<td>www</td>
</tr>
</table>
</td>
</tr>
</table>
このようにするとセルの中にあるテーブルのセルのpaddingまで10pxになってしまいます
外側のテーブルのセルのみでセルの中にあるテーブルには影響を及ぼさないようにするにはどうすればいいんですか?
外側のテーブルのセルに1つ1つclassを設定してやるしかないんですか? >>124
table.aaa > tbody > tr > td tableってでも行の高さを自動的に揃えてくれる優れものだと思うの 質問者は質問する段階からケツを差し出す準備しておけよ? >>129
tbodyはbodyとかと一緒で省略可能なだけ
書かなくても補完される CSSですが中央寄せになりません。理由わかる方いらっしゃいませんか?
@charset "UTF-8";
/* すべてのwebページに適用される*/
html {
font-family: sans-serif;
}
html * {
box-sizing: border-box;
}
body {
margin: 0 0 0 0;
background-color: #eeece9;
}
.wrapper {
margin: 0 auto 0 auto;
max-width: 960px;
} >>132
それでちゃんと寄るよ
ウィンドウ幅が960を超えてれば >>133
なぜか寄りません><
とりあえず飛ばして次行ってます
返事ありがとうございます >>134
CSS書きかえた後ちゃんとスーパーリロードでブラウザ更新してる? >>134
たぶんHTMLが間違ってる
クラス名間違えてるか、CSSファイル自体が読まれてない
そういう超ド単純なことが上手くいかんときは
関係ないものを全部切り捨てるんよ、HTMLもCSSも
<div class="wrapper">と
.wrapper {
margin: 0 auto 0 auto;
max-width: 960px;
}
だけにしてみりゃ
調べなきゃいかんところは数えるほどしかない >>136
ブラウザ更新はしています
>>137
わかりました
やってみます 令和生まれのキッズです。
スマホとPCで表示される文字サイズかえる方法をおしえてください。 >>140
お前みたいの生まれてこなければ良いのに
生れて早々に死ね >>140
なんにもしなくても全然違うサイズで表示されるじゃろ >>141
くだらないレスをする暇があるなら本気で回答しろ
時間の無駄だ!(激昂) ガチムチのトラック野郎です。
スマホとPCで表示される文字サイズかえる方法をおしえてください。 >>146
なんにもしなくても全然違うサイズで表示されるじゃろ >>149
くだらないレスをする暇があるなら本気で回答しろ
時間の無駄だ!(激昂) 現役の女子高生です。
スマホとPCで表示される文字サイズかえる方法をおしえてください? ビル・ゲイツです。
スマホとPCで表示される文字サイズ... 現役の男子です。
スマホとPCで表示される文字サイズかえる方法をおしえてください >>149が恥ずかしさのあまりログ流してるようだな(笑) 書籍で勉強してHPを1つ作れました。
次に何で勉強するか考えてます、そこで、動画学習するならどれがいいとかありますか?
どっとインストールが良いとか、プロゲートがいいとか? >>156
ワイも、数ヶ月前に超簡単な参考書見てサイト作ったよ
そのあと、ドットインストール見て基礎をまなんだ。
ま、ここまでは順調だったけどね… 学習ったって、どこを目指すかで、今何をするかは全く変わる。
例えば趣味で自分だけのHP作ってくつもりなら学習なんてかしこまったことしないで
アフィ用テンプレとその使い方をブロガーなどから得たほうが早い。
他人のサイトを作成したり制作を生業にする場合
デザイナーなのかコーダーなのかプログラマなのか映像クリエイターなのかで
何を主軸にやるかが変わる。
デザイナーならcss/htmlはほどほどにしてAdobeソフトでのビジュアルスキルを磨いたほうがいいし
プログラマならプログラムから入ったほうがいい。 制作を仕事にする場合、
よく見かけるレイアウト、デザイン、動きなどは一通りできるようになっといたほうがいい。
趣味なら自分ができることだけをやってればいいが、
相手にこういう動きしたい、ここのサイトと同じようにしたいなど
注文がくるから難易度が全く変わる。
例えば、このサイトと同じようにしたい。と言われ、
ヘッダーの横並びの各メニューをマウスオンしたら、リストが上から下に展開するようにして
スマホの時はそれら全てがハンバーガーメニューボタン1つに格納されていてタップしたら
横からメニューがスライドして展開するようになる仕様。
こんな感じで。 動画で教えるやーつ、個人的には苦手だなあ
動画でコードの書き方はちょっと…って思っちゃう
ファイルの移動やらが複雑なオペレーションとか
アプリケーションの使い方とかだったらいいんだけど ドットインストールなんて中身空っぽだからな
やった感だけ与えて(実際は何も得てないが)満足感を得ることに意味があるのかもしれない。 覚えていければ何でもいいでしょ
その後に模写できるようになれれば身についとるってことでしょ その人に合う、合わないがあるからねぇ
何でも試してみて、合いそうなので勉強すりゃいいし
動画で大まかな仕組みだとか流れだとか、ざっくり理解してから細かいとこを別のツールで
勉強するってのも手だし ドットインストールはゲームでいう取説みたいなもん
ドットインストールをディスってるやつは、取説だと思ってなくて、ゲームプレイをナビゲートしてくれるNPCと勘違いしてる
つまり、ドットインストールが良い悪いではなく、
プレイヤーの捉え方の良し悪しの問題。 おバカちゃんはドットインストールは使えないNPCだと嘆き、優秀な奴はドットインストールを取説として活用する。 4行で書いたことをなんでまた1行で書くんだよw
おバカちゃんか? 自分が既に理解している動画見てみろ
jQueryとかcssとかを。
どんだけ部分的で限定的なことを表面なぞって
学習じゃない。ただの体験だよあれ。 pythonだけできます
htmlやJavaScriptはほとんどわかりません
https://www.myprotein.jp/sports-nutrition/impact-whey-protein/10530943.html
ここをパースして、各「味」各「数量(重量)」の値段の一覧(と在庫状況)を取得したいです
たとえば「あずき味」選択時には「1kgと5kg」が表示され「チェスナット味」では「1kgと250g」およびそれぞれの価格が表示されます
こういうドロップボックスの連動は、どこを拾っていったらいいんでしょうか?
予め設定されたproduct sku (各味の固有値?) と、JavaScriptで何かモジュールを読み込んでどうにかしているっぽい気がするんですが、どうでしょうか
もし8777行あたりの長いJavaScript読む必要があるならちょっとお手上げかもしれない… 動画で視覚的に説明されてわかりやすかったのもあるけどなー >>172
あんた鬱病やで
鬱病の人って長文嫌うんだよ
嫌なら読まなきゃいいだけなのに怒り出したりする
病院へ行こう >>170
スクレイピングなら、Ruby で、Nokogiri, Selenium WebDriver が簡単。
HTML, CSS セレクターも必須
ドロップボックスの連動なんて、解析しないと無理だろ。
他人が作ったソースコードを読むのは無限地獄だから、やめたほうが良い
デバッグの基本は、ブラウザ(Chrome)上で、
例えば、価格の上で、右クリックメニューを開いて、要素の検査・検証を選ぶと、
F12 開発者ツールが起動して、その要素の部分がハイライトされる
ハイライト部分上で、右クリックメニューで、
Copy selector で、CSS セレクターが、Copy XPath で、XPathが取得できる
CSS セレクターなら、
#mainContent > 何たらかんたら > p.productPrice_price
この内容が、\590 となっている
こんな膨大・複雑なサイトを解析するには、1年以上掛かる!
他人が作ったソースコードを読むのは、
自分が作っていないし仕様書がないから、膨大な時間が掛かるので、やめるべき! SNSや動画学習サイトに慣れ切った弊害が
>>172とか>>175だろ
物事を簡単に教えてもらえると思い込んでるし
簡単に習得できると思い込んでないか >>170
8034行目にjson風の各値をまとめた配列データがあるじゃん。
通常なら、これだけのデータはSQLなどのDBで一元管理してるはずだけど
非同期で変更に対応したいから一旦、サーバーサイドのプログラムでページ内に静的出力して
それをjavascriptで動的に出力できるようにしているんでしょ。 ↑間違えた
×静的 → 〇動的
×動的 → 〇インタラクティブ んでプルダウンの動的とJSONの連動はググればでてくるよ。
stackoverflowのサイトにどんぴしゃのがあったけど
URLが日本語でここには貼れなかったわ まあでも基本的な考えは>>174に同意。
他人の作ったソースを特に表からだけで読むのは不毛な作業だよ スクレイピングはnode.jsでpappeteer使うのもなかなか便利よ
やっぱGoogle謹製で、Chromeでレンダリングした結果を
QuerySelectorで拾えるのはお手軽 2年前まではjsだけで簡単にスクレイピングできた。
CrossDomainAjaxというのがあっったのです
しかしYQL終了と共にダメなっちゃったアルよ >>176
おじさん、時代は変わったんですよ?
いつまで努力と根性で踏ん張るつもりですか(ワラ) >>183
へー。
じゃあ1cm以上の本も数ページの解説サイトもいらないね。
他人に依存するその方法で他人より優れる夢の方法で頑張ってください。 youtubeの広告に毒されてて笑うわ
職業訓練中のニートが本職に意見するとかさ >>177
あーようやくわかりました
price:固有値
url:共通&variation=sku
sku:固有値
availability:2値
で引っ掛けたら希望通りのマトリックスが取得できそうです
助かりました〜 >>187
まあ難易度は高い方だと思うから頑張ってちょ。
ちなみに俺、>>183と>>186におじさんだの努力だの言われてバカにされてる所。 なんでワイだけID出るんやろ
もうこの時点でIT音痴でダメな気がするわ
ショボーン >>192
【問題】付き合うとと運気が下がる女性のことを俗に「○○まん」と言う? ドットインストール君があまりに俺より
自信あるみたいだから一応、簡単な質問なんだけどさ、
<div>
<span class="hoge1">テキスト</span>
<span class="hoge2">テキスト</span>
</div>
.hoge2のテキストを右寄せしたい場合ってどう書く?
これくらいは簡単だよね・・? >>196
どうした?
まさか・・・0からcss書いたことないから書けないとか・・じゃないよな・・?
ちゃんと書こうな? >>198
やっと回答できたのか・・・
まあこれで自分の能力なんとなくわかったろ?
その程度じゃ>>170の回答してやることもできなだろうに
俺にマウント取りたいならスキルで叩きのめしてみろ ボックス背景の色を透明にしたのですが、chromeでは表示されてるのに、他のブラウザでは透明にした背景が表示されません。
どうしてでしょうか? >>202
バックグラウンドは画像で、その上のボックスを透明にしてるからボックスが少し透けて、バックグラウンド画像がすこし見える感じ >>195-199
なんだこの流れ
やることなすこと糞ダセェな、こいつ >>203
どうやって透明にしてるの?
opacity?
コード貼るなり、もう少し情報がないと。 >>205
火狐をアプデしたら解決した。
数年間放置しててアプデしてなかった >>206
他のブラウザってfirefoxだけかよw
まぁ、それで解決ってことで良いならいいんだけど。
とりあず記事は古いけど参考まで。
opacityを全ブラウザに対応させるcss
https://webkan.hateblo.jp/entry/20160214/p1 >>207
vivaldi, brave, opera gx, tor >>204
ダセェとかカッケェとかバカなの?
てかさー、まともに向き合えないからって本質から話そらすお前の方がダセェじゃん?
何言ってんの? え?それドットインストールで習ってないんだけど?(怒)
プッ 楽して技術を身につける事に抵抗がある奴は
いままで自分が努力してきた事を否定されてる気がしてよく思わないだよね。
そういう人は今後AIに代替されるよ 抵抗があるっつーか、
楽して儲けたいとか楽してハイスキルになりたいって人で
実際に優れた人にあった事ないんだわ。
だから問題出してみたんだが、やっぱり覆してくれないわけじゃん?
覆してよ。
俺も楽して資産1億まで持っていきたいし、世界で通用するオリジナルのプログラム作りたいから早くしろよ。
早くAIも楽して作れよ。動画で学べば簡単にできるだろ? 要するに提供する側と提供される側の発想なんだよ。
楽して云々いってるのは永遠に提供される側。
末端のお客さんなんだからクリエイティブとか生みの苦しみとか無縁の情弱。 誰かが作ってくれるのを待ってそれに乗って
それがダメになった一緒にダメになり
そしてまた誰かが新しいのを作ってくれるまで待つ。
まあそれでも生きてはいけるだろうけどその価値観を人に押し付けるのはどうかと思うけどね。 楽にも2種類ある
外的要因(ジョブ、キャリア)から生じる楽と、
内的要因(コーリング)から生じる楽
>>217の言ってる楽は前者
前者の楽は金メッキみたいなもん
崇高なワイらのいう楽は後者だから、
そもそも、話が噛み合わないんだおね 仕事を取り組む姿勢が違う人とは話が噛み合わないから、お互いスルーするのが一番合理的。 確かにスレタイも読めずにポエム垂れ流して
必死になって荒らす奴とは仕事したくないね 1人だけ顔真っ赤にして独り相撲してるのが滑稽だね。 class統一教会の次はドットインストールに顔真っ赤な人かw
ネタが尽きないねこのスレw cssセレクタでtext本文の中身で指定するにはどう書くの >>226
どうも
p::textでググッても引っかからない。コロンが無視されるのか >>225
意味不明。
jsで言うところのnodeTypeで取得するやつの事? どうせbody {color: red;}とかそんなしょうもない話だろ >>232
JSのnodetypeが意味不明ですが
たとえば
<p>中身</p>
の ”中身"で指定できるセレクタは無いかということです 疑似クラスはまとめて複数指定することできる?
1つ1つしないとだめ? >>234
cssでは出来ない
>>235
別になんとでも
*:before {
content: "aaa";
} >>236
解答ありがとうございます
今お問い合わせフォームを作っていて
:focusについてなんですが
textarea,input[type=”text”]:focus {}ではtextareaが効かなかったのです
この場合別で書くしかないのでしょうか? >>237
textarea:focus, input[type=”text”]:focus{} 長いこと不満である案件について質問があります
昨今多くなったYoutubeやTwitch等のサムネイル羅列によるサイト構成において、
サムネイルや罫線の間へ強制的に設けられる空白・スペースの存在が邪魔でなりませんでした
モニターサイズが小さくなればなるほど無駄に思えます、これらをuBlockの要素隠蔽で無期限非表示にする方法はないでしょうか?
Amazonの検索画面等、似たサイト構成ながら空白そのものを条件付けているWeb構造の場合、それらを直接指定することで非常に快適な閲覧環境を作れました
問題のTwitch等は、<div></div>の間に別の<div></div>があるWeb構造で、それらが四重五重となってサイトを形成しています
何重にも重なる<div></div>と次の<div></div>の間に空白が設置されており、<div></div>をそれぞれ指定しても特定の表示アイテムか、
そのアイテムを含む一つ前の<div></div>による一区画全てを空白込みで指定することになってしまうのです
いや<div></div>の間にある空白スペースはどうやって指定するの?と
もう数年抱いている不満を解決したく、どうかお力をお貸しください スレの範疇ではなくなるけど
$('body').html($('body').html().replace(/</div>\s+<div>/gi, "</div><div>"));
とかをブックマークレットに仕込めばいいんじゃないの? >>244
自分、IQゾンビ並みなので何を言っているのか不明です、申し訳ないです
色々と模索して昔のYoutubeに関するスタイルシートをサルベージしました
当時と一緒で中身は一切分からないのですが、パーツと語感とコピペ検証をして成果が出ています
元が左寄せ用のwww.youtube.com###page-manager:style(margin-left:0px!important;)で
firefoxの[要素を調査]から模索、page-managerの部分がIDを示していると分かり、手間は多いものの一気に進みました
たどり着いてしまえば、機転だけでよくもまあ上手く行くもんだと思います
しかし調子のよいコピペにも限界があるようで、<div id="items" class="style-scope ytd-grid-renderer">の下にある
<ytd-grid-video-renderer class="style-scope ytd-grid-renderer" lockup="">へmarginが付与されていると、先のidコピペを使うことが出来ません
ytd-grid-video-rendererは何だろうと調べればどうやらスクリプトの様子
スクリプトに設定されたmarginの値を変更するにはどうすればいいんだ、と
CSSを1mmを理解していなくともここまで実用化出来たなら御の字ですかね
疲れましたわ
TwitchはYoutubeより簡易的なので、時間を見つけてチャレンジしたいと思います
もう少しYoutubeでidコピペの通用する部分を探し、一区切りとしたいですね
並行して恐縮ですが、どなたかスクリプトに付与されたmarginを調整する方法、ご存知でしたら教えてください むほほー!!!
そういえばuBlockで、俯瞰した状態にて複数削除する時に###から##.へするよな(これも昔直感で見付けたこと)
体感は階層変更だろうか?うーん、とただ赴くままにスクリプトも##.にしたらいけてもうたwwwwww
きたこれ、これ上手くいっちゃったらもう止まらないわwww全部解決しそうwwwww
勝手に全部自己解決してなんやねん的なー
昔のスーファミじゃないんだから説明書を読まなくてもクリア出来ます!理論をWeb言語に持ってきてもねえ
こんな奇跡はそうそうないだろうけど、まあ、何とかなって良かったッス
はーお騒がせして申し訳ない
初めて広告除去系アドオンを導入した時並みにブラウザ環境が激変しそうwwwwwwwwwww
(´∀`)ウペペペペペ 長文すぎて読む気にならないから大して読んでないんだけど、ユーザースタイルシート使えば良いんじゃない?
あれこれサイトごとにいじくり回すのだるいでしょ >>234
だからnodetype===3じゃねーか
もっというとテキストの文字列、たとえば「中身です」のうち「中身」を特定文字列として指定(取得)するとも
取れる質問の仕方だから意味不明なんだよ ここはどんな質問にも厳しく答えるスレだって事忘れるなよ >>245
まず、いついかなる時もブラウザの開発ツールを表示する癖をつけよう
んで、気になる要素があったら
ブラウザ表示側で右クリ→検証するか
開発ツール側のElementタブで、該当する要素をクリックするんだ
話はそれからだ >>249
そんな基本的なことまで教えてくれるなんて優しいなあ !importantって上に書いても優先されるって認識でいい?
あと全部に付けたら特に意味ないよね? >>252
そうそう
あまり!important使うと後で弄る時に分かりにくくなるから、
使わずに済むなら使わない方がいいかも? 自分ですべてのCSSをかけるときに
!importantは使わない。
使ってはならないレベル
なにかのシステムがあってどうしても
変えられない既存のCSSがあるときにだけ使う もう書かないと思ったけどレスがあったので後日談を
今確認するとF12のやつが開発ツールに該当していたので、自分も利用していましたわ
今日の今日までBSキーの誤爆が鬱陶しいとしか思わなかった仕組みですが、きっちり中身を見て用途を吟味すれば非常に利便性の高い万能ツールだと思います
公式で標準装備されているFirefoxと現在の技術革新に感謝したい
F12のそれはadobeが苦手で意固地に選択していたMicrosoft FrontPageを思い出します
自分のWeb技能が中途半端かつ年代もその周辺で途絶えており、せいぜいADSL時代のWeb技術よりは対応力がある程度(つまり現代じゃ残飯)なんですよね
多少の対応力があるおかげか、ぎりコピペや試行錯誤に運用出来た次第です
Twitchのページ改変はmarginの重複上書き仕様をサイト側がめちゃんこダブらせていたので、思ったより苦労しました
Youtubeと別ベクトルの手間でしたな
全部自己解決で何とも言えませんが、結果は両サイト共に上々
この調子でAmazonも調整しようかと思えど訪問頻度や手間と歯止めから増やすべきではないと判断
長年の懸念で、いざ取り掛かったらあっちゅーまに劇的改善し、ワロリーヌ
また、marginやpaddingのシートを上下左右一行にまとめる記述があった気もするけど、自分じゃ手一杯なので先のコードを一つずつコピペって対応しました
重複の酷かったTwitch用フィルターがその分増えてMyフィルター枠を圧迫している点だけ、心残りです
気が向いたらmarginの書き方を検索して、もし可能であったなら書き換えたいと思います
ではでは ウポポポポ
書いたそばから(padding: 3px 15px 3px 15px!important;)や(padding:3px 15px 3px 15px!important;)でまとめられたっちゃ
楽しいんぬ
1スペースの有無が許容される場合と、差異が許されない場合の判断が根本的知識のない自分には厳しい
padding類はその辺り甘めでラッキー
今度こそ、今度こそさらばでござるううううう F12 開発者ツールは、Chrome, Edge でも使えるけど、
Chromeが使いやすいのでは? >>258
padding: 3px 15px 3px 15px!important;
↓
padding: 3px 15px!important; Amazonに手を出したのでまーた来ちゃいました(´д`)ウペペ
marginの上下+左右 上+左右+下 は自分もあの後気付いて変更しています、助言有り難う御座います
Amazonはこれまた違ってfloatの乱立と、右で左側にpaddingをしながら左で右側にサイズ固定+marginマイナス値とか、
マッチポンプのような訳分からんことをしていたので修正も嵩み面倒でしたね
商品サムネイルのサイズを小さくしたらめっちゃ快適にwお勧めですわwww
ネットの数だけサイトの仕様も変わるのですから、やはり自分でのサイト改変はuBlock要素隠蔽までに止めておいた方が健全ですな
ゾンアマyoutubetwitchの3種だけにしたい
今は、上下と左右の片方ずつをmarginしたい時のstyle(margin:0px 1px 0px 0px!important;)系にするかstyle(margin-top:43px!important; margin-left:0px!important;)系にするか悩ましいです
paddingも入れてこんな感じstyle(margin-top:43px!important; margin-left:0px!important; padding-bottom:0px!important;)になると!importantが邪魔で邪魔で(笑)
一行にまとめるようにしてからフィルターの中がナンチャッテスッキリはしましたけど
一昨日辺りにスレのログを参考にして!importantを削除した時、サイトのレイアウトを勝手に改変する手前、ひとつでも!importantを欠かせなかった現実がありまして今に至ります
昔のhtml理屈だとどっかで定義を作って一括変更!なイメージですわ
しかしそんなCSSの十八番である別枠に全体定義を設けるパターンではなく、あくまでstyle( )の一行のみにて完結するコマンド的なものがあると扱いやすいんですがw chromeで、フォームに何か入力した状態でタブを閉じる
→「閉じたタブを開く」で復活させる
→入力していた情報まで復元される
こういう動作になることに気づきました
セキュリティ的な観点から閉じたタブのフォーム情報を復元したくない場合、
どうすればいいのでしょうか? >>264
作る側の話か使う側の話か知らんが
前者ならautocomplete="off"
後者ならキャシュクリア設定すりゃいい話では? >>265
ありがとうございます
autocompleteを設定したら復元されなくなりました ほんの一部の質問には優しく答えることもあるかもしれないスレ ReactのstyledcomponentでCSSinjsを実装する場合はコンポーネントとスタイルのファイルは分けるべきですか? 担当が触る範囲を限定させてあげて
事故w未然に防ぐのが大人の配慮 普通にReactくらい使えるがw
今まではCSSmodulesで管理してたがstyledcomponentに移行しようと思ってな
あ、ちなみに応用情報持ちのフルスタックエンジニアっすw 応用情報って>>273くらいも自分で評価できないんだ?はぇ〜つっかえwww positionは親タグのrelativeが基準になると思いますが、
たくさんタグが入れ子になっている時、どこにrelativeがあるかはcssを探さなければならないのでしょうか?
開発ツールなどでわかるのでしょうか?
firefoxの開発ツールを使っています。 >>281
そうだよ。firefoxのh開発ツールで見ていく。
relativeに限らず他人の作ったサイトはcssを探したり解析してくんだよ。
昔なんて開発ツールすらなかったから、cssファイルを片っ端からどこで何が使われているか
ここをいじったらどことどこに影響出るかとか把握するのが大変だったんだわ >>281
レイアウトタブのボックスモデルのプロパティのpositionの所に基準が出てる CSSでアニメーションさせる時、スクロールのトリガーってどないしてます? 横で申し訳ないんだが、
postisonってabsoluteになりつつrelativeにはなれないの? positionスペルミスだったわw
親タグにrelativeを設定、子タグにabsoluteと同時にrelative, 孫タグにabusoluteみたいな。
そういう事例は無いと思うけど、もしそういう事態になったら、子タグの上か下にdivとか増やして、そこにrelativeを設定する正しいのかな。 #div-id :not(th,td) {white-space: nowrap;}
これでうまくいかない。なんで。 divにつけてるid名です。
このdivの子要素だけには適用したくないってことです。 >>295
#div-id :not(th):not(td) {white-space: nowrap;}
じゃねーの? >>295
現状:notのリスト形に式対応してるのはsafariだけ !Importantとid乱用してセレクタがインフレ化してるの笑えるわ
html body#contact .contact_confirm.contact_confirm_step2 table#first tr:nth-child(2n) td.bg { background-color: #333 !important; }
みたいなの いつも tr:nth-child 使っているけど、
そういえばnthって何の略かわからん・・・ >>308
序数
1番目 First
2番目 Second
3番目 Third
4番目 Fourth
5番目 Fifth
6番目 Sixth
7番目 Seventh
8番目 Eighth
N番目 N-th >>310
あぁぁぁ、そういうことか。
スッキリした・・・ありがとう。 CSS4対応のブラウザが普及されるのはいつですか? コンパイラなしに変数やミックスインが使えるようになります 文の下線を 赤の線と青の線みたいに2種類3種類付けたいのですが、できる方いますか? >>317
任意の文字列に二重線や三重線をつけて、それぞれ線ごとに色を変えたいって意味?
それとも文章の中の例えば単語ごとに違う色の下線をつけたいってこと?
後者の意味なら、とりあえずこれでも読んでみて
HTML/CSSで下線(アンダーライン)!3分でわかるテキスト際立たせテクニック
ttps://seolaboratory.jp/66605/ IE11+HTML+CSSしか使えない(JavaScriptもPHPもCGIも使えない)状況で、
Formを使ってプルダウンメニューからページ内遷移する方法を探してるんですけど参考になるページなどありませんか?
<form>
<select>
<option value="#test">A</option>
</select>
<input type="submit" value="送信">
</form>
みたいな形にすれば送信ボタンを押すと<p id="test">の地点へ飛んでくれると思っていたのですが上手くいきません
<form action="#">とするとURLの最後に#は入るんですけど、<option>に設定したvalueが#の後ろに反映されないのが悩みです そんなゴミ環境でページ作るのが悪い
まあCSSでゴニョゴニョして擬似的なプルダウンメニューでも作ってやるしかないんでないの 基本的にformでsubmit押してもactionで指定したサーバーのプログラムに
選択したvalueを送信するだけだからなぁ
CSSでプルダウンメニュー作ってリンクから遷移させる方が、送信ボタンを
押さなくていいから、ユーザーの手間は1つ減る
送信ボタンを押す一手間がどうしても欲しいならjavascript使うしか無いかも
ゴミ環境強制って役所の仕事とかかね? 回答ありがとうございます。CSSで試してみます。
環境的にはお役所仕事みたいなものです。
Firefoxでも使えればアコーディオンメニューが出来るんですが、それすら許されず・・・。 >>326
出来ませんと言ったほうが良い。
やっぱり出来るじゃねーかって言われて、
次から無理難題が増える progateの忍者犬が可愛くて可愛くて見てると楽しくて勉強って気分じゃなくなってしまいます
一緒に野原を駆け回ったり、忍者の修行したりして遊びたくなります
どうにかする方法ご存じの方いらっしゃいませんか? 画像をクリックするとモーダルが開き、画像に関する詳細が表示される・・・という作りの場合、
それぞれの画像の下にモーダル関連の記述がある方が文書構造としてはベターなのでしょうか?
現状は処理が楽なので、bodyの閉じタグ手前にモーダル関連を一まとめにしてしまっていますが、
この作りだと画像との関連性がないと思い、質問しております。 altにでも入れて置いたほうがいいんじゃないかなと思う >>331
何のための文書構造なのか
検索エンジンを意識してるならわかりやすい構造にすればいいし
したところでほぼ何も順位はかわらないだろう。
自分以外の制作者を意識してるならそういう作りにすればいい UTF-8で保存したLess
CSSとしては機能してるけど、ブラウザで直接Lessを表示すると、コメントアウトなどの日本語が文字化け
どうやって回避したら良いのでしょ? 今はほとんどが、SASS。
Less を使っている人は、いない
Lessを、Less Compiler で、CSS へ変換するのでしょ?
SASS のスレで、聞いてみれば? そやね
sassスレなら誰かわかるかもしれんぞ
僕はLessわかりません。。 クライアント側jsでやってるのかも?
ブラウザで直に表示した時の文字化けは気にするだけ無駄
どうしてもというならlessファイルに対してサーバーで応答ヘッダのcontent-typeにcharaset指定するくらいかな 保存したとか書いてるから、UTF8のテキストファイルをブラウザで開いたら化けた!って話かと。 >>339
>クライアント側jsでやってるのかも?
そです
SCSSでも良かったんだけど、ローカルがwinだとRuby入れろだのめんどくさいこと言ってる解説が一杯有って、
なんでCSSへのデコードでそんなもん入れななならんのじゃ!って反発してたら、
VScodeの拡張だけっで行けたんでこっちで行くことにしたです
どもありがとです sass使うのに今どきrubyなんて使わんよ。
トラブルの元だからな。
node-sass使う。 まともな発信が少ないせいなのか古い情報がなかなか消えないよな
直近1年検索が重宝する というかもうグーグル検索結果は地獄絵図 検索こじきしかいない >>345
かなり長いこと使ってトラブった経験ないんだが
具体的に何があるん? osアップデート掛かったらビルド通らなくて大騒ぎになった。
macにプリインされてるrubyのバージョンが上がって、rubyスクリプト動かなくなったのが原因だった。
でruby使ってるのが結局sassの部分だけであることが判明し、
そもそもなんでフロント作るのにrubyがしゃしゃり出てくんの?と議論になり、
調べたら速度的にもパッケージのバージョン管理的にもnode-sassのほうがだいぶ優秀、というか日本以外ではsass使うならnode-sassのほうが主流ということが分かり、
改修して結局rubyへの依存性はゼロになった。
ビルド時間も短縮された。 Ruby のSASS は、だいぶ前に終了した!
皆、知っている
VSCode の拡張機能にもあるし
今は、Ruby2.6.5 が最新だよ。
Mac のプリインストールのRuby を使う人なんて、いないだろw
Linux でも、2.3 〜 2.5 ぐらい rubyもnodeも
バージョン管理ツール入れるところからだな いやrubyへの依存ゼロになったので要りません。押し売りはやめてください。 linterはどうしようかねえ。
sass-lintはrubyフリーかと思ったけどもう先がない? CSSの関数calc()について質問です
hsl()のl、明度の値(0%〜100%)をCSS変数を基準に求めます
CSS変数xには0〜100の任意の数が入っています
このときcalc()を使って、「変数xが0〜50なら-1より小、50〜100なら1より大」を求める方法は無いでしょうか
自分で考えたのは、(x-50)÷(x+50)をして正負を出すところまでです
+000│+050│+100 :x
−050│+000│+050 :x-50
+050│+100│+150 :x+50
−001│+000│+0.33 :(x-50)(x+50)
絶対値が1より小さいんだから、あとは1を割るだけじゃん!となりますがゼロ除算はHTMLパーサーがエラーを生成するので困ってます
不可能なら大人しくJavaScript書きます -1より小と1より大で分けたのは、×100すれば-100と100にできて
これをlに指定すれば自動で0と100に正規化されるからです SCSSだと他で使う時もSCSSでやって貰わんとだからお勧めしないぞ
あくまでCSS作成ツールに過ぎんしな 一度使うと手放せんな。
cssで納品するとかでなければ使わん手はない。 業界標準技術ではないやろ……便利やけど
てか独自拡張の便利ツールやぞ MScodeのLive Sass Compilerを使ってるんですが、
table.sample {
〜〜〜
{
td {
〜〜〜
:hover {〜〜〜
}
}
}
とするとコンパイル後、:hoverの前に半角スペース入っちゃって(table.sample td: hover{})となり、正常に作動しないですけど、
これはLive Sass Compilerのコンパイルミスなのか、SCSSのSyntaxErrorのどちらなのでしょう?
td:hover{}で別に書けば回避できるけど、これじゃなんか… 訂正
table.sample {
〜〜〜
td {
〜〜〜
:hover {
〜〜〜
}
}
}
です >>364
ふぉぉ〜〜〜〜出来ました!
なるほど…擬似クラスだから&で参照なのですね
勉強になりました
どうもありがとうございました フリーが落ち目になったため中途採用で面接を受ける者です
それなりの数のポートフォリオなどはあるのですが、面接時に実技試験があります
簡単なページを1時間ほどで制作と先方から連絡をもらいましたが、どのような試験が多いかわかる業界のかたいませんか?
当方1年ほどブランクがあるので最低限これくらいはリハビリしていった方がいいとか60分のページ制作で求められるものやページ数などなんでもいいので採用担当や人事のかたいましたらアドバイスほしいです altとかは当然として、main、article、sectionとアウトラインは知っていて欲しい
後はflexとgrid、floatのclearfix
こんなけ知ってれば大体どうにかなるやろ >>366
そんな試験がある会社がそもそもそんなに多い気がしないんだが >>367
clearfixだけその中で場違いな気がw
そうとう久しぶりに見た気がする >>369
もちろんもう新しく使う事はないけど、
保守の時に必要になることがたまによくあるからな
floatってとっつきにくいから知ってないとそれはそれでマズイ 逆に言うと古い技術で知っておきたいのはclearfixぐらいってことでもある >>367
ありがとう!
甘えついでにそれらをまとめて模擬試験とか解説とかをしてるサイトをご存知なら教えてほしいです
あらためて見つめ直すと欠けてるところもありそうで怖い 試験のある会社ってどんなんだ
ポートフォリオと実際にwebにあがってるものみりゃ
実力なんてわかるだろ
試験できても実務で使い物にならなけりゃ意味ねえし
DTP検定なみにうさんくさ clearfixっているか?
float時代もずっと使ってなかったんだが
overflowでいいじゃん みなさんご助言ありがとうございます
デザイン上がりでwebにきたもんですから正直コーディングが苦手でfloatなんか聞きたくもない感じなんですが…
初耳の単語もちらほらで不安でしかないですbootstrap使ったら殺されますか?
今はもっとスマートな制作ツールとかあるんでしょうか? >>375
新規案件ではもういらんけど
保守メンテで古いサイト任されたら必要だろ clearfixのパラメータをカンニングしないで書け
っつわれたら
書けないわー afterにcontent"."、clear:both、disaplay:block…で良かったっけ?
なんか自信ないなぁ floatの解除にclearfixを使って、思い通りのレイアウトに!
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc
.clearfix::after {
content: "";
display: block;
clear: both;
} 人のつくったサイトいじるときになぜか配置が変とか
なぜか背景画像が切れるとかあったらだいたいfloatのせい >>385
zoomはIE7以下で
display: inline-blockが使えないので代わりに
display: inline;
zoom: 1;
とすることで同等の扱いにするもの >>388
サイト全体ではなくこのフォルダだけだから
たぶんこの特設ページの、そういうネタなんだろう
https://global.yamaha-motor.com/jp/showroom/event/tokyo-motorshow-2019-bs/
わざわざテーブルレイアウトしたり
gif使ったり、背景抜かなかったり、芸が細かいなw >>381
プログラミング学習じゃ暗記より理解の方が圧倒的に大事
勉強の試験じゃひたすら暗記だけど、プログラミングはいくらでもカンニングして良いし寧ろもっともっとリファレンス読み込んで理解すべし >>391
擬似クラスは1つ、疑似要素は2つ
なんだけど1つでも許される 擬似要素と擬似クラスを見分けやすくするためにCSS3でコロン2つに変更された 余談だけど、疑似クラスはJavaScriptの要素取得に使えるけど疑似要素は使えないとかもあるね 疑似クラスも無視されてるだろ。
#hoge:hoverとか付けててもホバーしてるしてない関係なく#hoge取得されるし >>395
え?
"idがhoge"は#hogeも#hoge:hoverも両方当てはまるから当然だしむしろその動作じゃないとおかしいぞ
#hoge:hoverでCSSを設定するのは#hoge単体には設定しないから非ホバー時#hogeに適用されないんだ querySelector('#hoge:hover')
ってことじゃろ? Document.querySelector('#id')
Document.querySelector('*:hover')
Document.querySelector('#id:hover')
どれも意図通り(ホバー時は要素、非ホバー時はnull)に動くよ
以前は不具合があったのか、IEみたいな互換性低い環境で試作してたんじゃね 元乃木坂46 の川後陽菜のOFFICIAL SITE も速い
ファンサイト・ファンクラブ・ストアサイトを運営してる、SKIYAKI という会社 HTMLってレンダリングにtridentとかWebKitとか分散してるけど
何で統一しないの >>403
俺のブラウザのためにこの機能入れてくれ!っていっても
反対されるか、説得に時間がかかるから 俺様のBLINKとMARQUEEを早く復興しておくれ。復興してくれないならNetscape続けなくちゃな! レスありがとう。なにか古い知恵で書き込みたくなっただけやねん CSS4なんてのは存在しないよ
CSS全体の版に付番されるのはCSS3までで、以降はmodule単位で版を見なきゃだめ
しかも新しいmoduleの番号 (level) は4とは限らない
例えば現行の「値と単位」はCSS Values and Units Module Level 3で次は同Level 4だけど
現行の「CSSグリッド」CSS Grid Layout Module Level 1に対して次期はlevel 2 あとEdgeはそのうちChromiumに統合されるからEdgeHTML仕様は消滅するよ >>412
EdgeHTML果汁入りのEdgeがEdgeHTML(とWebkitも?)果汁をなくして
Blink果汁他100%になるだけだ、安心しろ >>413
いやいや、Windows10でウンカスIE/Edgeがそのまま消えずに居座るんでしょ
それが厄介なんだよ
IE12(中身はWebkit),Edge(中身はWebkit)とかになってくれればいいんだが
そううまくは行かないだろうし >>414
いやEdgeは完全にChromiumに移行してレンダリングエンジンはBlinkになるよ
IE11のサポート終了は発表されてないけどね Windows 10になれば、IE11をわざわざ起動するやつはいない
どこから起動すれば良いかもわからんだろう 歓喜するのは尚早すぎるけどな
MSもセキュリティ専門家もIEからEdgeに移行しろなんて今までも散々言ってきたし、機能も明確に差があるのにIEに籠もってる層は生まれてる訳だ
そもそもそういう層は古い技術でしか作られてないツール使う必要性からとか、そもそもブラウザはIEのアイコンしか知らん!って勢力が多いから籠もってる
IE11が消えない限り足かせは外れない 別に今使ってるブラウザの機能をフォロー出来てるんならそっちに自然と移行するだろ
脆弱性少なくても重かったり使い勝手悪かったらただの糞ブラウザ IE11が消えない限りーというが、
IE10までは消えてるわけで IE11 では、5ch も無限ループか何かで、ずっとフリーズして動かないから、Edge を使ってる
でも、Edgeでは、エロ動画の再生エラーが多いから、Chrome も使うw Excelでブラウザ操作の自動化がIEしかできないんじゃなかったっけ?
VBAの本は皆こぞってIE前提に書いてるからなくなれないだろ IEはせめてconic-gradientに対応してくれ EdgeってIEコンポーネントみたいに利用出来て個人でブラウザ開発に使えたりすんの? >>426
Edgeはエンジンがblinkになったので
ふつうにChromium使うのと同じ
iOS用Edgeというものもあって
それはwebkit使ってる スマホで5chを見ると勢い順、新着順、過去に見たスレなどを見れるのに
Chromeのデベロッパーツール(F12)だと勢い順、新着順、過去に見たスレなどが表示されないのはなぜですか? クッキーかUAで制御している
具体的にどのURLか教えてくれれば見るよ クッキーだな
最初に読み込んだ時にPCかモバイルかを切り分ける
デベロッパーツールでモバイルにしたりや画面の幅を変えても変わらない 質問です。
videoタグを使って動画を再生するページを作っています。
ひとつの動画を横並びにふたつ表示して同時に再生させてシークした場合も同期させたいです。
ふつうにvideoタグをふたつ記述してソースも同じにしてやってみました。
シーク後にdocument.getElementById("test2").currentTime=document.getElementById("test1").currentTime;で同じ位置になるかな?とやってみたら少しずれてしいまいます。
mediagroupも試してみましたがこちらは片方の再生ボタンを押してももう片方は全く動作しませんでした。
何かいい方法はないでしょうか?
全く同じ物をふたつ表示できるクローンみたいなものとかないでしょうか? >>433
ありがとう、参考になりました
出来ることは確認しましたが同じことをやろうとしても難しくてさっぱりでした >>431
いや切り替わることは可能です
普通にデベロッパーツールの状態で再読み込みすればスマホ版になります
そういう質問ではなくて、勢い順、新着順などが見れなくなるのです
「通常順」は見れるのですが、横にある「人気」「新着」が作動しません ごめん質問の意味違うか
普通にクロームでスマホサイトで人気順、新着順に切り替わるぞ
ちょっとでも切り替わるまでの時間が長いから真っ白になるけど 専ブラって登録制のdat直アクセスじゃなかったっけ?? >>438
何度もすみません
ご返答ありがとうございます
私も今やってみたら人気順、新着順見れました
以前は見れなかったのですが
サーバーの不具合?か何かだったのでしょうか
失礼しました 商品の画像を複数連結した1つにしたものを
cssでbackground-imageを指定して、
backgroud-posisionでずらすというのは、今でも一般的なやり方?
昔流行ったやり方でディスクI/Oの低減ぐらいがメリットだと思うけど
他にメリットはある? >>436
せっかくデヴツール開いてんだから
そこんとこの要素がどうなってるか
見てみればいいじゃない >>444
ゲーム制作ツールのTexturePacker, SpritePacker, SpriteAtlas とかだろ >>444
スプライトは機械が勝手にやってくれるならやらせることもあるな
メリットとしては
リクエストが減るってのが大きいと思う >>446-447
ありがとう、3個ぐらい連結してメリットがどうかわからなかったけど、
ディスクI/Oとかに困らなければ、サーバのストレージはSSDだし
今の時代ではそこまで積極的に使うものではないと考えます >>448
ディスク資源よりも
ネットワーク資源の方の問題
サーバ側にもクライアント側にもメリットある そうそう
だからインフラや鉄道などの災害時に大アクセスあるところなんかは
緊急時用に画像とかも全部埋めた1枚のHTMLだけのページ用意してる 全てインライン(一枚のHTML)ってのが理論上最も軽いしな clearfixとclear:bothって違うの?
floatを含むdivにclear:bothをするのか、
floatを含んだ親の次のdivにclear:bothをするのでしょうか? あの…有料サイトで何度練習しても模写コーディングができないんですが、
これはどういう風に質問したらいいんでしょうかね(;_;) >>452
clear:bothを半自動にしたものがclearfix
div:after{clear:both}
みたいにするけど、別に
br{clear:both}
のようにしても良い
要は最後にclear:bothが来れば何でも良い
けどそもそも今更float使う必要あるんか floatはCSSの一番の難所だから是非理解してほしいけどな。 clearfixは手法名であって、clearfixというタグがあるわけではない。
手法名としてに認知されているからクラス名にclearfixと入力されることが多いけど、そこはcfと略したり何でもいい。 モダンなHTML/CSSをマスターして、ピチピチしたモダンな女の子と仲良く成りたいをw
(^q^) キャーH canvasとsvgって覚えるならどっちを優先したほうがいいと思いますか? divでブロックにした要素が、要素外のすぐ上の文字を隠してしまうんですけどなんででしょうか?
floatは使ってないんですが。
paddingを広くとった問い合わせの文章のブロックがすぐ上の文章をpaddingの下に敷いてしまいます。 >>460
上の文字をブロックにしてみるかline-heightで調整してみては? >>461
ありがとうございます!
これ2chしない知人の悩みで、今凹んで就寝中なので後で伝えさせて頂きます!(..) >>452-457
このサイトで説明してる
floatの解除にclearfixを使って、思い通りのレイアウトに!
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix::after
clearfixというクラス名を付けた要素の直後(::after)に、
content: "";
contentプロパティで任意の文字などを挿入
display: block;
それをブロック要素にして、
表示はされないがclearfixを付けた要素の直後に要素を作った
clear: both;
ここでfloatを解除 レスありがとう、かなりすっきりしてきました。
codepenとかthimbleで見てもらうのはやっぱりアカウント登録しないといけないのかな >>460
それ絶対何かあると思うわ。普通はありえない。 >>466
positionやらtransformあたりも怪しくなってくるな すぐ上の文字列はpとかdivで囲ってブロックにしてるのかな?
jsfiddleとかに当該箇所のタグとCSSを書いてみたら、問題を切り分けやすいかも 以下の <h1>見出し</h1> の上部と <section> との間のスペースをなくしたいのですが、
どのようにすればいいのでしょうか?
<section>
<h1>見出し</h1>
</section>
現状は margin-top にマイナスの値を入れています。
h1 {
margin-top: -???;
} >>470ですが、単純に margin を 0 にしたらいけました。
h1 {
margin: 0;
} >>460です、おはようございまーす
ここで相談したおかげでdivとmargin調整して文字かぶりがなくなったみたいです。
ありがとうございました!(>_<) background-colorってその上下の要素まで侵食するってことありますか?
divでブロック化していれば上下の要素まで食い込むってことありませんよね? >>475
background-colorが入ってるhtmlでのタグ閉じ忘れってことで合ってますよね??
もうコード消してしまって正確に返事できなくなってしまいましたすみません… 今プロゲートやってるんですが、
spanタグでクラス名を囲ってるのはどういう理由でしょうか?
spanタグ自体はdivタグの中に入れ子?
になっています。
クラス名をインライン要素にするって意味ですかね…? <header>
<div class="container">
<div class="header-left">
<img class="logo" src="">
</div>
<div class="header-left">
<span class="fa menu-icon">
</span>←ここです
</div>
</div>
以下略しますけどこれのspanがどういう役目なのかを知りたいです… その時点ではspanに特別なスタイルが設定されてない限り意味はないよ
あとクラス名をspanタグで囲うなんて見方はしちゃだめ
spanタグで要素が用意されてそれにクラスが付けられてる/クラスが付けられたspan要素を配置してる
と見た方が良いよ >>479
それはFont Awesomeという外人が作った有名なwebアイコンサービスを
表示するための記述ですよ。
spanに対し疑似要素でΘみたいなアイコンを表示します。
なのでアイコン+テキストの場合
<span class="fa menu-icon">メニュー</span>
とすると
Θメニュー
となり、今回のソースではテキストは不要だからspanは空にしてるのです。 ちょっと紛らわしいよね
プロゲート最新技術おしえるのはいいけど
もうちょっと説明しやがれと思う >>482
月980円(税別)で教材提供しているんだ、ガタガタ言うなや >>479です。
みなさんありがとうございます!
クラス名でどのアイコンをひっぱってくるか指定しているんですね(>_<)気がつかなかったぁ…
丁寧に教えてくれて本当助かりました。
紛らわしいというか、私の場合は単純に勉強不足だったと思います…今日上級クリアしたんだけどなぁ… 何か作ったりリファレンス読んだりしてると
自ずと知識増えていくかなと
プロゲートだと
box-sizing: border-box;
とか教えてないし
まぁなんでもかんでも教えてたらキリないからそこは仕方ない 301リダイレクトについて教えてください。サブディレクトリ「new」にディレクトリ構成が同じサイトを構成済みでURL変更リダイレクトさせたい。
今 https://hoge.info
新 https://hoge.info/new/
今のURLを新のURLに変更したいのですが.htaccessに
Redirect permanent / https://hoge.info/new/
を記述したら永久ループしちゃうんだけどどうしたらいいですか? 試してないから分からんが
RewriteEngine on
RewriteBase /
RewriteRule ^(.*)$ /new/$1 [R=301,L] >>488
最後はこうじゃね?
RewriteRule ^((?!new/).*)$ /new/$1 [R=301,L] Bootstrap覚えたらモダンな女の子からモテモテになれますか? 英字のウェブフォントとか使うとたまに起こるんですが、line-heightを指定しているのに縦ラインがMacとWinでずれることがあります
CSSで解決することはできますか? 縦ライン?
とりあえずサンプルでいいからスクショ貼って 原因なんだろうね
line-heightをpxで指定しているのか、
それともemで指定しているのか、
それとも…とか
リセットCSSはheadタグで読み込んでいるのか、
それとも読み込んでいないのか、とか
検証したブラウザはなんなのか、とか
気になる要素がそこそこある気がします
ソース等貼れば何かわかるかも?? ttps://tukumemo.com/font-vertical-metrics/
おそらくこれと同じ症状のようです。
使ったフォントはBarlowという英字フォントで、Googleフォントだと問題なし、font-faceで読み込むと発生するようでした。
諸事情によりGoogleフォントが使えないので、UA判定して個別に対応するしかなさそうです。
IEの游ゴ以外にもずれが起こるとは… 模写コーディングって、どうやってこれは何pxだなとか測ればいいんでしょうか? >>499
自分はCSSViewer使ってた
(letter-spacing等も同時に確認できる為)
少し手間ではあるものの、
デベロッパツールで確認するのもまぁOK
いろいろ試して効率化目指しましょう >>500
cssviewerちょー便利ですね!?
良いもの教えてもらいました、ありがとうございます! text-align: centerを継承したpタグにwidth:100%をするとセンター寄せになるのですが、
これが無いと左寄せになってしまいます。
pタグにwidthという考え方がわからないのですが、どう理解すれば良いでしょうか。 たしかに練習サイトでリセットcssがあり、pタグが0になっていました。
もともとは100%なのですね、勉強になりました。
そのcodepenのjsは今回は関係の無い内容でしょうか?
jsの経験は無く、1つ目のh1のフォントサイズを80pxにするという意味だと思いますが、
cssではなくjsに記述する時ってどういう時でしょうか? >>506
ごめん、jsはサンプルが入っていた物をそのままにしていただけで、
今回の内容には全く関係がない
このjsはあくまでわかりやすい書き方をしているだけなので、
「1つ目のh1のフォントサイズを変える」というjsはまず書かないよ、そこは気にしなくて良い cssセレクタで、n番目からm番目の子要素を指定するとかってできますか? aからb番目
:nth-child(n+a):nth-child(-n+b) >>509
ありがとう
間違った、子要素じゃなくて
クラスで指定した中でa番からb番目ってできますか .class:nth-child(n+a):nth-child(-n+b) >>512
横からだけどそれだと
<div class="some-class-name"></div>
<div></div>
<div class="some-class-name"></div>
<div></div>
<div class="some-class-name"></div>
みたいなときにズレちゃうんじゃない? だったらdivの方を数えて「a番目からb番目のdivのうち.some-class-nameのみ」とか?
div:nth-of-type(n+a):nth-of-type(-n+b).some-class-name HTMLやCSSで数値を指定したら特定の文字数を増やす方法ってないですか?
4を指定したら
■■■■
5を指定したら
■■■■■■
みたいな感じで…Javascriptとかブラウザのセキュリティ警告みたいなのが出ない方法で良い方法ありませんか? 画像が表示されなくて困ってます
画像urlをアドレスバーで開き、キャッシュされたらサイト上でも表示されます
urlやタグは合ってるように思いますが、キャッシュを消したらまた表示されなくなります
考えられる原因は何でしょうか? おそらくしょうもない質問ですいませんがよろしくお願いします ブラウザにアドブロック入れてる?
他のブラウザや他のパソコン、スマホで試しても同じ? >>518
文字数を増やすってどゆこと?
適当に何かの文字を書き足せばいいの? Webページにボタンを押すとそれに関連された音声ファイルを再生したいです
例えば、以下のようなボタンを作ってい
[Q][W][E][R]…
[A][S][D][F]…
それぞれのボタンを押すと
Q.WAVとかW.WAVとかの音声ファイルを再生したいのです
これはどうすれば実現できますか? 「html 音楽再生 ボタン」で検索!
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法
https://allabout.co.jp/gm/gc/385187/ 下の記述だとiframeで縦スクロールがでちゃうんですがスクロールさせない方法ないでしょうか。
<div style="width:100%; !important; overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
<iframe width="100%" height="1400" frameborder="0" style="margin-top:-390px; overflow:hidden;" src="URL"></iframe>
</div> 上でoverflowというのを初めて見たのでやってみたのですが、
<div class="a">
<p>これはテストです。これはテストです。これはテストです。これはテストです。</p>
</div>
div.a {width: 200px; height: 50px; background-color: #ddd;}
p {overflow: hidden;}
これをしても、3つ目の「これはテスト」が隠れるかなと思ったのですが、はみ出て表示されてしまうのですが、
隠すことはできるのでしょうか? overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか
white-space を nowrap に設定することが必要です。
<div>
<p>これはテストです。これはテストです。これはテストです。これはテストです。</p>
</div>
p {width: 200px; height: 50px; background-color: #ddd; overflow: hidden;} >>524
親要素のoverflow: autoに!importantつけてるから子要素のoverflow: hidden;効いてないんじゃね >>526
ありがとうございます。
入れ物に設定するのではなく、overflowさせたいブロック的なものに指定するのですね。 技術的に問題はないかもしれんが
このHTMLだったらdivの方だろう、overflowにすんの
pの方にしちゃったら
もうインラインの物しか置けないじゃん… だったら最初からそう言えばいいのに。
それじゃこれでいい?
https://jsfiddle.net/mk50yu4d/ こっちの方がいいんじゃね?的な書き方すりゃいいのに
回りくどい上に性格悪いな 煽ってる人も煽り耐性の無い人も
もう一度>>1を読みましょう >>534
いや、私じゃないですよw
>>532
divにoveflowつけるだけで良かったのですね。
てっきりoverflow:hiddenさせたいものと思い込んでpにつけるものと思ってました >>537
というかdivもpもブロックレベル要素だから、基本的にはどっちでもいいんだけど
>>526に書いてある通り、overflow設定するだけじゃ足りないよって話 ほぼ素人なのですが、教えて下さい。
ファイル一覧をAndroidでいうリストビューみたいな形で縦方向に表示したいのですが、どうすればいいでしょうか?
リストは十字キーとかでフォーカスが移動できて、選択しているものは色を変えたいです。
どこかにサンプルがあれば教えて頂きたく。 >>539
とりあえずこういうの?
ttps://haniwaman.com/parts/parts-3808/
あとフォーカス移動はtabキーで、これ↓をCSSに追加
.my-parts ul li a:focus {
background: #ff0000;
} ありがとう!
そんな感じです。あとは、メニューの左側にサムネイル画像を入れたいのと、右側にはスクロールバーをつけたいです。
この辺もやり方を教えてもらえると助かります。 >>541
そういうのは先に言ってよ
そもそもリストをどこにどう設置しようとしてんのよ?
Androidがどうとか書いてるけど、スマホ専用サイトでも作りたいの? 用途もスキルも分からんから活用できるか分からんが
>>540を踏まえて、要求通りには出来た
https://jsfiddle.net/4y0mn32e/ hoverとfocusの違いがわからない。
focusはスマホ特有の要素?どんな時に使えるのかしら みなさん、ありがとうございました。
作っていただいたサンプルをとっかかりに勉強していきます。
本当にありがとうございました >>545
inputboxを選択してるような状態
hoverはもういらんね すみません、詰んでます…
このボタンが途中で消えている現象の原因と解決法わかる方いらっしゃいませんか…
https://i.imgur.com/eNajS2e.jpg これボタンとフォントの大きさ固定にしてる?色はみ出してる 最近この手の諸外国で合宿方式のプログラマ育成講座増えたけど
何が原因でこんな増えてるんだ? >>553
正解の方のソースかぁ
これ見て複製するっていう課題とかなのかな? >>555
ソース見てみ、思い通りに出来ないから隠してる。
wordpressは触れてもcssは触れない。
昔のホームページビルダーで作ってもソースは分からないのと同じレベル >>556
いや、普通に問題無くボタン類は表示されてるよ
途中で切れてもいないし
Adblockとか効いてるんじゃない? >>554
日本のクラウド仕事案件を総元締めが受けて、物価が安い海外の日本人に仕事をさせるビジネスモデル
元締めは総元締めに人員を提供し、報酬を得る。
日本の労働基準法、最低賃金が適用されない
12ヶ月の就学ビザを取らせればその期間は不法滞在とならない。
海外の家屋も日本人が借り上げて、シェアハウスとして又貸しする。
それらのコストを支払わせながら、働いても働いても滞在コストと低報酬で目標額が貯まらずビザが切れる直前まで脱出できない。
会社員ではなく、夢見るニート・フリーターが対象なので居なくなっても親族以外心配しないため、海外で仕事を頑張っていると思われる。
その低報酬の裏では、元締めが国内の案件をさばいて利益を出す。
逃げたり脅してくるようなら現地人によって始末、親族関係者には行方不明と報告すれば責任は逃れられる
と誰かが言ってた。 低コストで運用して、
莫大な金を得るオレオレ詐欺の「かけ子」と同じだな。
あいつらは生きている間は警察に発見されない限り
フィリピンやタイから出れないけど、
ニュースなどで捕まった奴は日本に帰れる幸運な奴らなんだろう。 >>554
そっちの方で、需要が増えてるんだよ
日本人ならきっちりやるってのもあるし、現地採用なら安くて住むし overflow:hiddenで枠外非表示になっていないか? >>548
マジでありがとうございます。本当に助かります。これベースにカスタマイズさせて貰います。 >>558
夢見るニート、フリーターがプログラミングの仕事できるか? >>549の書いたソースとどうしたいかがほしいな
>>553をそのままコピペすれば問題ないのに >>564
いや、そのサイト担当がやり方わからず、
もうすでに修正済みなだけなんじゃないの?
サイト特定されてびっくりしているとは思うけど。 IE11のデフォルトスタイルシートの一覧ってどこ見れば分かる? >>565
その割にはline-heightとか全然違ってそうだけどな
テキストはコピペしたのか知らんが、全く同じだけど
いずれにしろ晒すってのは良くない >>549です
遅くなって申し訳ないです。
これはただのコーディングの練習で、イサラのサイトを正解みずに同じサイトの見栄えになるように練習しているだけです;
そこだけの写真なのは問題箇所を伝えるのに余計な情報を省いただけですね…
ボタンが途切れるのがなぜか調べてもわからなくて聞きました;
こういう場合の聞き方とかがあるのであれば、html初心者として今後の役に立てたいので教えて戴けると嬉しいです。 >>568
写真に写ってるとこのHTMLとCSSを、>>544みたいに部分的にでもいいので
https://jsfiddle.net に貼ってみると話が早いかも。
そこにソース貼り付けたら「Save」→「Save fiddle」ボタンを押して
アドレスバーに生成されたURLをコピーして、ここに貼ってくれると
みんな見られるようになるから。 >>569
ありがとうございます。
利用させてもらいます。 しかしど素人集めるだけでそれなりに金にできてるのは凄いな これ、もしかしてイサラで勉強している人が、イサラのサイトをマネしてコーディングしましょう、ということなのでは?
お世辞にも参考サイトとしては、wordpress使ったサイトでお世辞にも綺麗なhtmlやcssでも無いし。 >>549です。
一応自力で解決しました。
iframeってのにwidthが設定されていて、
widthの幅がボタンの幅を下回っていたみたいです。 >>576
いえ、全くの無関係ですしネットで模写コーディングについて調べていたらそれをしている人がいたので真似しました。初心者ですから有料サイトで練習した知識でどこまでやれるか、とりあえず模写コーディングがしたかったんです。
綺麗なコードとかそういうのも何もわからない初心者ですし、真似した人物がこのサイトの関係者かどうかはどうでもいい事でした。 模写元との違いからして、そんなことだろうと思ってたわ
まぁ勉強だし、ほぼ見た目が一致すればいいんだろうけど、答え合わせするには
WordPressだとちょっと面倒だよな とりあえずネタ切れで悩んでいた週刊誌の編集者に
潜入調査取材の依頼かけておいたわ。
実態がどんなものかいずれ分かるかもね。 favicon (ショートカットアイコン) を指定する方法はググったらすぐに見つかったのですが、
favicon が無いことを指定する方法ってありますか?
指定しなかったらブラウザがデフォルトの場所に勝手にアクセスするようで、
これを抑止したいです。 あるかどうかは知らんけども、目的は何?
もしサイトを高速化させたいんだったら、むしろfavicon設置してブラウザにキャッシュさせた方が
高速化に繋がるんじゃね? >>583
無いから無いと伝えたいというだけです。 >>582
headの開きタグ(<head>)の直後にこれを貼れ。
<script>var l=document.createElement('link');l.type='image/x-icon';l.rel='icon';l.href='data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7';document.head.append(l)<∕script>
全角の<∕>は半角に戻してくれ。書き込めなかったので変えた。 よく考えたらscriptにする意味皆無だな。
普通に
<link type="image/x-icon" rel="icon" href="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7">
貼ればいいだけだった。 無いことを指定する方法はない
アイコン指定されてて正常に読み込んだ場合でもルートやカレントに既定のアイコン読みに行くブラウザもあるし
気にするだけ無駄よ
>>587
type="image/gif"じゃね? 22列あるテーブルをこれで改行しないようにしています。
th,td {white-space: nowrap;}
しかし最後の列だけ文字数が多くなるため改行したいのですが一つの列だけ改行するという記述はできるでしょうか? >>589
最初だけなら
table tr:first-child th {
}
最後だけなら
table tr:last-child th {
} >>584
「ないです」と言う応答メッセージが
404 Not Foundなんだが… ない
すで
って書いたfavicon置きゃいんじゃね 何をそこまで神経質になる必要があるのかよくわからなんが 一体何がしたいんだ???
ファビコンなんて何も指定しなけりゃ出ないし コンソールに赤いエラーメッセージ出るのが精神衛生上悪い >>580
奴隷市場で安い仕事くらい受けれるようになれる勉強法が知りたいです…;
模写コーディング意味あるのかわかりません; >>601
そんな糞しょーもない煽り入れて人生を無駄にしてる暇があったら
模写コーディング以外のオススメ勉強方法があったら教えて下さい >>601-602
ん?同じ人だと思うけど、レス番を間違えてるのかよくわからんな >>603
601は自分じゃないですよ
ステマだの何だのちょこちょこ煽ってた人が久々に来て
終わった話題に今更煽りを入れてみたって感じかと こんなネットの場末で煽り入れて楽しいのかな?
さすがに世の中にはもう少し楽しい娯楽あるだろ cssでスマホで表示させて、PCで非表示にしたいんですがどうすればいいでしょうか? >>606
例えばこういうの読んでみるといい
PC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法
ttps://rmtmhome.com/responsive-css-3023
その上で「CSS メディアクエリ」で検索してみると色々出てくるから ごめんなさい。もう、2度とここには来ます。
失礼しました(怒) >>604は>>602の人?
>>601だけど、煽りでもなんでもない本人のレスを読んでどう解釈したら煽りに聞こえたんか真面目に聞きたいわ。
模写コーディングがベストなんだったらそう言ってくれればいいやんけ!
そしたら普通にお礼言ったのに。
模写コーディングがベストなんだな?
わかった、ありがとう。 模写はいいんだけどある程度レベルや方向性が合っていないとあまり勉強にならない
昔ヤフーのソースを模写しようとしたら全部の変数が1文字でひっくり返ったわ >>615
もちろんそう、今となっては当たり前なんだけどね
当時は達人は変数なんて一文字で済ませるんだなと戦慄してたわ どこかで見たことあると思ったら、つべでコーディング検索すると
イサラを例に模写を勧めてるとことかあるな まぁ、サイト開けていても客は来ることないから
動画サイトから誘導して、やる気ある奴に興味を持たせて海外飛ばすのか。 position:fixedをposition:relativeのtop:0;left:0の基準に合わせたいのですがどうすればできますか? スマホサイトのグロナビ(モーダルのように全画面で表示し、スクロールを出さない)を作っているのですがiPhoneのアドレスバーの高さがあると表示が詰まってしまいます。
バーの高さがあるときとないときとでスタイルを書き分ける、もしくはうまく可変させられる方法があれば教えていただきたいです。 >>618
いや、むしろそこはプロゲート推しな感じでイサラ以外にも例を出してたし
そういうチャンネルじゃない
何でもかんでもステマ認定ウザいよ >>619
position:fixedで固定する位置を親要素基準にする方法
ttps://techmemo.biz/css/position-fixed-basis-parent/ >>620
こういうのでイケる?
[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ttps://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html >>623
やっぱJS使わないと無理っぽいですね
アドレスバーの変動でリサイズイベントが取れたはずなので、逐一style当て直すようにしようと思います。
CSSの変数ってJSで操作できるんですね、使ったことなかったので初めて知りました コリスってまだ現役サイトなんだな
おまえらCSSとかHTML関係で見てるサイトってある? MediumとJavaScript WeeklyとReact StatusとNode Weekly
日本のならjser.infoとPublickey >>630
<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure 前から思っていたけど、html5ってそんなに厳密に新しいタグって使わないとダメなのかな?
googleが喜ぶだけのような感じだけど。 >>633
全然必要ない
html5が出た当時は「検索エンジンが理解しやすいように、にわかりやすく記述しよう!」という風潮があったんだけど、
検索エンジンが恐ろしく進化してぶっちゃけそういうのが必要無くなった
ただ、複数人で開発する場合はある程度タグを適切に使うとコーディングがお互いやりやすくなる そうだわな、divだけで表現するのはあれだけど、
複雑で盛りまくったhtml5にちょっと苦手意識あったわ。
asideって使うべき?それほど重要じゃない?
もう辞めたけどアスペの社員がhtml5のタグをすべて使い尽くして表現するべきとか強要してくるし
大変だったわ。アスペはこだわりが強すぎて、言うこと聞かないし、
少しの仕様変更でパニックになるとかほんと厄介だった。 個人的には aside とかは使ってくれた方がありがたいわ。
クソみたいに無用のサイドバーがメガ盛りのページだといらん要素をブロック系アドオンのリストに入れたりするから、
きちんと使い分けてくれた方が切り分けしやすい。 >>633
ガイジンもsectionとarticleの使い分けで大混乱してたぜザマアwww articleとasideの説明なんども読んでもふわっとしかわからんわ
別に広告入れるわけでも無いから結局使わないまま >>639,641
それそれ、アスペも策定時期なのにaside, article, sectionの俺様ルールを強要して現場大混乱。
辞めさせるのもできないし、周りが俺から孤立していくと、勝手につぶれて出社拒否して助かったけど、
今考えたら「アイゴー、世界が孤立していってる」と、どこぞの国みたいな事になってるな。 figureで多大な混乱招いてんのは"図表"と翻訳してんのが原因なんじゃねーの? >>639
2000年代前半のstrict教全盛の時に
ブログのテンプレ開発してたおっさんじゃないと
やっぱしっくりこないわな>articleとaside よく分かんなくて悩んでます…!
ウィンドウ幅を取得してその80%の幅にwidth100px,height100pxのボタンを横幅の長さに合わせた数出力したいんだけどこれってcssで実現できますか…!?
jsで実装すべきでしょうか…!? 横レスですが、
hoverでは無いのに光ってる・・・
activeでは無いのに押した感じになってる・・・
これはbuttonタグだから? >>648
そんな…そんな簡単にできるの…………
うぅ…有難うございます…! >>649
どう見えてるのかよく分からないけど、多分buttonのデフォルトcss
aタグのリンクが青文字になるようなもん wordpressで編集画面のブロック追加にボタンってあると思うのですが横並びにするにはどうすればいいですが? buttonタグをaタグで囲ったらダメなのか、
使い方難しいな・・・
POSTとかなら、inputタグのほうが良いのかな クリックするものの中に別のクリックするものがあるっておかしいやろ?
脱出ゲーム作ってるんじゃないんだからさ もう何も考えずに全タグ一つ一つをdivで囲ってしまえばええんちゃうか? ルビのrpタグって必要なん?
ruby未対応ブラウザなんて今の時代にあんの? >>654
inputは古い。buttonに変わった。
ただできる事が増えただけで、POSTしかしないならinputで良い
>>656
googleが以前そうだったな
開発グループが全員同意していればそれでもいい
ちなみに自分ひとりで開発する場合、そんな組み方をすると後で絶対に後悔する すみませんHTML初心者向けのまとめブログとかあります?
こういう系未経験で右も左も分からない状態です >>658
> inputは古い。buttonに変わった。
別に変わってない。使い方が違うだけ >>657
不要なら書かなくていいよ
ちょうど最近猛烈にrubyダグ書きまくったところだ
過去20年で書いたrubyダグの99.99%は今月書いたと思う メニューバーじゃなくて記事内に内部リンクつくりたいのですが良いデザインでレスポンシブなやり方ありますか? >>659
初心者向けサイトは「HTML 入門」とかでググってみよう
上位に出てくるとこなら大差ないし、自分で探した方が早いと思うけど
それよりも先ずは初心者向けの簡単な本を買って読んだ方がいいかも >>663
どういうものが欲しいのか、もうちょっと詳しく
メニューバー以外って範囲広すぎ >>665
最初は1ページに野球チーム12球団の情報を全て書いていたけど重くなってしまったので
1ページ1球団にしました。よくある上部にあるメニューバーにリンクは作っているのですが記事内にリンクがあれば親切かとおもいまして。 >>666
だったら、こういうこと?
ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
ttp://photoshopvip.net/97481 >>671
<portal>ってダグ
超進化したiframeのようなもの portalタグいいよね
webの画面遷移はずっと味気ないと思っていた ああそういえばiframeってどうなったんだ
まだ使ってるところチラホラみるけど iframeはまだまだ使えるけどセキュリティ周りが厳しいね
気づけば出来ない事が増えているから安易に使うのは怖い
動画埋め込みぐらいならどうでもいいけど リンクをクリックした時、奥へ進むような、扉を開くような、そういうワクワク感が欲しかった
それがやっとこさ実装されたと思う portalおもしろそうだなー
解説サイトないかなー img decoding="async"で非同期になって早くなる!
なんて記事を見かけるけど、画像って元々非同期読み込みではないんですかい? レイジーロードの記事は見たことあるけどそんなアトリビュート知らない。
見かけたという記事貼って >>681
loading="lazy"でいけるが htmlファイルをロリポップなどのWEBサーバーに直置きしてWEBサイトを作ると、URLの末尾に.htmlと表示されてしまってダサいのですが、PHP等の言語を使わずにこの末尾の.htmlを出さなくする方法はありませんか? >>689
htaccessで書き換えりゃいいじゃん videoタグのposter属性の説明がバラバラなんですが、どれが正しいですか?
1.表示可能な形式のビデオが無い場合に表示する画像
2.動画ファイルの代わりに表示する画像
3.映像のダウンロード中に表示される画像
4.再生可能になるまでの間に表示する画像
5.再生を開始するまで表示する画像 表示可能な形式のビデオが無い場合、あるいは映像がダウンロードされ再生可能になりかつ再生を開始するまで、動画ファイルの代わりに表示する画像 文字列の、指定した箇所に文字を挿入するにはどうすればよいでしょうか。
例えば、6番目に文字を挿入する場合、こんな感じにしたいです。
あいう ★
かき ★
さしすせそ★ jsならとても簡単だけどhtml/cssだとどうやってやるんだろね
俺も気になるから素晴らしい回答お待ちしております! p::nth-letter(5)::after {
content: "★";
}
…って書けたらいいねw
nth-letter疑似要素については古くは2003年頃から定期的に要望が出てる リストulで
・あいうえお
かきくけこ
さしすせそ
を
・あいうえお
かきくけこ
さしすせそ
みたいに二行目以降をインデントさせない方法ありますか? ulのmarginとpaddingを0にして
text-indent 1emみたいにかけるってことですか? こうか?こうか?ってお前ら名古屋人かよwww
がっくだろうがwwww https://jsfiddle.net/kzlmorq/2kwy8srx/2/
トップの[概要]をクリックすると、詳細が表示されるようにしているのですが、
1台目と2台目が横並びで表示されてしまいます。
縦にする方法を教えて下さい。 >>709
input[type=checkbox]:checked + ulに
flex-direction: column; 設定しているクリックイベントはちゃんと設定するのにiPhoneで見ると透明になってしまう要素があります。
opacity、visibilityの設定はしていないのですが他に考えられる原因ってありますかね。
fixed配置しているbutton要素で、触れるってことはz-indexではないと思うんですけど。 検証してるiPhoneのコンテンツブロッカーがONになってるとか? output要素を使う必要性が分からんのだけど
計算結果が出力できるから便利!みたいな説明ばかり見かけるけど
別に結果表示するだけならpでもdivでもいいっすよね >>714
基本的にフォームの部品だからそのままsubmitで投げられる
divとかpだと表示するっていう機能は果たせるけど
投げたかったら別途input type=hiddenを用意したりせにゃならん >>711
これ自己解決しました
fixedの要素にfixedを置くと挙動がおかしくなることがあるんですね しょうがないのでbuttonだけ外に出したら無事表示されました >>716
うちの姉ちゃんが昔体操選手目指してて
たまにこういうクネクネした動きで
実家の猫を威嚇している 特定の子要素がないときだけ何かをするということはできますか?
p要素がないときだけ色を変えるといった感じです document.querySelector('p:has(> :not(a)), p:empty')って書けねーかな…Selectors Level 4だっけ use-credentialsがさっぱり分からん
何処見ても認証情報が〜というふわふわした説明しか無いんだが、
具体的に誰が何の情報を送るの? サイトの作成してるんですが動画を長押しするとgifのような形で動画の内容を確認できる機能を実装したいんですが
サーバーに動画を設置せずに外部リンクから引っ張ってきて実装する事はできますか? エロ動画サイトでそういうgifっぽいのあるよな、gifじゃないけど。 >>726
俗に言うxvideosですよね
自分のサイトに動画を置くと定着してくれる人は増えますが
アンテナサイト経由して画像で読んだ方が回転早いかと思ってまして
様々な言語に対応させて かつアンテナサイトも海外の方と提携できれば幅が広がるのではないかと考えてます そういえばあれどうやってんだろうね
gifにして秒数指定で動くようにしてるの? jpgとgifをfloatでもabsoluteでもいいので重ねる
jpgをhoverで透明にする
ぱっと思いつくのはこんな感じ
js使えばgifの再生など出来るのかもしれないけどめんどくさそう たぶん、jQuery のmousemove, mouseout で、10秒ぐらい画像のURL を差し替えるのだろう
>>725
画像のURL を指定するだけだから、サーバー内部・外部のどちらでも出来る フロント部分はソース見ればすぐわかるし、>>729みたいに想像もできるけど
その動画自体をどう生成するかの方がわりと気になってくる >>731
検索したら一瞬で出てくるけど
「php 動画 サムネイル」
ffmpegとか使うらしいけどこれ勉強して得られるものは少なそうだ Xvideoくらいの規模なら自社エンジニアになんか作らせてそうだけど target=_blankにnoopenerを付けるのは分かるが、noreferrerもペアで付けるのはなぜに? >>721-723
jQuery のfilter を使った。
div-2 は、子にはp がないが、子孫にはある
<div id="div-1" class="div"><p>1</p></div>
<div id="div-2" class="div"><div><p>2</p></div></div>
<div id="div-3" class="div">3</div>
jqObj = $( 'div.div' )
console.log( jqObj.length ) // 3個
jqObj_2 = jqObj.children( 'p' ) // 子に、p がある
console.log( jqObj_2.length, jqObj_2.text( ) ) // 1個 1
jqObj_3 = jqObj.filter( function ( ) { // 子に、p がない
return $( this ).children( 'p' ).length == 0 ? true : false;
} )
console.log( jqObj_3.length, jqObj_3.text( ) ) // 2個 23 xvideosの動くサムネはmouseover時にvideo要素を重ねて小さい動画流してるだけだね >>737
なるほど参考になりました
ありがとうございます crossorigin属性をいちいち付けなきゃならん理由が分からんのだが。
同一オリジンとかOriginヘッダとかそういう仕様の話ではなくて、
例えばlink要素でwebフォントを読みに行く場合、typeとドメイン見てブラウザが勝手にcrossorigin付けてくれればいいのでは? gif アニメに差し替えたらよい
ユーザーは動画と、それをまとめたgifアニメを、サーバーにアップロードすればよい
サーバーで自動的に、動画から、gifアニメを作ることも出来るが、
そのやり方では、意味のない冒頭部分ばかりがまとめられたりして、
良いものが出来ないので、ユーザーが好みの部分をつなげて作った方がよい >>740
CORS(cross origin)は、クライアント側のブラウザから、アクセスする場合だろう。
サーバー側では、cross origin でもアクセスできるから
ローカルPC に、Ruby のSinatra などのサーバーを立てないで、
ブラウザだけで、cross origin にアクセスできないから CSS フレームワークを使わないなら、BEM が良いけど、
もし、Bootstrap を使うなら、それに従った記法になる >>742
ちょっと日本語が不思議過ぎて何言ってるか分からん
話も噛み合って無いように見える BEMは一過性で終わると思ってる
XHTMLが終わるのも予見した俺だから間違いない 記法の話は荒れるから止めとけって
OOCSSなんてゴミが蔓延するレベルなんだからよ tableの、最後のtdの幅だけ自動的に限界まで広げるにはどうすればいいでしょうか?
<tr><td>項目1(幅はコンテンツ次第)</td><td>項目2(幅はコンテンツ次第)</td><td>項目3(幅は(100% - (項目1の幅 + 項目2の幅))</td></tr> アンダーバー二個続けるとか宗教的に無理なので使わない >>749
1%、1%、98%でどうにかなるじゃろ >>753
いわゆるブラウザープラグインが否定されている現代では
ないな PCサイトなんですが コンテンツをボックス型にしてその上からはてなマークを被せたいと思ってます マウスを乗せるとはてなが消えて内容が見えるようにしたいです マリオのハテナボックス(マウスを乗せると透ける)のような感じが理想です 何か方法はありますでしょうか? >>756
Javaは必要ないでしょうか?すいません… >>757
JavaとJavaScriptはメロンとメロンパンくらい違うものだ
二度と間違えるな >>757
>>755で書かれていることだけをするならいらん
続きは病院の予約がとれてからだ >>749
tableだけwidth指定
td:nth-of-type(1),td:nth-of-type(2)は指定しないかmin-widthやmax-widthなどでゆるく指定 昔はテーブルタグでレイアウトしていて、divとかカラムとかfloatとか聞くと蕁麻疹出てた化石だけど、
今のテーブルタグは表だけに使えば良いの? メロンよりメロンパン、メロンパンよりメロンパンナちゃんが好きです。ペロペロしたい Tableタグでエクセル方眼紙をそのまま再現するんだ! >>763
はい
むしろ表すらtable要素を使わない文化もありますん ウグイスとウグイス嬢、マスクとマスクメロンはどうだろう? >>766
え?表なのにtable使わないのはなぜ?
dd, dtとか? >>768
レスポンシブが当たり前になって
PCでは表組み、SPでは縦積み
みたいなことがあるからだと思う
俺はあんまり好きじゃないけど
tableじゃない要素でも表組みにするmixinの用意はしている まさかの子セレクタでハマったw
ul
li
ul
li
とulの中にliと入れ子のulを並べてからul>ulとしても効かない
さて何故でしょう? 入れ子のulが、liの入れ子なのか、ulの入れ子なのか
前者なら>>771、後者なら https://jsfiddle.net/j4rfs68q/ お前らやるじゃん
771、liの閉じタグ書いてないからliの子になってたというオチ
安易に閉じタグ省略しちゃいかんね すいませんランダムボタンを設置したいのですが可能でしょうか?
電話番号配列のボタンを設置してその中にワードをかいてグループにしようと思うのですが
携帯のダイヤル位置にランダムボタンを配置したいと思いました
気分が乗らない時などに出来るだけボタンを活用してもらうようにしたくて
検索してみたところjavaを自作しないと難しいようですが
どのように作れば良いか分かりません…
アドバイスお願いします >>774
1. HTMLで必要な数の<button>要素を用意して中身を書く
2. 携帯のダイヤル位置、形になるスタイルを、ボタンの数ぶんCSSで作る
3. JSで1の<button>要素にアクセスして、randam()を使って、ランダムにclass名をつけて、2のCSSを適用する
こんなかんじで
あと>>758 >>775
http://fuwafuwapukapuka.hatena BUROGU.com/entry/2014/03/04/221925
このサイトを参考にしました
int n = r.nextInt(10); この部分をkey wordなどに変えて キーワード先のリンクをランダムに取り付けることは可能でしょうか? public class MainActivity extends Activity implements OnClickListener{
TextView tv1;
Button button1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv1 = (TextView)findViewById(R.id.text1);
button1 = (Button)findViewById(R.id.button1);
button1.setOnClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onClick(View v) {
if (v == button1) {
Random r = new Random();
int n = r.nextInt(10);
@SuppressWarnings("unused")
String string = String.valueOf(n);
tv1.setText(String.valueOf(n));
これでランダムで数字を取得できるようです >>776
え、なに、本当にJavaでやりたいの?
であれば
1. Javaで、ランダムな必要な数の<button>中身</button>のHTMLを吐くプログラム書く
2. サーバでCGIの設定をする
3. CSSで、<button>を電話番号型に並ぶスタイルを書いておく
とするとか
Java自体の質問は、プログラム板のJavaスレで聞いたほうがいいと思うよ >>779
はい 携帯の電話番号列(中にURL配置)にしたいです 一番下の発信ボタンをランダムボタンにしようと考えてます ランダムボタンを押すとURLのリンクにランダムで飛ぶような細工を実装したいです >>780
はいじゃないが
なんでJavaでやりたいの?
ごはん食べるのに箸ではなく物干し竿使うくらい不自然だよ? >>781
javaを使わないとCSSとHTMLだけではランダム機能が使えないからですかね?
検索してみたのですがCSSのみでは無理なようです サイトを収益化しないのであれば確かにCSSとHTMLのみで可能ですが
作り込むためにはjavaを使わないと無理じゃないですか? >>782
なんだよ
最初の回答よく読めよ
>>758だ >>784
そんでやり方は>>775に書いてあるから
1番目から順番にやって
わからないところを1つずつまた聞いてくれ
今は何がわからないのかがわからない状態だろうから このスレじゃなかったらめちゃくちゃ罵倒されて終わりだったな >>782
あなたが参考にしたサイトはandroidアプリ開発のですよ
ブラウザ上で動くものではないのです >>788
実はスマホとPC別で分けようと思ってまして… 今の子のアプリとウェブの区別ってのは
団塊老人並みなのだろうか…
別にそれが悪いとは言わんが webが廃れ、アプリが基本になる・・・と見せかけてwebも結構頑張ってるからな
なんか変な状態だとは思う >>791
若い子ってかパソコンを知らない人がその罠に陥る
30代40代のババアとかジジイでもブラウザで表示されるサイトと
専用アプリは別々と思ってるからな
だからiPhone使いはKindleアプリで本が買えないとガチギレしてクレームかけてくるから 30代40代でジジイババアだと世の中若い子とジジババしかいないのでは🤔 Java と、JavaScript は、全く別の言語です!
JavaScriptの事は、この板のJavaScriptのスレで聞いてください!
一方、Javaの事は、プログラム板のJavaのスレで聞いてください!
一般的には素人には、Javaの使い道はありません!
Javaは、Android 用のアプリが作れるだけですので
一方、HTML, CSS で、web サイトのwebページを作りたいのなら、JavaScriptを使います javaで作りたいなんて言ってない
javaを作りたいと言っている つーか
どーでもいい公開サイト作って(○○ちゃんのほめぱげレベルの)
実機で表示してみればわかることなのに
それすらやらんのかと でも相当な人が買ってるよ。
そんで評価にも悪いこと書かれてない。 >>799
絶対にヤバイ
・古い評価
フルーツ画像1円落札が大量にある。
評価稼ぎ
・この商品
全て一週間以内の落札
自演で売りまくったように見せかけて何かあったら逃げる気マンマンだね
評価の数でしか評価できないアホを釣るための手口だわ >>793
Kindleアプリで買えないのは
AmazonがAppleにテラ銭とられるのを嫌ってるからであって あからさまに違法な海賊版おすすめしてる奴とかいるよな そんな突然使えなくなるかも分からん海賊版買うくらいなら
GIMPとかInkscape使った方が遥かにマシ こういうの昔っからあるよな。
専門学校時代から話題には出たが、誰も手を出さんかったw フォトショプ7とかはネット切ってシリアル入れるだけで使えるガバガバ仕様だったな officeのそれで痛い目にあったからもう海賊版は買わない >>805
chromeのおすすめコンテンツに
こーゆーのが表示されるときがあるよ
google真面目に仕事しろと ソフト時代はアキバの裏の方にいくと
あやしげな店でいろんなソフトの入った白ROMが売ってたりしたなぁ >>809
偽物を通報して台湾に送ったら正規版のprofessionalもらったわ。 すいません急上昇画像というものを設置したいのですが
あれは1日ごとのクリック数って事でいいでしょうか?
GitHubを参考に見たのですが… PHPはデザインを確認できないのでしょうか? >>814
PHPはCSSやHTMLより簡単だと書かれていましたがデザイン確認できない時点で難しいですよね?
code penにはクリックカウントのサンプルがほぼ無いのにgit hubには沢山あるのは何故でしょうか? >>815
ちょっと基礎的な理解が足りてない気がします
箸の持ち方を知らないのに、いきなり豆の移動タイムアタックに挑むような状態です
PHPはサーバサイド、HTML/CSSはクライアントサイド
といった違いをもう少し理解してから
やりたいことに取り組んだほうが幸せになれるかも >>816
PHPはアクセスしてくれた人に負荷がかかり
CSSは置いているサーバーに負荷がかかると言う事ですよね?
PHPは情報の入力?などもあるので提示版などを作る時 使うと書いてありました その都度 動画画像などが切り替わるサイトを作る場合はPHPが最適だと言うのも見ました
サーバーのスペックが大きい場合はどちらでも良いようですが >>817
>PHPはアクセスしてくれた人に負荷がかかり
>動画画像などが切り替わるサイトを作る場合はPHPが最適だ
ちがうよー
前者はまず、何を持って「負荷」とするかを考えなきゃ
その言葉だけ読み書きしても意味がないよー
後者は、必ずしもサーバサイドでやる必要があることでもないよー >>817
なんか否定ばっかりしてキツい言い方になっちゃって
気に障ったらごめんよー
ググって出てきた説明が正しいとは限らないから
こういう所に書いたり聞いたりして、確認するやり方自体は
間違ってないと思うよー CSSのボックスモデルと視覚整形モデルについて
ボックスモデルはCSS2.2で定義されてCSS Box Model Module Level 3で上書きされてる感じだが、
視覚整形モデルの定義を上書きするようなCSS3モジュールってのはどれになるんだい?
もうねモジュール多杉 section要素内にはにはhx要素がなければダメとかimg要素は文脈によりpやfigureで囲うとかいったようなルール?マナーは他にどんなものがあるんでしょうか??
参考になるサイト等もあれば教えてください。 仕様書は確かに最強だが、著者向けと実装者向けの話が混在しててクソ読みづらいんだよな
最近HTMLの復習をした際に参考になったサイト
http://mtrootyy.web5.jp/htmllint/html5memo/0mokuji.html
てかググって最初の方に出てくるリファレンスが軒並みクソってのはどうなのWeb業界 >>829
結局、原典のうち
自分に必要なものは何で、不要なものは何かってのは読む側によって変わるから
原典を端折って解説するリファレンスも
読み手に寄ってクソなのか有用なのかは変わってしまう https://codepen.io/ahmad-y/pen/vXVXgd/
このページのhtmlにjsを直接配置しようとしたらなぜかボックスが左端によってしまいます
どこに配置すればよいでしょうか? codepenのhtml欄にスクリプト書いたらjQueryが読み込まれる前に実行されるから >>828-829
ありがとうございます
結構なボリュームですね〜
読み込んでみます! >>833
js欄を消してHTMLに直接配置する場合 左に寄ってしまうのですが…
どうすれば良いでしょうか? >>835
ただ縦横真ん中に寄せるだけならCSSだけで良いでしょう
flexで >>836
jsを設置するときは位置を完璧に見ないとダメですよね?jsが3つある場合それぞれHTMLの何処に対してのjsだからこの要素の後にScriptで囲って配置するといった感じで >>837
たぶん色々勘違いしている
HTMLの中のどこに書くかなんてのはどうでもいいことだよ
JSで要素にアクセスする時点で
DOMツリーにその要素がいるかどうか、の問題なので
何をしたいのかをはっきり書いたほうが良いよ
あるボックスの縦横中央に配置する程度のことなら、JSはいらん jQuery の読み込みは、body の終了タグの直前で、他のJS ファイルよりも先にすれば?
jQuery 読み込み
他のJS ファイル読み込み
</body>
ttp://jsfiddle.net/
を使えば? IEとEdgeで表示すると、半角英数文字が極太になってしまうんですが、
何か対応策はありますでしょうか?
サイトは、Movable typeのrainierをベースにしています。 HTMLの中にjsを配置する場合 bodyの中において設置できる
jsはコードを変える必要はほぼ無いのに対し
PHPはHTMLとCSSを大きく変える必要があるという認識でいいのでしょうか? PHPを使う場合CSSはほぼ実装しない前提でデザインを作り上げて足りない部分をCSSで補うという感じなんですか?
jsだと形として現れないのに対しPHPだと要らない要素まで別に作られてしまいます >PHPだと要らない要素まで別に作られてしまいます
どこに作られてしまうの? >>840
ウェブフォントで書体を統一してみるのも手 >>842
なにか勘違いしている
Php is Hypertext Processor って名前の通り
サーバでHTMLを生成するためのもの
一方JSやCSSは、クライアントで動くもの
なので並べて考える必要はまったくないよ
>jsだと形として現れないのに対しPHPだと要らない要素まで別に作られてしまいます
これは何かを失敗している cssでh1タグの色指定したのに反映しません
chromeのデベロッパーツールを見ると
color: -internal-root-color;
と出ます。
color: blue;
と入力してるのになぁ
エディタはVScodeです
原因や解決方法わかる方いたらお願いします。 >>846
CSSファイルが読み込まれていない、セレクタが間違っている
のどちらかだろう
前者は、その開発ツールのSourcesのタブを選択して
スタイルを書いたつもりのファイルが読み込まれているかどうか見て
読み込まれていたら、そのスタイルのセレクタをコピーして
開発ツールのElementsタブを選択して
WindowsならCtrl+F
macOSなら⌘+F
を押して検索窓を開き、コピったセレクタを貼ってみて
ヒットしなければセレクタが間違ってる >>845
つまりはHTMLで実装できなかったものを補うという事でしょうか? >>848
静的(変化が無い)内容のページの作成ならばHTMLのみで作成できるが、
リクエストに応じた内容でページを表示したい動的な場合はPHP等のサーバーサイドの言語が必要になる。
例えばGoogle等の検索エンジンで検索した時、
検索結果一覧の各リンクは検索キーワードによって内容が変わるでしょう。
この様な場合は変化しない枠組み等の構成だけがHTMLで作られていて、
枠の中に埋め込む具体的な検索結果の内容はサーバー側で生成してでレスポンスされてることが多い。 >>844
ありがとうございます。
そういうのがある、くらいでしか知らなかったんですが、
調べてやってみたら思いのほか簡単でした。
フォントが統一され、どのブラウザでも違和感が無くなりました。 >>849
ありがとうございます
サイトに検索欄を設けたいと思っているのですがgifサイトなのでワードを割り振る予定です…
jsとCSSとHTMLのみで作ることはできないのでしょうか?
PHPはコードを自分で作り上げないといけないですよね? >>851
やりようはあるだろうけど
思い上に面倒くさいだろうな>検索
ふつうにサーバ側でコード書くのが手っ取り早いと思う
書かなきゃならんのは、HTMLだろうとPHPだろうと変わらんし Ruby on Rails, Sinatra みたいに、サーバー側は、Rubyを使うのが多い。
テンプレートエンジンは、ERB(埋め込みRuby)を使う
index.html.erb をERBで変換すると、index.html ができる。
a.txt.erb をERBで変換すると、a.txt ができる。
このように、どのようなファイルにも、ERBを適用できる
例えば、index.html.erb が、以下なら、
<% 2.times do %>
<input type="range" value="50">
<% end %>
index.html は、
<input type="range" value="50">
<input type="range" value="50">
<% 〜 %> に、Rubyの文が書ける。
<%= 〜 %> には、Rubyの式が書けて、その値が埋め込まれる
テンプレートエンジンで、HTML を作るまでが、サーバー側の処理
一方、クライアント(ブラウザ)側では、
CSS, JavaScript, jQuery, Bootstrap を使って、見た目を整える。
または、非同期通信のAjax を使って、データを取得することもある 検索欄は、クライアント側からのAjax 通信を使うのかな?
自分のドメインに、データベース(DB)を置いておいて、
HTML から、AjaxでDBを検索して、データをもらって、
jQuery, Vue.js などで、ページの一部を変えて、
そのデータをはめ込んで表示するとか phpが圧倒的だね。
サーバーサイドクソ言語サバイバルで生き残ったのはphp。 ruby厨は他スレでNGテンプレ入りもしてるキチガイなので触らないように 大規模なゲームのスクリプト部分とかだね。
もとろんメインのエンジン部分はC++とかで書かれてるんだけど、イベントの記述とかまでC++などのコンパイル言語で書くと辛いからね。
プットプリントが小さく、システムにアドオンで組み込みやすい。 Lua, Squirrel などは、ゲームアプリ内だろ
スクリプト処理を、C++ でやるのは苦痛。
本当は、Ruby が望ましいけど、サイズが大きいから組み込めない Rubyとかもう誰も使ってないじゃん
完全に未来なくなった 秀丸エディタって変なバグみたいなの多いっすね
ググったら直し方書いてるけど面倒っすね
先輩らのおすすめのエディタってあるっすか?
VScodeでいいのかな?sublime textの方が良いのかな?
暇な人が居たら教えてクレメンス 幾つか触って自分が気に入ったのでいい
sublime textは印刷がダメなのが凄く残念。それ以外は軽くて良いんだけどなぁ https://codepen.io/arnel-cariaga-hiciano/pen/yLLEgGG
これと同じものを作りたかったのですが
右側のみ画像を暗くする事ができなかったので
メイン画像(一番下の画像)→加工して灰色と黒の画像を繋げたもの(URLは1か月使えるもの)の順でメイン画像を隠すように上から加工画像を重ねました
本当はメイン画像を暗くした後に加工画像を上から被せて(透明度をあげて更に画像右側を暗く)したかったのですが画像を暗くする段階で下のメイン画像が加工画像と分離してしまいます 何かいい方法はないでしょうか? 説明が分かりにくくてすいません
主となる画像を一段階暗くした後に(左側灰色右側黒)の自作レイアーを重ねて灰色の部分だけ透明度を使ってほぼ無色にして右側のみ画像を一段階暗くしたかったのですが…
主となる画像の方にも透明度を使っているためかレイアーとなる画像に透明度の要素を加えた際にダブってしまい画像が分離している事が原因だと思ってます… 対策としては主となる画像を一段階 暗くして保存すれば良いのですが…
とんでもない量になるので懸念してます…
何とか主となる画像を一段階暗くして(サイズはそのまま) 上からレイアーの自作画像を載せて主となる画像の右側だけ暗くできないでしょうか?
反転色になる要素は見つけたのですが画像を徐々に暗くするようなグラデーション技術はほぼ不可能だと見ました… すいませんhttps://saruwakakun.com/html-css/basic/linear-radial-gradient
のような形でグラデーションを加えれば可能なようです…
上記のcodepenのサイトにするためにはグラデーションのみで可能ですか? コードとしてすべて種明かしされてるのに、なぜ質問するのかな?
コード読めない子にコード書くのは無理だよ プログラミング楽しいなぁ
いつか伝説のプログラマーになるんで宜しくっす >>870
上のcodepenのようにする為には画像加工などの技術が必要みたいです…
ですが何とかCSSとjsでそれと似たいわゆるエセ商品のようなものを作ってみたかったので…
すいません >>873
こんな感じです…泣
すいません勉強不足でした…
何とか頑張って画像加工しながらレイアー(透明度を上げた)ものを被せながらやってたのですが…
教えてくださりありがとうございますm(_ _)m どうでもいいんだけど、検索ヒット数からすると
一般的にはレイヤー(layer)? >>858
市販のルータに入れることができる
超軽量のLinuxベースの代替ファームウェア
OpenWrtでluaが使われてる >>875
外人は今でもlayerって呼ぶと思う
何らかの手段でボックスが重なることを
日本だと2000年前後に<layer>要素が死滅してからは
なんとなくレイヤーと呼ぶのが憚られる印象が個人的にはあるなあ >>858
嘘松ネタスレ的に面白かったのでスレ立て見たwww
2019年FreeBSD+IIS+Shopifyで使われる言語3位はLua
https://mevius.5ch.net/test/read.cgi/tech/1576855884/ >>875
一般的にはレイアーじゃなくてレイヤーだよ
俺も気になったけどもうええかなって思ってスルーした >>873
すいません 普通の画像を映画風に仕上げたいという意味だったのですが…
やはりCSSでは難しいですよね http://karapaia.com/archives/52212165.html
早い話でいうとこんな感じです コラ職人の方ですかね
画像加工を学ばないと無理そうです… 加工済みのグラデーション画像の上に
横サイズを縮小したグラデーション画像を同様に重ねる(真ん中を明るくするため右側の文が入るところだけ黒くする)
これでやってみます アドバイス参考になりました やはり873さんの方法を使わせて頂きます…
何度もレスすいませんでした… MDNのCSS widthの解説で見たことないキーワードがいっぱいあるんだけど
availableとかfillとかこんなんありましたっけ? なんか色々増えてるね
box-sizingとか要らなくなりそう CSS黎明期にテーブルレイアウトは悪
これからはCSSとか言ってdiv使いまくりだったあの頃を知ってると、
CSSの理念はわかるがまだまだ機能不足だろって言ってた俺は
正しかったんだな。ほれみろ、こんなに足りない機能があったんだ 見た目は二の次でSEOが重要になったから、
web屋さんとしてはすげー先見の明はあったと思う SEOとHTMLの正しさは関係ないよw
そもそもGoogleの理念は、有益な情報をより正確に検索できるようにすることであって
HTMLがただしいかどうかっていうのは、有益な情報とは関係ない
HTMLがめちゃくちゃでも、そこに書いてある情報が有益なら
検索の上位になるべきだろう。
Googleも正しいCSSを心がけてくださいとか言ってた気がするけど矛盾してるんだわ。 もうgoogleはhtmlやらcssよりも人間が見てどうなっているかを画像解析する程までに進化してしまったからな
bingや百度相手ならまだまだSEOも通用するんちゃいまっか いまの検索結果を見て検索エンジンに絶望しかしないよね 何をどう絶望するんだよw
検索の仕方が悪いだけだろう なんか基本的なところで引っかかりまくるんだが、
縦マージンのパーセント指定も親の"横幅"を基準にするのかい?
あとどこ見ても"親のwidthを基準"て書いてあるけど、
親がborder-boxだとwidthと一致しないから"コンテンツ領域"が基準だよな? とはいえまだまだ発展途上だから
キュレーションサイトやアフィブロが上位に来るわけで
グーグルのない時代の情報の探しやすさと比べたら雲泥よ >>893
widthが基準だって言ってるんだから、border-boxならボーダー領域(= width)が
基準になるんじゃないの? そう。さらに言うならborderを設定していた場合その内側。要素によってborderの厚みが違うときに外側で揃えたい場合ちょっと面倒。 >>897
試してみたけど、確かになってねーな
元々は「width=コンテンツ領域の幅」で、親にborde-box指定しても
子のwidthの基準になるのは、あくまでも親のコンテンツ領域のことを指す
っていう理解でいいのかな?
あんまり考えたことなかったんで、勉強になった 下のようにエディタに入力してますが、CSSが反映されません。
他の部分のCSSは反映されています。なぜだかわかる方いますか?
HTML
<!-- メインここまで -->
<!-- フッター -->
<footer class="foooter">
<p>©Copyright KUJIRA Cafe. All rights reserved.</p>
</footer>
<!-- フッターここまで -->
</div>
</body>
</html>
CSS
/* すべてのページに適用 - フッター - */
.footer {
background-image: url(../images/footer-bg.png);
background-repeat: no-repeat;
margin-top: 30px;
padding: 80px 15px 20px 15px;
font-size: 12px;
color: #3f5170;
} ググっても出てきません。
キーボード?マークの所のスラッシュ(/)と、テンキーの割るって意味の/は同じですか? >>899
foooter
footer
>>901
同じ 文章が写真を巻き込みません>< なぜですか? お願いします!
HTML
<p><img src="images/about-photo.jpg" alt="タルトの写真" class="shop-photo">大海原を悠然と泳ぐクジラの姿を見た事があるでしょうか。そのゆったりとした動きや優しい眼差しを
見ていると慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっとすごしたひとときの心の充実を、私は今も忘れません。</p>
CSS
.shop-photo {
float: left;
padding: 0 1em 1em 0;
} >>904
>大海原を悠然と泳ぐクジラの姿を見た事があるでしょうか
私は無いのですがマリン板のガチムチ諸兄なら適切な回答がもらえると思います 一つお聞きしたいことがあるのですが画像のサイズを変えずにアップロードってできませんよね? サイトのヘッダーに画像を使いたくてもPNGやJPEGで取得できませんし…
imgerを使ってしまうと小さくなってしまいます
PNGというもので自分のPCからHTMLの要素として追加できるのでしょうか?サーバーにあげずに https://codepen.io/sadsfff/pen/xxbdpvm
連投すいません 上記のコードで書いたのですがスクリプトが機能しません
書き方はあってますでしょうか? 同じボックスに同じjsを当てはめたいのですが… >>909
アップローダーならいくらでもあろう
スレ違いなので自分でググって探して >>911
<button>要素閉じよう
あと、自分で書いたとおり
クリックイベントのターゲットは<button>要素の方で<a>要素じゃない
だから、ボタンの端っこの方をクリックするとアニメーションするけど
<a>要素の部分をクリックするとリンクしてる >>909
ちょっと何言ってるか分からない
imgerってimgur?
だとすれば、imgurにアップロードした画像を自分のサイトのヘッダーにリンク画像として表示させてたけど
原寸表示させたいから、ローカルのPC内に入ってる画像をサーバーに上げずにサイトのヘッダーに表示させたい
っていうこと? すいません分かりました buttonの中にjs を書くと良いんですね
<スクリプト> と直せば実行できました
疑問なんですが<スクリプト src>とはなんですか? このsrcは要らないような気がするのですが >>914
はい、ずばりそういうことです
別の方のサイトを見る限り可能なようだったので… スクリプト srcと指定している人が何故してるのかは大体予想できます
もしHTMLが複雑だった時もしくはjsが複数ある場合 配置位置がぐちゃぐちゃになるからですよね?
だから<スクリプト>だけで良い物をわざわざ<スクリプト src=クラス名にして直接指定してやるということですよね?? >>915,917
ごめんちょっと何言ってるかわかんない
前にも質問書いてた人かもしれないけど
script要素をHTMLのどこに書くか
要素の中に直接書くのか、別ファイルにしてsrcで読み込むか
なんてのは果てしなくどうでもいいこと
>>910の問題はquerySelectorに渡すセレクタ >>915,917
超大雑把に言えばJSは
・要素にアクセスして
・イベントをつかまえて
・やりたいことをやる
の3つで出来てる
>>910だったら
・button要素、a要素にアクセスして
・clickイベントをつかまえて
・既存の動作をキャンセルしてから、アニメーション用のクラスの付け外しをする
になる
この1つ目を失敗してるからそれだけ直せば良いこと >>919
つまりはHTMLが間違ってるということですか?
先程手直ししてスクリプトsrcをスクリプトに書き換えました
button要素を最後にかいて中にjsを入れ込みました
スクリプトsrc=は外部リンクだったんですね…
てっきり=配置したい所のクラス名だと思ってました >>916
自分のサイトってどっかのサービスか何か使ってんの?
それとも自分でサーバー借りてやってんの?
前者なら、そのサービスが何か分からんことには答えようがないし
後者なら、自分のサーバー内の任意の場所に表示させたい画像を
ftp等でアップロードして、HTMLファイルのヘッダー画像のパスを
アップロードした画像のパスに書き換えりゃいいだけ >>920
>つまりはHTMLが間違ってるということですか?
ちがうよー
たぶんちょっと前にも質問した人だと思うけど
そんでそのときにも答えたと思うけど
script要素をどこに書くかなんて、君が抱えている問題に関しては
果てしなくどうでもいいことだよ 何かもう意思疎通が出来てる気がしないから、正解書いてあげたら?
そもそも当該スクリプトで、どういう動作をさせたいのかよく分からんから
何が正解なのか分からんけどw JavaScript(JS) の質問は、JS のスレへ書いてくれ!
それに、素のJS で書いていくのは、キリがない。
時間が掛かるだけ
初心者は、わかりやすいjQuery を使え! jQuery なら、こんな感じ。
先に、jQueryを読み込んでから、ソースコードを書く
</button>のラベルと閉じタグが無いから、ボタンが表示されない!
注意! 投稿できないため、scr@ipt と間に、@を入れた
<button class="bubbly-button">押して</button>
<scr@ipt type="text/javascript" src="../jQuery/jquery-3.1.0.min.js"></scr@ipt>
<scr@ipt type="text/javascript">
$( function ( ) {
$( ".bubbly-button" ).hover ( function ( ) {
$( this ).stop( ).animate(
{ opacity: '0.5', fontSize: '22px' }, 1000 );
}, ( function ( ) {
$( this ).stop( ).animate(
{ opacity: '1', fontSize: '16px' }, 1000 );
} )
)
} );
</scr@ipt> 最近はスマホで見る人も多いから
ラジオボタンよりもプルダウンメニューの方が好んで使われるんだね >>927
UI/UXとしてはケースバイケースだと思う
一覧性が必要な場合もあるし フレキシブルなヘッダ固定テーブルってどこ調べても使える解答がないんだけど無理なのか? >>929
IE置いてけぼりのstickyじゃだめ?
https://codepen.io/orangain/pen/REqjjv
だとすると、10年前テクノロジーでちまちまやるしかないなあ HTMLで、雨が降る、というテキストを
夜更け過ぎには雪に変わるだろう、というふうにしたい場合はif文章を使えばいいんですかね?
時間が変われば変更する感じでswich文章の方が良いですかね? >>931
JSで
そのテキストが書かれている要素にアクセスして
Dateオブジェクトから現在や任意の時刻を得て
その時刻に呼応した文字列を作り
アクセスした要素のinnerHTMLに差し替えます
HTML/CSSの話ではないので
詳しくはJSスレへどうぞ レイアウトについての質問です
以前 grid や flex は試したことがあるのですが、
Bootstrap のグリッドシステムにも興味が出てきています。
まだ Bootstrap がどのような記述をするものなのか分からないので、ざっくりとした質問で申し訳ないのですが、
css 標準の grid や flex と Bootstrap のグリッドシステムを比較した時、どちらが記述しやすく明確になりますか?
レスポンシブ対応等、Bootstrap を採用するにあたってメリット等ありましたらそれも教えて頂きたいです。
小規模な開発には不要、などの情報もあればよろしくお願いいたします。 >>933
Bootstrapは、ありがちなデザインのスタイル(CSS)を予め作ってくれてるもので
CSSじゃないわけじゃない
やることはいっしょ
あとグリッドシステムというのはデザイン用語で
グリッドを使ったデザイン手法のこと
Bootstrapのメリットは、楽なことと、主だった手バグがフィックスしていること
デメリットは、Bootstrap臭いデザインになること >>933
クリスマスイブにHTMLやCSSのコード書いてるのかい
ご苦労なこったなあ
俺もだけどw この時期になるとやたらこじつけでクリスマスネタ使いたがる奴いるけど正直見てて寒い。 >>936
別にここに居なくていいし寒いならここ来なくていいんだよ誰も頼んでないからな
メンタル病んでるんじゃないか >>936
わかる
ウッキウキで書き込んでるんだろうなぁ 今仕事帰りなんだけど正直寒い
なにこの気温…((((;゚Д゚))))))) 初めにcssをエディタの上の方で
display: flex;
と書いてphotoとテキストが横並びになるようにしておきました。
でもスマホで縦画面で見た時に横幅が狭くて、photoとテキストが横並びだと見ずらいのでエディタで下の方に
desplay: block;
と書きました。スマホで見るとphotoとテキストが縦並びになって見やすくなりました。cssは下に書いてる方を優先するから、displya: block;が優先されて、縦並びになったと思うのですが、パソコン画面で見直すとphotoとテキストが横並びになります。
これはまだ desplay: flex;が生きてるって事ですか?
上の方のcssが下の方に書いたcssに書き換えられてるのではなく、下も上もcssは生きてて、下が優先されるって事でOKですか? >>941
本当にその通り書いたならスマホの方は効いてないよ >>941
何か間違ってる
書いたコードを正確に言葉で説明するのは難しいし無駄なんで
どっかに晒して頂戴
そのためにcodepenやjsfidlleがあるのだから デスプレイってオスプレイの友だち?
それともチャッキー? >>933-934
Bootstrap 4 の本。
CSSフレームワーク Bootstrap入門、掌田津耶乃、2018
xl : デスクトップ PC などの大画面モニタ - 1200px 以上
lg : ノート PC などの省サイズモニタ - 992px 以上
md : タブレット端末など - 768px 以上
sm : スマートフォン(横持ち)など - 576px 以上
- : スマートフォン(縦持ち)、IoT 端末など - 576px 未満
画面サイズで、この5つに分類して、
横幅を12分割して、その内のどれぐらいの幅を使うか指定する
md 以上なら、12を、4-4-4 に分けるとか、
md 未満なら、6-6 に分けるとか、
他には、Carousel などのコンポーネントも付いてる >>946
横レスですまんが、
昔、知り合いが180ピクセル単位幅でレイアウトすればなにか便利とか言ってたけど、
これと関係する?
グリッドコンピューティングだっけ? "floatする際にはwidthの指定も必須"みたいな記述を見かけるけど
そんなルール仕様書にありましたっけ? >>947
グリッドコンピューティングてのはクラウドサバみたいなやつのことだ
複数の生きてる資源を組み合わせて1つのコンピュータとみなすやーつだ >>934
結局のところ触ってみないと分からなそうです
Bootstrap臭くなるっていうのがちょっと気にはなりますが試してみようと思います
ありがとうございました 今progateで勉強し始めて、liを横並びにしたいのですが、
index.html
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>プログラミングとは</li>
<li>学べるレッスン</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
の時、
stylesheet.cssにおいて、
.header-list li{
float: left;
}
で適応されるのですが、
.header-list{
float: left;
}
では適応されないのは何故でしょうか
.header-list{}であっても、liは範囲内にあると思うのですが・・・ 俺からも質問いいかな
progateって何なん?レッスンサイト?
詳細見ようとしてもログイン強制されて見れんし。 >>953
CSSてのは、セレクタで要素を特定して
その要素に適用したいスタイルを記述するものなんよ
で、横並びにするためにfloat: leftというスタイルを使ってるわけだけど
そのスタイルを適用すべき要素は、<li>要素じゃん?
<li>要素が横並びになるわけだから
だから、その<li>要素を特定するために
前者の.header-list litというセレクタが必要なんよ
後者の.header-listは
<div class="header-list">という要素を指すセレクタであって、<li>要素ではない >>957
なるほど・・・
.header-listにfloat: left;を適応させようとする行為は、
「箱の中の石を横並びにさせようとしているのに、
箱そのものに横並びをさせようとしていた」という認識であっているでしょうか? 今どき横並びにするのにfloat left教えるとかだっせぇサイトだなw >>960
もっと良い方法があるんですか?
今時の主流はなんでしょうか >>960
だから古い教材でメシ食ってるって言ってんだろハゲ >>953
俺より初心者を初めてここで見たわ
俺も初心者じゃなくなって来たって事かな? >>965
そう見えたなら、初心者は脱したとは思うよ。
単体で金を稼げるようになったら一人前 そのサイトがfloatを推奨しているのか、
ただ横並びせよと命題出してるだけで初心者が勝手にfloat採用したのか、どちらなのかは分からんぞ 多分進めていくとflex出てくる
とりあえずfloatの使い方を最初にやってるだけ 上と下の奴だと上じゃないとダメですか?
idが先でclassが後などのルールがあるのですか?
<div id="change-text" class="btn">文字列を変更</div>
<div class="btn" id="change-text">文字列を変更</div> そういやなんでみんなidから書くんだろうな
自分もだけど 今の時代はflexだけど、floatも使えた方がいいって先生から教わった そう。そういうのいつも思うけどさAかBかじゃないんだよ。
AもBも両方覚えろって話なんだよ。
photoshopかillustratorかじゃないんだよ。
ReactかjQueryかじゃないし
macかWindowsかも討論不要なんだよ。
レズプレイかデブプレイかじゃないんだよ。
両刀なんだよ!! そら使えないより使えた方がいいに決まってんじゃん馬鹿でー
横並べにfloat出すのが不適切って話よ テーブルセルに対してmax-width指定しても基本効果無いけど、
特定の列の幅だけ完全固定する、他の列は親要素に対して広がる、みたいなことはできんかね? 特定の列の幅だけwidthをピクセル指定すりゃいいだけやん ああ固定レイアウトにして他の列をautoにすればいいだけだったわ
テーブル本体のwidthがauto指定だと自動レイアウトになっちまうってのが混乱の元なんだよなあ >>975
じゃあ六法全書ぜんぶ覚えるべきだよねw
法治国家日本では法の無知は言い訳にならないからおちおち出歩けもしないしねww >>980
六法と何を比較して悩むの?
弁護士・司法書士なら関連は全部覚えるに決まってるだろ html フォーム受信ってPHPでしか受け取れない?Javascriptじゃあ無理? もし文法エラーやHTMLだけ設置しておりそれに関するCSSがなかった場合 サイトを表示できないのでしょうか? >>985
大抵のブラウザにデフォルトのCSSがあるので、それで表示されるよ
適当なサイト表示して、開発ツールで読み込んでるCSS全部外してみると見られるよ
ヘッドレスブラウザみたいに
表示そのものがないブラウザもあるよ >>984
その仮サーバーのセッティングが間違ってんじゃない? >>991
そのフローだと設定はできない。
亡くなる前に設定を完了させて、その後に亡くなって霊きゅう車で帰るべきだよ。 "flex-growの総和が1未満だとスペースの配分量が100%にならない"
という仕様っていつぐらいにできた?解説してるサイトが見当たらん
Chromeは仕様通りに動いてるみたいだが。 >>993
次スレに書いてあげるから次スレ立ててくれ エラーチェックした場合 その箇所を絶対直さないといけないのでしょうか? このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 111日 0時間 56分 33秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。