Webサイト制作初心者用質問スレ part249
■ このスレッドは過去ログ倉庫に格納されています
初心者だろうが誰だろうが、 まず >>>■ 検索してから ■<<< 質問すること ネタ・煽り・自演・荒らしは完全放置 【質問時の注意】 1. 質問する前に >>2 にも目を通すこと 2. メール欄に何も入れないことを推奨 (IDを出して騙りを防止するため) 3. 質問者が返信する際は「最初に質問したレス番号」を名前欄に入れること 4. ブログについてはブログ板で質問すること ●ブログ板 http://mevius.5ch.net/blog/ 5. SEO、アドセンス、検索サイトに登録しても検索結果に引っかからないといったことは SEO関連スレで質問すること http://find.5ch.net/search?q=seo 6. アクセス解析については該当スレで質問すること http://find.5ch.net/search?q=%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E8%A7%A3%E6%9E%90 7. 製作ソフト(Dreamweaver DW、ホームページビルダー、等)を使用した場合の質問は該当スレで質問すること 8. CGI、PHP, Perl, Ruby 等のプログラミング関連や CMS, Wiki は Webprog板、またはこの板の該当スレで質問すること ●WEBプログラミング板 http://medaka.5ch.net/php/ 9. JavaScript はこの板の該当スレで質問すること 10. 画像作成ソフト(Photoshop 、Illustrator、等)については該当スレで質問すること 11. HTML, CSS, CGI, 制作ソフトなどのどんな本を買えばいい?といったことは書籍についての質問スレで質問すること http://find.5ch.net/search?q=%E5%BD%B9%E3%81%AB%E7%AB%8B%E3%81%A4%E6%9B%B8%E7%B1%8D%E3%81%AF 12. 質問内容を吟味して、正しい日本語で第三者が読んでも分かるように質問を書くこと 13. 間違った回答をする人もいることに注意 【前スレ】 Webサイト制作初心者用質問スレ part248 http://mevius.5ch.net/test/read.cgi/hp/1494150188/ >>463 誰が書いても同じように素晴らしいコードになるならなんの問題もない Bootstrapは誰が書いてもクソコードになるから問題 デザインセンスがあんまりないから bootstrapでかいとけばテンプレートってのあてるだけで 他の人のいけてるデザインになるかと思ったんだけど… 誰も他人のサイト作ってるなんていっとらんがな デザインセンスないのを自覚した上でセンスがないなりに他人のセンスを借りようとした結果が CSSフレームワークっちゅうもんや SCSSが便利ってよくきくから導入してみたいけどどうやって導入するの? Rails で動いてるんだけどどのブログみても Gem に gem 'bootstrap-sass' gem 'sass-rails' ってかいて $ bundle install するだけで app/assets/stylesheets/application.scss に @import "bootstrap-sprockets"; @import "bootstrap"; ってかけばいいって書いてるんだけどいうとおりにしても @import でそんなファイルないっていわれる これ Rails スレできいたほうがいいのかな… フロントエンドコーダーでインフラ詳しくないから いろんな便利なツールがあっても導入でつまずく cssよりscssのほうが分かりやすいからscssで書いて node-sassでscssをcssに変換するぐらいにしか使ってない俺は少数派? ガチガチの導入はわからない 今度はじめて他人のHP代行で作ることになったんだけど ドメインとかサーバーは持ち主に契約してもらったほうがいいよね? はじめてWEBアプリを作るとしたらおすすめなのありますか? >>474 ToDoアプリ 比較的簡単だから入門にはいいし、できたらそれ使って今後のアプリ作成のToDo管理に使える >>468 scssは標準で使えるから何も入れる必要はない お前のやってるそれはsassとbootstrapを使おうとしてるもの bundle installは本当にうまく行ってるのか?app/assets/javascripts/application.jsは修正したか? >>468 *= require や *= require_treeは消せと書いてあるが消してあるか? https://github.com/twbs/bootstrap-rubygem わー ありがとうございます そこよんだら >Bootstrap 4 ruby gem for Ruby on Rails (Sprockets) and Hanami (formerly Lotus). >For Sass versions of Bootstrap 3 and 2 see bootstrap-sass instead. ってかいてあって bootstrap4 使うには bootstrap-sass じゃなくて bootstrap ってのをいれなきゃだめだったみたいですね… ウェブ上の記事はほとんど bootstrap-sass の記事ばっかりだったのに… でとりあえずインストールと require までかいたら import は通るようになったんですけど uninitialized constant ExecJS::Runtimes::RubyRacerRuntime<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> っていうのが出るようになっちゃいました… 変なとこいじっちゃったのかなって全部動いてる状態に戻して Gemfile に gem ’bootstrap’ の1行かいて bundle install した時点で require とかの変更しなくてもこうなってました エラーメッセージ検索しても人によっていってることばらばらだし Rails の設定が特殊なのか SASS bootstrap どれが悪いのか これ以上はちんぷんかんぷんですわ フレームワーク使うのってほんと大変ですね… こんなので1日使うぐらいだったら HTML CSS PHP JS をテキスト書きして apache にぽんっておくだけのほうがはるかに早いのに… exe インストールしたら自動的に使える状態になるもの以外新しいものに手出したくない… やっと Rails 上で SASS から bootstrap よべるようになったんだけど .card { @extend p-1; } ってかいても p-1 ないですっていわれるし @import ‘bootstrap’ ってかくと bootstrap の要素全部はきだされる… SCSSだけはきれになるけどCSS細かくわけると毎回使いもしないクラス大量にはかれるし無駄すぎない? SCSSの使い方が間違ってるのかな… >>480 こういうの読んだ? https://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad 時にRails使ってるみたいだけど、まさかbootstrapのためだけに Rails使ってるんじゃないよね? >@extend p-1; p-1 の意味がわからない。 こういうタグがあるの? SassMeister, css2sass のサイトに入力して、チェックすれば? .xyz { margin: 5px; } .abc { @extend .xyz; } .xyz, .abc { margin: 5px; } // 出力 普通は、こういう感じ。 一般的には制限が多い、extend よりも、mixin を使うべき >>481 配属先のプロジェクトで Rails 使ってたってだけ 正直いままで apache や WP しかさわってなかったから view が erb っていうちょっと変な書き方でとまどってる それはともかく管理画面にいままで誰もデザインあててないから bootstrap か何か使ってる人の多い汎用フレームワークでデザインあててっていわれたけど 「bootstrap でデザインをあてる」って具体的にどういう意味なのかなって CSSを一切書かずにHTMLにbootstrapのクラスをかいてくだけでデザインはあたるんだけど ウェブ制作のトレンドとしてはなるべくHTMLは簡潔にして CSS側でセレクタでがんばってなるべく共通部品や重複なくしてくのがトレンドでしょ? だから <li class="dropdown-item"> <li class="dropdown-item"> <li class="dropdown-item"> とか <input class="form-control ..."> <input class="form-control ..."> <input class="form-control ..."> とかあったら .dropdown-menu > * { @extend .dropdown-item } input, button { @extend formcontrol } ってSCSSでかきたくならない? けど>>481 ,482みたいに自分でスタイルかいちゃったら個人のセンスの問題であって bootstrapでデザインあてることにならなくない? アスペなの? その指示は「良い感じのデザインがほしいけど別に時間はかけたくない。適当にbootstrap使っとけばいいか」という背景だろ? 自分でスタイル書けるなら書いても良いんだろうけど、指示した奴的にはデザインが当たれば良いのでどうでも良いだろ そして多分>>481 は>>480 でお前が「bootstrapの要素全部吐き出される」と愚痴ってたことに対する返答で、 qiitaの記事にあるようにスタイルを分割してビルドするようにすれば、 必要なクラスだけを使ったオリジナルbootstrap.cssが生成できるよということではないの? >>484 んー ちょっとちがうかも 自分がやりたいのは 他の人が作ったデザインをあてるためにHTMLに汎用的なbootstrapのクラスを指定したい その方法としてなるべく HTML を完結に CSS 側にセレクタでまとめたい ということであって bootstrap のクラスのデザインを決めて上書きしたいってことじゃないんですよね bootstrap のクラス := style じゃなく HTML セレクタや myclass := bootstrap のクラス ってことがやりたくて右辺に bootstrap をクラスかくために import が必要になるんですよね 分割できるっていっても99%使わない気クラスが展開される上に フォームを使った部品3つのCSSつくるとどれも import '_forms' を呼ばないといけないじゃないですか というか左辺にbootstrapのクラス書くのはimportも何もいらないからそりゃ必要な分だけ上書きできるけど それってbootstrapを使ってデザインをあててるんじゃなく boootstrapのテンプレートを作ってるだけじゃないですか? bootstrapを使うなら、普通はbootstrapに用意されてるスタイルをカスタマイズしたり上書きしたりして使うんだよ 他の人が作ったデザインがもうあるならbootstrapを使う必要がないじゃん 全体的に何言ってるのかさっぱりわからんわ 右辺だの左辺だの展開だのテンプレートを作るだの、お前の使ってる言葉他人に通じないから その言葉使いで話し続けるなら一つ一つどういう意味で使ってるのか説明しろよ アスペはお前の方だろ テンプレートもわからない素人が口挟むなよ >>487 テンプレートの意味はわかるけどこいつがどういう意味でテンプレートを作ると言ってるのか、 それ以前の文から全然わからんよ わかるなら翻訳して教えてくれよ。と言うかお前が答えてやれ >>486 わかりにくくてごめんなさい 端的にいえば HTML に bootstrap のクラス名をかかずに bootstrap のデフォルトのデザインがあたるようにしたい という質問なのですが普通じゃないことをしようとしてるんですね… もともと >>461 でそうかくしかないのかなって思ってたんですが >>462 で scss を使えば HTML がクラスだらけにならなくてすむ とおっしゃってたのでがんばって scss を使えるように昨日格闘したんですが 実際にどうかけば HTML にクラスをかかずに bootstrap が使えるのかなってききたかったのです ちなみに左辺右辺というのは x = 1; とかいたときに値を代入する変数が左辺で 代入される値が右辺という意味でした わかりにくくてすいません もともとがHTMLをクラスだらけにしたくない っていってんのにクラスを上書きして何がかわるんだよ 質問の意味がわかってないなら黙ってろって >>490 質問の意味はわかるけど回答としてはbootstrapを使うなということぐらい bootstrap は CSS をわからなくてもデザインがかける ここでいうデザインはレイアウトのこと とくに -sm とか -md ってかくだけでスマホとPCでレイアウトが変えられるので レスポンシブ対応がしやすい 装飾って意味でのデザインは自分でかくもの (あるいは人のテンプレートをあてるもの) なのでHTMLにクラスをかかずにCSSにまとめたいってのは bootstrapの理念に反するんだよ 実際CSSと最近はエフェクトにJSの知識も必要だが それがかけるならbootstrapを使う必要なんてないし ウェブ制作会社で使ってるとこなんてないよ > なのでHTMLにクラスをかかずにCSSにまとめたいってのは > bootstrapの理念に反するんだよ そもそもbootstrapがHTMLの理念に反している >>490 bootstrapの思想を否定しつつもbootstrapを使いたいという最強にワガママな自己紹介すんなよ Webサイト作りたいと思った時まずは何から勉強するのが良いですか? 最終wordpress出来れば良いなとは思ってるけどド素人でもできるもの? >>496 否定というかできないならあきらめてHTMLにクラスかきますけど >>462 さんがSCSS使えばっていってたからどうするのかききたかっただけです sass も bootstrap もはじめて使う初心者なので知らなかっただけなので… 不快な思いさせてしまったなら申し訳ありません だから bootstrap じゃなくタグに直接スタイルのあたるCSSテンプレート というかテーマがほしいっていってたのね >>498 普通にhtmlとcssから入ればいいんだよ これと適当な無料画像使えばプロ並の静的サイトまで作れる というわけでまずは静的サイトの作成から クラス使いたくないならひたすらdiv > div > divみたいに指定すればできなくはないから頑張れ むしろ div > div > div で指定したいってことじゃないの div > div > div { … } の中にかくもので困ってるんでしょ >>498 まず目的を考える。そもそもなんでwebサイトなのか で、中身を考える で、集客方法を考える 単によく分からないけど面白そう!って思うなら、もう作っちゃえばいいと思う wordpress.comで確かいくらでもHP作れたような webサイトを作ったけど誰も来ません リンクサイトに登録したらグーグル8分になるのは本当ですか? ecサイトの制作を受注するときオンライン決済はどうしていますか? 受注してサイト自体は自分が作るとしてオンライン決済部分は既存のサービスを組み込んだとして、もしクライアントの不手際等で審査に通らなかったりするような問題は起こるんでしょうか? 組み込む前に審査通して契約してもらう すべてクライアントに任せる 通るも落ちるもクライアント次第 契約できてから組み込む それまではオンライン決済なし そこは事前に了承もらっておく ちなみに代行会社によってはサイトチェックあったりするからどっちにしろオンライン決済なしで作ることになる Bootstrap は、フレームワークの中でも大きいから、数年以上やった人が使う。 フレームワークを理解していない人には、使えない フレームワークを使う場合は、そのやり方に従わなければならない。 フレームワークとはそういうもの。やり方を真似るもの。 従わない場合は、恩恵を受けられないから、別のフレームワークを使うべき 素人は「css フレームワーク」で検索して、軽量なものから試していく。 UIコンポーネントで部品になっているもので、各部品を試す。 SASS などで、UI部品も再利用する その後、すべてのUI部品のデザインを統一している、大きなフレームワークを試す 「css フレームワーク 簡単」で検索して、簡単なものから勉強していく >>483 PHP, ERB は、<% %> Vue.js は、ヒゲ(mustache)、{{ }} 他には、JSX がある どれでも同じ。 設定で変えられるものもあるし 今更だけど、なんで<P>タグって閉じタグがなくてもいいんだろう(´・ω・`) パラグラフ(段落)の中にパラグラフが含まれることはありえないから >>510 なくていいんじゃなく、わざわざ各Webエンジンのおせっかい機能 閉じタグを忘れてもサイトが崩れないようにしてくれているだけ >>513 ちょっと君、役に立たないから出てこないでくれないかな >>514 は?バカかテメーわ? 普通に閉じタグないp書いてブラウザ開いてデベロッパーツールでみてみろよ カスは出てくんな 仕様には省略可能とはあるけど、 ネット黎明期に不完全なHTMLがはびこってブラウザ側でエラーにはせずに表示されるように対策した、というのも事実ではある p のなかにブロック要素いれちゃダメだから ブロック要素がでた瞬間 p が終わるってのが簡単にわかるからでしょ >>516 最初の仕様から省略可能 昔は<p>が一行開けるものだと思われていたぐらい >>519 昔はそういうのが一般的だった時代がある証明はできるのだから、お前が知らないと主張したところで意味がない ht tps://cetus. sakura. ne.jp/htmllint/explain.html#p-isnot-br > <P> を行末に書いているときにこの警告が出ます。<P> は改行するためのタグではありません。 > <P> を行末に書いていたのは、HTML2.0より前の大昔のことです。RFC1866(J)では段落のためのタグとして、 > 終了タグを伴って定義されています。 > かなり多くの参考書が、<P> を改行するためのタグだとか、1行空けるためのタグだとか紹介しています。 > それは嘘です。そんなことを堂々と書くような著者は信用してはいけません。自分では調べもせず、 > 間違いの書かれた二次文献や三次文献などからの引用で済ませているからだと思われます。 HTML2.0より前 https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt > EXAMPLES OF USE > <h1>What to do</h1> > This is a one paragraph.< p >This is a second. > < P > > This is a third. > > BAD EXAMPLE > <h1><P>What not to do</h1> > <p>I found that on my XYZ browser it looked prettier to > me if I put some paragraph marks > <p> > <ul><p><li>Around lists, and > <li>After headings. 最初から何が省略可能かは仕様で決まってる RFC1866(J) http://www.ring.gr.jp/pub/doc/RFC/rfc1866.txt > <OL> > <LI>First item in an ordered list. > <LI>Second item in an ordered list. > <UL COMPACT> > <LI> Note that lists can be nested; > <LI> Whitespace may be used to assist in reading the > HTML source. > </UL> > <LI>Third item in an ordered list. > </OL> > <P>This is an additional paragraph. Technically, end tags are > not required for paragraphs, although they are allowed. You can > include character highlighting in a paragraph. <EM>This sentence > of the paragraph is emphasized.</EM> Note that the </P> > end tag has been omitted. > <P> > <IMG SRC ="triangle.xbm" alt="Warning: "> > Be sure to read these <b>bold instructions</b>. > </BODY></HTML> >>516 > ネット黎明期に不完全なHTMLがはびこってブラウザ側でエラーにはせずに表示されるように対策した、というのも事実ではある それは省略不可能なタグの話。 <p>などは最初から省略可能であり、エラーになるブラウザはバグでしかない 全てのブラウザは<p>のとじタグはエラー無く表示されていた。 それが正常な動きなのだから、エラーでたために対策などしてない 最初からだったのか もともと研究資料の記述目的だったみたいだし 新しい段落はここから、で十分だったということかな 十分? 今でも</p>はなくて十分なんだが? 無くても十分だが、あったら段落の終わりが 明確になる。ぐらいのものでしか無い 省略可能なHTMLタグは、なくても曖昧さが発生しないから 省略可能になってる。気まぐれで省略可能にしたんじゃないんだよ <p> <div></div> </p> ってよくありそうな間違った書き方だけどブラウザだと解釈わかれたりするの? divはないにしてもulいれたくなったりすることはたまにある >>527 その辺は全部規定があり、規定通りに表示される IE5なんかはガン無視してたので思いっきりchromeにシェア持っていかれた >>527 既存ブラウザ(特にIE6)の挙動に合わせて標準化された 全てのブラウザは文法間違いを同じように扱う 確かに段落の中に箇条書きがいれられないっておかしな話だよな くだらんからもうやめろ こんなレベルの低いところで立ち止まって初心者から脱出できるのか? いちいちpガーとかどうでもいいじゃん こんなところで悩むなよ すみません、jQueryほぼわからず普段コピペで使っている者です。 以下で、画像の上にマウスがある時、画像をoffとonで自動切り替え出来るようになったのですが、 $(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); これを画面幅によって無効にしたいです。 768px以下のとき無効にするにはどうしたらいいでしょうか? 教えて頂けると助かります。 よろしくお願いします。 一番悪い実装はJavaScriptを使って直接表示を制御することだな。 CSSと連携してクラスを変えるやり方以外はやってはいけない jsでホバー画像切り替えとかwww いつの時代だよwww 他のスタッフがローカル環境で更新したものを、 ファイルジラで本番環境にアップしているのですが、 "更新したファイルのみ"をアップしたいです。 一応 "ファイルが新しければ上書き" のオプションはありますが、 上階層のファイルを全部あげると、全ファイルをチェックして時間がかかるので 良い方法はありませんか? チェックせずに更新してるかどうかどうやって判断できるのかと >>539 5年ぐらい前まで:hoverが使えないブラウザがあったような気がする XP+IE7とかだったかもしれんが セレクトボックスの中の option ってCSSきかない? 表形式に見栄え良く出力してさらにドラッグやシフトクリックで選択できるようにしたいんですけど そういう便利なライブラリみたいなのってないですか? >>544 selectのmultiple属性とsize属性 >>545 だからその multiple のボックス中を表みたいにしたいんだけど そのサイトがどの言語で作られているのか JavaScriptなのかPHPなのかRubyなのか、 どういうフレームワークが使われているのか(AngularやReact) なのかってChrome機能の検証等から知る方法はありますか? それともこういうのは基本その企業のインタビュー記事とかでしかわからないのでしょうか? sizeをoptionの数に合わせれば表みたいになるじゃん >>548 フロントとバックがごっちゃになってるが、フロントで使ってるのは読み込んでるの見ればわかるでしょ バックはレスポンスヘッダーでわかることもある 隠せるから制作がまともなとこならわからない >>548 Chromeの拡張であるよ 名前は忘れたが しかしすべてのサイトが判定できるわけじゃなさそう >>549 あー ごめんなさい xxx 123 yyy 234 zzz 567 みたいに複数列にデータを表示して選択はドラッグでできるようにしたいって意味でした なので option の中の表示が raw text しかできないので そこを横方向のデータの並びを整形して見栄え良くしたいって意味でした いろいろライブラリ探したけデフォの select を display:none にして 真上に table や list で表示して jQuery で表示変えたりみたいなことしてるのしかなかったから やっぱり選択領域の見栄えかえるのってそうするしかないのかな G板よりこちらの方がいいかなと ウェブマスターツールからSearch Consoleに変わったようですが Fetch as Googleが見当たらず、どこに? sitemap送ってれば必要ないのでしょうか? 適切な(機能してる)スレあれば誘導願います npm の使い方ってここできいていいんでしょうか HPを作る練習をしてるんですけど きれいなボタンとかの部品を使ってみたいんですが head に CSS と JS のリンクを貼るタイプのしか使えなくて npm で配布してるものから CSS と JS を取り出すのはどうすればいいんでしょうか 一応 npm コマンドははいってるみたいですが npm install ってやってみてもどこに何ができてるのかさっぱりわかりません なにを勉強したらよいか?など、超初歩的な質問は可能ですか? アマチュアバンドのスケジュールサイトを作りたいです。 当方、非常に簡単なHTMLの知識はあります。また、アクセスがある程度使えます。 アクセスでwebサイトを作ろうと思ったのですが、Windows serverを入れてしかも重いので滋養的ではないとのこと。そこで、webの知識を勉強しようかなと思いました。 頭の中ではcsvから自動的にHTMLが作成される感じをイメージしています。 たとえば バンド名 AAA 日時X/X 場所 YYY だったら AAA X/X開始 場所はYYY といった感じです。 最悪、昔のi-modeサイトみたいな感じでいいと思います。 さて、ここで質問ですが ・こういうデータベースサイトを構築するのは難しいのでしょうか? ・なにを学ぶべきだと思いますか? 3ヶ月ほどウェbの専門学校へいこうかとも考えております。 >>559 最終目標がそのサイトだけなら、WordPressをいじれば数日で出来る。 とりあえずCSVは使わなくても、CSVを作るより早く記事を投稿できると思う。 それを承知の上であえて勉強したいなら、それも有りだとは思うけどね。 Bootstrap4のFlex(https://getbootstrap.com/docs/4.0/utilities/flex/ )でフォームを作ってるんですが、 以下のようなレイアウトが実現できなくて困っています https://dotup.org/uploda/dotup.org1640182.png form内でそれぞれのinputタグに<div class="col">を使ってやろうとすると、 ブラウザが勝手に</form>を補完してしまって、submitボタンがformタグの外にある状態になり動作しなくなってしまいます どうすればうまくいくでしょうか? ブラウザが勝手に閉じタグを生成するのはお前が自分で閉じタグを書いていないからだろ ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.1 2024/04/28 Walang Kapalit ★ | Donguri System Team 5ちゃんねる