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/ スマホで普通に横位置で撮影した画像の場合はどうなるのかな
画像編集ソフトで EXIF を削除してからアップした場合はどうなるのかな 無料で使えるオーサリングソフトですと何が評判良いでしょうか？
リアルタイムプレビューのあるBracketsが気になっています
GoogleWebDesignやMicrosoftExpressionWebとかも・・・
企業はDreamweverなどの有料ソフトを使う事が多いですか？ >>388
すみません Googleのはバナー広告を作成するソフトなのですね >>388
無料なんだから使ってみりゃええやん。
使いやすいかどうかは使う者のスキルにもよる。 私はメモ帳をオススメしています。
シンプルで使いやすいですぞ。 メモ帳は文字コードがShift-JISで改行コードがCRLFだから絶対使うな なんだかんだでsakuraエディタが猛烈に軽くて良い
IDEが厳しいノートでは未だに現役だ >>392
Windows 10のメモ帳は、Unicode（UTF-16）、UTF-8対応だよ
http://ascii.jp/elem/000/001/520/1520114/img.html
それから次の更新でCRLF以外にも対応する。
Windows 10の「メモ帳」が大幅アップデートの予定。ズーム機能サポートや検索/置換の強化
https://japanese.engadget.com/2018/07/16/windows-10/
> マイクロソフトもユーザーの声に耳を傾けたようです
> ほか、The VergeによればUnix / Linuxの改行コード「LF」と
> macOSの「CR」もサポートしたとのこと。
使わない理由はなくなっていくね。 開発者に何を使えば良いか聞くのは最悪の手
それぞれ技術背景が違うから全員が違う事を言う
自分で試すしかない emmetが使えるかどうかだなあ
だからメモ帳とかはありえない メモ帳はダメ！
BOM 付き、UTF-8 だろ。
BOMなし、UTF-8(UTF-8N)は使えないだろ
Explorer で、フォルダ内のファイルから、文字列で検索しても、
BOMなしUTF-8では、検索できない
BOM付きUTF-8しか検索できないから、
漏れは、WSL でLinux 側から、grep で検索している
BOM付きUTF-8は、色々なアプリでバグルから、使えない
他にも、BOMの有無、改行コードの切り替えをできる、エディタが良い。
タブ・空白の変換とか、タブでずらす機能もほしい <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
<div class="c1"></div>
みたいに適当に重複したクラスがならんでてどれか１つをホバーしたときに
同じクラスの要素全部のスタイルをかえるって HTML5 だけでできますか？
JS使わないと無理ですか？ 👀
Rock54: Caution(BBR-MD5:1341adc37120578f18dba9451e6c8c3b) それだとホバーした１要素だけしかかわらない気がします
.c1:hover ~ c1 { }
とかやれば後ろにある要素は全部かわるけど
同一階層全部ってのは無理なのかな… 順番はかえられないん？
<div class="c1group">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
<div class="c2group">
<div class="c2"></div>
<div class="c2"></div>
</div>
みたいにして個別の要素を absolute なりで表示だけ調整すれば
c1group c2group の hover スタイルつけるだけでいけるが
アコーディオンみたいに hidden input とc＋使って隣接したスタイル変化させるｷﾞﾐｯｸはよくあるけど
あの手法で別階層においたボタンで離れた要素のスタイル変えたいときあるよな 変えられなくはないですけど
労力的にそれならJSでスタイル変更したほうがまだましかなと… >>403
クリックしてよければ親だろうと別階層に離れてようと何でもできるよ
クリックさせたい位置に label おいて
hidden にした input をスタイルかえたい要素の親階層におけばセレクタで好きに指定し放題
ホバーは…
$('.c1').hover(
() => $('.c1').css('color', 'red'),
() => $('.c1').css('color', 'black')
);
でいいんでね？ 画面をナビゲーションと表示領域に分割したくて
<div style="float:left; width:30%; height:100%"></div>
<div style="height:100%;"></div>
ってかくと右側の領域が画面全体になってしまいます
諸事情で親に flex がつけられなくて
右側の中に position: absolute でいろいろものをおきたいので
width 指定せずに右側の領域をぴったり使う方法ってありませんか？
HTML CSS のプロのみなさまよろしくおねがいします ブロック要素って勝手に横幅いっぱいにのびてくれるはずなのに
わざわざ残り幅計算しないと横にならべられないの？
CSSって欠陥言語かよ >>412
flexなら一発だけど、なぜか>>408で禁止されてるのでcalc使うしか無い >>412
＞ブロック要素って勝手に横幅いっぱいにのびてくれるはずなのに
親要素の横幅いっぱいにのびてるじゃないか、仕様通りに
ま、そこがまずいから flex やら grid やら新しい仕様が追加されているんだが calc ってどう使うの？
>>408 で 30% ってかいたけどこれ便宜上適当に幅持たせたかっただけで
実際は文字の幅でかわってくるんだけどそれでも残り幅って計算できるの？ flexなかった時代はどうやって可変長の画像とか横並びにしてたん？ >HTML CSS のプロのみなさまよろしくおねがいします
ここ素人しかいないから 左３０％ぐらいのペインにボタンとかスライドバーとかフォームいっぱいつけて
右残りにグラフみたいなの表示するUIにしたいんだけど
デザインセンスなくても統一感のあるデザインになるいけてるフレームワークとかない？
自分でCSSかいてグラフは chart.js とかつかってもいいんだけど
グラフの見た目とUIのコントローラーの色とかデザインがマッチしてるとうれしい 「css フレームワーク」で検索！
大きなものなら、Bootstrap とか bootstrap はすでに使ってるけど
データの可視化に特化したグラフと UI 含めて統一されたデザインツールがあればなーと bootstrap3までクソだったからなあ
margin -15pxがうざかった >>427
4になって大分マシになったね。これからの発展に期待 >>426
d3.js って調べてみたけどこれ chart.js ＋フォームを連動できるかわりに
アニメーションとかするのに設定がたくさんかかなきゃいけないライブラリみたいな感じ？
ボタンにスタイルがあたったりするわけじゃないからちょっとちがうかも？
bootstrap ベースのダッシュボードテンプレートでおすすめのってないですか？ こういうの使うのはじめてなんだけど
bootstrapみたいにHTMLのフォームレベルでクラスつけるだけで
勝手にイケてるデザインやJSのエフェクトみたいなのができるの？
それとも部品レベルでメソッド１つかくだけで部品１個分のHTMLがはかれたりするの？ class指定するようなタイプじゃなくて
全要素にたいしてスタイルが適用されてる
ファイル読みこむだけでなんとなくデザインしてくれるフリーのCSSありますか？ それ導入すると結局打ち消しcssだらけになるんだぜ・・・
jqueryUIとかとりあえず入れてみては 便乗で質問なんですが
bootstrap上のフォーム D3.jsのグラフ LeafLet.jsで地図 を表示させてるんですけど
この３つにイケてるデザインのあたるダッシュボードテンプレやフレームワークないですか？
地図かグラフどっちかだけでもいいけど
ダッシュボード独自のウィジェットに書き直すのがいやでずっとデザインあてるの放置してる こんばんわ>>202です。
ちょうど一ヶ月前に色々教えていただきました
あの時はありがとうございました
あれからずっとWEBサイトを作りました
WEBサイトと宿題以外何もやってません
http://www.pafumo.com/
この感じでどうでしょう？ なにこれすっごいいいじゃん
こういうのもっとないの？
フォームとかにもっとかっこいいデザインあたるやつ >>436
微妙〜
・全体的にpaddingが少ない
・selectの挙動が変
・イメージ画像が変。なんで田舎なのかわからない。 こういうのもっとデザインセンスある人がいっぱいくばっててもいいのにね
なんでないんだろう ・そもそも配る理由がない。
・陳腐化が早い
・今更cssを配布しても有名にはならない
・最近は素人でもスキルが上がったので、必要性も薄れている >>441
自分が納得するデザインにこだわらなければ
いくらでもあるだろ >>436
褒めてほしいなら褒めてやろうか？
『高校生にしては、よくできてるぞ』
こんなん誰でも作れるわ Web制作のアルバイト雇うとして
経験が少ないけど顧客との打ち合わせからデザイン、コーディング等一通り並でできるやつは
時給いくらが妥当だと思う？
完全に1人に任せるのは少し不安ってくらいの能力で デザインもサーバーもバックエンドもフロントエンドもフルスクラッチできる俺でさえ時給1800円
参考にしてくれ >>447
妥当かどうかなら、それと同じことができる正社員と同じ金額だろうね
なぜなら安くする理由が何も書いてないから
せめてなにか失敗してもバイトの責任にはなりません
ぐらい書いてくれないと
あとバイトでも有給あるからなｗ 勤務地にもよるだろ
東京と地方じゃ2〜300円変わる Webページで、音声データを公開したいのですが、
録音・保存されずに聞かせたいのです
何かいい方法は無いでしょうか >>451
100%は無理だからどこまで保護するかだね
とりあえずストリーミングにしとけば一般人には手が出せないでしょ
さらに暗号化すれば詳しい人じゃないと無理かと
DRMとかもあるけど今時なあｗ
まあぶっちゃけスピーカーの前で録音すれば防ぎようがないけどｗ ストリーミングだとF12で簡単に落とされてしまうかと思いまして… >>455
？
プログレッシブと勘違いしてない？
ニコで言うと、ニコ生がストリーミング、ニコ動がプログレッシブ
ニコ生の動画をF12で簡単に落とせる？ 完全に勘違いしてました、なるほど・・・
ストリーミングにしとけばツールなしじゃ無理って感じです？
ミキサ出力にノイズ噛ませるのってあれどうやってるんですかね・・・ 最近は拡張機能がワンサカあるから数秒で使えるものが見つかるんだよね・・・
F12でやることはbackgroundの画像落としたりとかそんな程度になってしまった そもそも、音楽と効果音を同時に鳴らしたり、
複数の効果音を同時に鳴らすことが出来るのか？ ライン出力とミキサ出力判定して音量とノイズ変えてるんですかね？
録音したやつ増幅してみるとかすかに元の音も聞こえるので、基本かぶせてるだけなんだとは思うんですけど、
ミニジャック付きの録音機とかは持ってないので検証のしようがないですね…
分かることは、あの方式ならかなり強固に守れそうってことくらいですねぇ いままで HTML と CSS 直がきしたしたことなくて
はじめて bootstrapっていうの使ってみてるんだけど
これHTMLがクラスだらけになるの正しいの？
たとえばサイト全体の card のパディングちょっとへらしたいとおもっても
毎回 class="card-body p-1" とかをかくのがただしいの？
CSSに１言
.card-body { padding:0.25rem; }
ってかけばすむ話だけどそうするとbootstrap無視してるみたいになるし
$('.card').addClass('p-1'); ってかくのが一番スマートなのかな… > これHTMLがクラスだらけになるの正しいの？
クソだよ。bootstrapなんて使うもんじゃない
百歩譲るとしたら、sass（scss）と組み合わせて使うことぐらい
組み合わせて使えば、HTMLがクラスだらけにならなくてすむ >>461
フレームワークってのは「誰が書いても似たようなものができる」という大きな長所もある
一人で開発する時は、逆にこれがネックになったりするんだよな >>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’ の１行かいて bundle install した時点で
require とかの変更しなくてもこうなってました
エラーメッセージ検索しても人によっていってることばらばらだし
Rails の設定が特殊なのか SASS bootstrap どれが悪いのか
これ以上はちんぷんかんぷんですわ
フレームワーク使うのってほんと大変ですね…
こんなので１日使うぐらいだったら 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のテンプレートを作ってるだけじゃないですか？ ■ このスレッドは過去ログ倉庫に格納されています
