Webサイト制作初心者用質問スレ part253
初心者だろうが誰だろうが、
まず >>>■ 検索してから ■<<< 質問すること
ネタ・煽り・自演・荒らしは完全放置
【質問時の注意】
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サイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/ Error establishing a database connectionってのが頻繁に表示されるんですが何故ですか？
再度読み込みすると普通に表示されます。
スターサーバー使ってます。 ネットで調べてもよくわかりませんでした。データベースとかはいじってません。 サーバー再起動なんてできるんですか？
スターサーバーのページを見てもよくわかりません。 >>626
初心者をからかって安寧を得る人もいるんだよ…
レン鯖でしょ？再起動なんて出来んよ
んで、そのエラーが出たり出なかったりする
っつーことは、DB鯖が不安定なんだろうな
安いorタダのレン鯖ではよくあること
みんなが普段使ってるようなサービスやサイトの
サーバの戦闘力ををZ戦士とすると
安レン鯖はピラフ様くらいしかないのよ >>626
あとエラーは必ずググるようにするといいよ
そのエラーだったら、ググると
WordPressが出してるものだとすぐわかる
つまり、データベース弄ってないつもりでも
使ってはいるわけですよ >>628
そうなんですか、ありがとうございます。
スターサーバー、安くていいと思ったんですけど…微妙なのですね >>630
そこがどうかは知らんけど
一般的にレン鯖ってのはコンピュータを
たくさんの客でシェアして使ってる
だから自分1人に割り当てられるスペックは
PCやスマホより遥かに遥かに低いと思っていいよ
安定感欲しいならクラウド使ったらいいよ、AWSとか
今は初心者向けにAWSでWordPress使う説明とか
いっぱい転がってるし
どうせ大したアクセスないでしょ？
なら料金も大したことないよ >>631
クラウドサーバーというのがあるんですね、知りませんでした。ありがとうございます。
>>632
プラグインは6個いれました。変なのはいれてないと思います。 >>633
仮想コンピュータを貸してくれるのよ、クラウド
仮想なのでスペックは自由に決められる
足りなければいつでも足せるし、多過ぎれば減らせる
んで月額とかではなく使ったぶんだけ払えばいい
初期費用もかからない
すんごいスペック盛っても
アクセスが全く無ければお金かからん
切ないけど ちょっと乗り換えも検討してみます。
頻繁にエラー出て困るので。
ありがとうございました。 同じような症状の人がいないか自分の鯖のスレやwordpressスレ等もチェックするといい
鯖スレ覗いたらみんな静かでただのおま環とかよくある 文字色を一文字ずつ変えようと思ったら
spanで囲って個々に指定するしかないですよね？
ソースがぐちゃぐちゃでスマートじゃないので、なにか良い方法があればと思いまして
文字サイズ全て同じならbackground-clip: textでもいけると思ったのですが
文字サイズも変わるとなると。 >>638
>ソースがぐちゃぐちゃ
この感覚を変える方が早いと思う >>638
ぐちゃぐちゃ？
1番分かりやすいじゃないか サイトなんて消耗品なんだからグチャグチャでいいわ
重くなるワケでもないんだし
5kbを削ってた時代なら削ぎ落としたけども >>638
最近は生のHTMLを書くことも減ってきてるから
Pugとかで、元ソースの可読性が高くなるように
工夫するのはありかもしれないね WordPress初学者です
有料テーマのSwellの購入を検討していますが、
初っぱなから有料テーマで初めても特に問題ないでしょうか
先に無料テーマで慣れてからの方がいいでしょうか？
（購入予算はあります）
ちなみにレンタルサーバー（ConoHa WING）を契約し、
WordPress＆主要プラグインのインストールと
初期設定を済ませた段階で、実制作には手を付けていません
テーマは現在Cocoonが入っています >>644補足です
個人事業の営業用サイト（料金表、FAQ、問い合わせフォーム、etc...）
＋サブディレクトリでブログを作りたい、と思って始めました breadcrumb navigation、breadcrumbs、パンくずリスト ありがとうございます。名前聞いたことあったけどわからなかったので助かります。 >>646
ありがとうございます
勢いでSWELL買ってしまいました
さっそく作りはじめます！ こんにちは
https://maker.prairie.cards/
上記のようなデザインメーカーを運用したいのですが詳しく記述があるサイトなどご存じの方がいたら教えていただけませんでしょうか >>651
このサイトの使い方？それともサイトを作る側？ >>652
ご返信ありがとうございます
作る側です >>653 クローム拡張機能のWappalyzer で使われてるフレームワークとかわかるよ。あんまり詳しくなくてすまそ Next.jsで作成されてるけども、質問の書きぶりからして
調べて作ろうとしても無理なんじゃないかって気が Ruby on Rails でも、転職用のポートフォリオでは、
React/Next.js, Vue.js,
Bootstrap, Tailwind などが多い
本格的なプロの話だけど お手数ですが教えてください
例えば病院で、内科、小児科併設の場合、完全独立ではなく相乗効果が期待できる場合、
1）内科用ホームページ
2）小児科用ホームページ
を用意したいのですが、SEO対策などを考えてアドレス等ページの設定をどうするのが理想でしょうか？
A）トップページを作り、1画面で左が内科、右が小児科で、わかりやすくリンクを貼る
という形にして、
1）内科
2）小児科
へと誘導するのが良いでしょうか？
この場合専用ドメインを用意してトップページを作り、内科小児科双方相乗効果で関係があるので、
サブディレクトリーでそれぞれ作ればよいでしょうか？
この場合、内科/小児科のページには、それぞれTOPはこちら、小児科/内科はこちらとわかりやすいリンクを張る予定です。
ただ、この場合TOPページはあまり見られず、内科、小児科各ページだけあればよいような気もします。
他方SEO対策を考えると、1ドメイン2ページまでしか基本googleの上の方に表示されないといいますので、
例えば内科を単純なメインドメイン、小児科をサブドメインにする方が良いでしょうか？
勿論相互にわかりやすいリンクを張るとしてです
2ドメインを用意して、内科と小児科を独立に用意するのは、リンクを張るにしてもSEO対策の効果が相互に出ないのでNGですよね？ 病院ってSEO気にするほど
ご近所に競合がいるものなのん？
そんだけの規模でやりたいってことは
わりと大病院なんでしょう？ 地図上の表示を考えるなら
病院で1ドメイン、科の違いはサブドメインまたはディレクトリ別の方が
簡潔でよろしいんじゃね 利用者の立場からしたら
別ドメインに飛ばされようとするとちょっと怖いわ とあるサイトで簡単な趣味のサイトを公開してるんですが、最近あなたのサイトに興味があるからソースコードを共有してほしいと言われましたがその方法がわかりません。
なにか簡単にコードを共有できるような方法はないでしょうか？ とあるサイトで簡単な趣味のサイトを公開してるんですが、最近あなたのサイトに興味があるからソースコードを共有してほしいと言われましたがその方法がわかりません。
なにか簡単にコードを共有できるような方法はないでしょうか？ 開発ツールのショートカットを紹介するのは
ちょっと違うと思うぞ
JSやらが動いた結果のHTMLだから 誰もJSやらPHPやらが動いてるとは言っていないがｗ
まぁ、それはさておきファイルを共有したいならクラウドでも使って共有すりゃいいし
ソースの一部ならjsfiddleやcodepenでもいいし
色々なサービスがあるから、いくらでも方法はあると思うんだが「簡単に」と言われてもなぁ
話に具体性が無いから何が簡単で何が最適な方法なのか回答に困るわな bootstrapのmodalで、ページに3つほどボタンがあってクリックするとそれぞれモーダルでvimeo動画（iframe）が開くというのを作ってるんですが
https://getbootstrap.jp/docs/5.3/components/modal/
モーダルを閉じても音声再生が続いて、別のモーダル動画再生すると音が重なるという結果になりました
モーダルを閉じた時に、音声再生を止める（一時停止させる）にはどうすれば良いでしょうか？
閉じるボタンに onclick="location.reload();" としてページを再読み込みして止めることは出来たのですが、この方法は動画を停止した時点がキャッシュに残らないので使用したくありません。 >>669
それは、モータルを非表示しているだけで
Vimeoのプレーヤーは見えないどこかに残ってるかる
Vimeoに限らず動画扱うときあるあるで
モーダル閉じたらプレーヤーを止めなければならんの
で、Bootstrapのモーダルは
show、hideなどのイベントが用意してあるから
https://getbootstrap.jp/docs/5.3/components/modal/
それに引っ掛けて
VimeoのoEmbed APIを使って
https://developer.vimeo.com/api/oembed
player.api('play');
player.api('pause')
みたいにすればいいと思うよ
このplayerは、Vimeoのインスタンスね >>670
ありがとうございます
全然分からずw関連キーワードでいろいろ調べているところでございます。。 自作の動画再生モーダルは親の中身をまるごと消してる >Bootstrapのモーダルは
>show、hideなどのイベントが用意してあるから
そんな事まで考慮されているとは、すごい！ >>671
雑な説明ですまんかった
簡単なHTMLとCSSくらいはわかるか？よな？
モーダルといってもブラウザの中で表示される以上
HTMLとCSSで出来てるわけよ
閉じてる時はdisplay: none
開いてる時はdisplay: blockってしてる
見た目が変わってるだけ ← これ大事
このモーダルの中に動画プレーヤーがあるわけだけど
「動画が再生される」とか「音が鳴る」とかは
見た目とは関係ないことじゃん？
だから一度再生を始めたら
モーダルを閉じる、つまり、見た目だけ非表示にしても
再生が止まることはないわけ
これが、閉じても音が鳴り続ける理由
つづく >>674 つづき
先述の通り、スタイルのdisplayプロパティの値を
none / blockと切り替えなければならんのだが
HTMLにそんな機能はない
なのでBootstrapは
JavaScriptでそれを行うわけだけど
「開くボタンをクリックしたら、block」
「「閉じるボタンをクリックしたら、none」
というように「クリックした」というきっかけで
none / blockの切り替えをしなければならん
このきっかけのことをイベントって言う
イベントはデフォでいろんな種類が用意されてるけど
自分で作ることもできる
そこでBootstrapはモーダルのJavaScriptに
「モーダルが開いた」「モーダルが閉じた」
というイベントを用意してるから、これを利用して
「モーダルが開いたら、再生」
「モーダルが閉じたら、停止」
というJavaScriptを書いてやればいいわけ
つづく >>675 つづき
あとはJavaScriptで
Vimeoの「再生」「停止」のやり方がわかればいい
Vimeoに限らず、埋め込み動画プレーヤーは
これもまたHTML/CSS/JavaScriptで作られていて
万人向けに配布されてる
このような一塊で機能するのプログラムのことを
コンポーネントって言う
多くの人が利用するからには、今回のように
「JavaScriptから再生したい、止めたい」
という要望も、少なからず出てくる
それは想定済みなので用意がしてある
コンポーネントが持つ、対外向けの用意のことを
APIって言う
Vimeoは、埋め込みプレーヤーのAPIに
oEmbed APIという名前をつけている模様
これはWebページ埋め込みプレーヤー以外にも
アプリの中で動くプレーヤーのAPIとか
サーバ上にある動画のAPIとか、複数あるからだと思う
つづく >>676 つづき
JavaScriptでVimeo埋め込みプレーヤーの
APIを叩けば良いことはわかったが
肝心のVimeoにアクセスできなければ意味がない
つまりJavaScriptで
ページ内にある動画プレーヤーを特定する必要がある
ページ内で要素を特定すると言えば、id属性
Vimeoを埋め込んだiframe要素に
<iframe id="player"
のようにid属性を追加すれば
JavaScriptでは
const myPlayer = document.querySelector('player')
とすることで、この要素を取得することができる
このmyPlayerが、iframe要素を参照してる
肝心のVimeoにアクセスできた
あとはVimeoのAPIの使い方だが、先に書いた通りで
再生は
myPlayer.api('play')
停止は
myPlayer.api('pause')
ってすればOK
酔っ払った勢いでアホみたいにたくさん書いたが
すっごい早口で喋ってるように読んでくれ いっそ再生位置を取得してページを開き直しても再開できるようにしたれ >>677
id がplayer なら、# を付けて、#player じゃないの？
>const myPlayer = document.querySelector('player')
player -> #player >>681
長文書いたおっさんですがその通り！
やっぱ脳内コーディングはいかんね… CSSのflexについて質問です
うまく伝えられるか不安だったので図を描きました
https://i.imgur.com/7sZSaKE.png
flexアイテムの幅が可変で
flex-wrap: wrap としたときの
右の空きを詰めることは出来るのでしょうか？
出来るならやり方を教えてください！ そりゃできるだろ
flexの定義は入れ子で設定できるからな ここのやつら具体的に教えることを嫌がる役立たず老害ばかりだから
chatGPTにでも聞いたほうが早いよ そもそも親コンテナの幅は子アイテムの幅の合計で計算されてるからなぁ
JavaScript使わないとCSSだけじゃ無理じゃね？
自分ならlast-child以外にflex-grow: 1;指定するとかで妥協する 教えてクレクレ厨って生きてる意味ないよね、馬鹿親の顔が見たいわ flex-direction: row-reverse; >>689
そもそもgridだと図のようには並ばんだろ
>>691
それだと結局同じことになるんじゃね？
コンテナの幅が足りなくなった所で
アイテムが折れてwrapするんだから floatは絶対使わないより
ここぞという時に使ってもいいと思うの おーいけそう
なんか、万策尽きた終盤に
初期機体が出てきた感じだなw floatしか使わんけどあかんの？
サイトなんて出力されればなんでもいいだろテーブルレイアウトですら見てる人には関係ないし >>697
いかんことなんて何もないよ
ただ多くのシーンにおいては
flexの方が使いやすいってだけ
そもそもが、ボックスを並べるために作ららたプロパティだから flexとgrid以前のCSSには
物を並べるための仕様がなかったので
なんとか用を果たせる程度だったんよ、floatとかも
あるひとつのレイアウト単体でなら問題なくても
現行のアトミックなページの作り方だと
後々面倒くさくなる
なので、結果として横に並ぶことには
何を使っても何も問題ない
でも、その結果に至る過程
つまり我々が制作するシーンにおいては
あまり多用しない方が、得るものが多い
みたいな感じ 自分のサイトを、自分の作りたいように作って
自分で妥協点を決めてよければ、あんまり関係ない話
でもそうではなく
請け負いで無数のサイトを作っていたり
コンポーネントとして万人向けに配る物を作る
みたいな人には刺さる話だ いかん
今日は飲んでないのにまた沢山書いてしまった… >>683の質問をしたものです
結局floatでもダメでした
でも、アドバイス頂いたものを自分で調べた過程で
CSSが内部でどのような計算を行なっているのかを
学ぶことができました
今まで、経験的に出来るかな？と思う程度だったのが
これで、原理的に出来ない！とわかるようになりました
ありがとうございました 青のBOXをfloat:rightにしてmax-width設定すればいいだけじゃないの？ >>705
max-widthになんと書けば良いですか？ >>706
固定幅の親BOXの幅 - 固定幅の赤ボックスの幅 クラスは1点、IDは10点
昔、戦争の頃にはそうじゃったと婆ちゃんがつぶやいていたなぁ >>707
先に貼った図ですが
https://i.imgur.com/7sZSaKE.png
それだと上図の3つ目になるだけではありませんかね？ >>699
そうそう後々の保守運用後に
ここあーしてくれ、こーしてくれ
ナビなくなりまーすみたいなことが多々あるからな >>710
すまない。。あなた様の言う通りでございます。。。 >>708
戦前はのう
要素が1点、classが10点、IDが100点
と言われておったんじゃ
そんで要素11個とclass1個で比べる天邪鬼な奴がいると
「要素もclassも10個以上は無効！と
無茶苦茶なこと言われておったんじゃよ >>699
>なので、結果として横に並ぶことには
>何を使っても何も問題ない
>
>でも、その結果に至る過程
>つまり我々が制作するシーンにおいては
>あまり多用しない方が、得るものが多い
これ至言ですな
floatに限らず何ごとも >>714
「耐え難きを…耐え、忍び難きを…忍び」
あぁ玉音放送とCSS1ドラフトの始まりを思い出すわ 
