Webサイト制作初心者用質問スレ part248 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
初心者だろうが誰だろうが、
まず >>>■ 検索してから ■<<< 質問すること
ネタ・煽り・自演・荒らしは完全放置
【質問時の注意】
1. 質問する前に >>2 にも目を通すこと
2. メール欄に何も入れないことを推奨 （IDを出して騙りを防止するため）
3. 質問者が返信する際は「最初に質問したレス番号」を名前欄に入れること
4. ブログについてはブログ板で質問すること
●ブログ板 http://peace.2ch.net/blog/
5. SEO、アドセンス、検索サイトに登録しても検索結果に引っかからないといったことは SEO関連スレで質問すること
http://find.2ch.net/?STR=seo&;;TYPE=TITLE
6. アクセス解析については該当スレで質問すること
http://find.2ch.net/?STR=%A5%A2%A5%AF%A5%BB%A5%B9%B2%F2%C0%CF&;;TYPE=TITLE
7. 製作ソフト（Dreamweaver DW、ホームページビルダー、等）を使用した場合の質問は該当スレで質問すること
8. CGI、PHP, Perl, Ruby 等のプログラミング関連や CMS, Wiki は Webprog板、またはこの板の該当スレで質問すること
●WEBプログラミング板 http://kanae.2ch.net/php/
9. JavaScript はこの板の該当スレで質問すること
10. 画像作成ソフト（Photoshop 、Illustrator、等）については該当スレで質問すること
11. HTML, CSS, CGI, 制作ソフトなどのどんな本を買えばいい？といったことは書籍についての質問スレで質問すること
http://find.2ch.net/?STR=%CC%F2%A4%CB%CE%A9%A4%C4%BD%F1%C0%D2%A4%CF&;;TYPE=TITLE
12. 質問内容を吟味して、正しい日本語で第三者が読んでも分かるように質問を書くこと
13. 間違った回答をする人もいることに注意
【前スレ】
Webサイト制作初心者用質問スレ part247
https://echo.2ch.net/test/read.cgi/hp/1488192984/ 忘れてました！
■散々既出な質問
Q1. アップロードしたファイルが表示されません
A1. ・ブラウザのキャッシュを削除してから再度確認すること
・ファイルがアップロードされているか、ファイルのパス（絶対パス？相対パス？）があっているか確認すること
・画像などのコンテンツなら、xHTMLソースで指定したファイル名と拡張子の大文字・小文字の一致を確認すること
・画像であれば「バイナリモード」で転送されたか確認し、そうでなければテキストモードに設定を変えること
Q2. ホームページを作成しようと思いソフトウェアの購入を検討しています。おすすめのソフトは何でしょうか？
A2. 体験版があればそれを使用することを勧めます
個人で好みが違うので、一概に「これ」が良いと推奨することはできません
あなたが購入を検討している物を天秤にかけ、自分がしたい事が実現できるような物を購入すれば OK です
Q3. 「http://www.〜.com/」で○○したときのような効果を出すには、どうしたらいいのでしょうか
A3. ソースを見て理解する努力を惜しまないことがあなたを救います
初心者だからといってソースを理解する努力をおしめば、期待する効果を実現することは難しいでしょう
Q4. あるURLにアクセスしたとき、携帯とPCで表示するページを変えたいのですが
A4. 「携帯 振り分け」などのキーワードで検索してください
また、「レスポンシブ」という単語もあなたを救うかもしれません
Q5. 正しく書いたつもりなのですが、うまく表示されません
A5. 油断は禁物です
HTML の文法を専用サイトでチェックしてみましょう
http://validator.w3.org/ https://jsfiddle.net/v71pwuza/
初めてテーブルを作ってみたんですが、今風の作り方とか改善できる箇所のアドバイスをください
<tr>タグの中に<td>タグが3つ入る場合は、どうしてもcolspanで調整するしかないんでしょうか
table難しいです ポートフォリオをアップするのにおすすめのサービスは？ >>6
自分でページ作れよ。
面接のときに質問されたらオフラインでみせろ。
ノートと紙に印刷してもってこい。
他所のサービスつかってたら鼻で笑われるぞ。 >>5
特にないと思うよ
レスポンシブのこと考えて
<table>要素以外でも同じこと出来るようにしとけばいいんでね？ >>9
そんなに手間でもなかろう？
サイトのタイトル（リンク）
サイトの簡単な説明など
をリストにするだけじゃん？ >>10
自製は手間ではないだけに、あえてポートフォリオサービスを使っている人がいるので、別の利点があるのかと思ってます。SNS的な使い方ができることかな >>11
フリーランスで生きてこうと思ってて
広く知ってもらう目的ならそういうのはありだと思う
どこぞの会社に就職しようと思ってんなら
そうでもないかも
自分のところにそういうの送られてきたら
他の人に目移りしちゃうかもｗ 自前でサーバーにあげるときは、構築したウェブサイトにサブドメインをアパッチで設定してポートフォリオページを作っておけば好印象。
サーバー管理もできる人だとすぐにわかるからな。 自分手打ちでそれっぽいの作れる位だけど
そういうの売りにしたほうがいいんかな？DWあんまり好きじゃないのもあるけど 面接時にポートフォリオのことで聞かれるはずだから、見せる場合はノートなどでオフラインデータ表示と紙に印刷した二種類。
繋がらないことを考慮しておけ。
見やすいページが重要で複雑な構造化はいらないよ。 なんならgithubにあげてくれてもいいのよ
タスクランナーつかってhtml/css/js以外で書いてるなら
ソースファイルも見たいし >>8
お返事が遅れて申し訳ないです。
レスポンシブなんてのもあるんですね。
勉強することが山積みですが頑張ります。
ありがとうございました。 日本語を入力中に、
強制的に確定（Enterを押した場合と同じこと）
もしくは入力をキャンセルさせる（ESCを2回押したような処理）ことは可能ですか？
javaScriptで出来ないかと思っています >>19
可能だよ
質問はJavaScriptのスレでどうぞ
>>1
まずはこちらを読んでから質問しましょうね >>20
できるんですね、ありがとうございます
スレチだったようですすみません… 特定の子をもつ親要素を指定する方法ってまだ実装されてないんですか!?
ベンダープレフィックス付でもいいのでください！
はい！ positionについて勉強しているのですが、分からないことがあるのでアドバイスをください。
https://jsfiddle.net/3ssqyaLw/
↑のような状況で2つ目のdivを1つ目のdivの下にピッタリと付けることはできるものなのでしょうか。
補足として、1つ目のdivは高さが変わります。
なにかコツみたいなものがあればアドバイスをください。
よろしくお願いします。 ttp://a-cherry-blossom.com/wp-content/uploads/2015/05/seo-e1432693964807.jpg
こんな感じでリンクがゴチャゴチャしてる奴ってなんていう名前なんですか？
内部リンクで検索してたら気になっちゃいました。 >>25
できません
大雑把に言うと
position: absolute; にした要素は親要素から引き剥がされ
元いた親要素の計算からは外れる、と思っておけばOK >>28
親にposition: relative;記述していても？ >>27
それです！
モヤモヤが晴れました！
ありがとうございまっす！ >>28
レスありがとうございます。
やっぱりできないですか。
勉強になりました。
ありがとうございます。 >>29
いえす
要素がabsoluteになった場合、その絶対基準点は
親要素を辿って最初にstatic以外になったもの、もしくはbodyになる
これをoffset parentて呼ぶ
子要素がabsoluteになった場合の親要素は自分がoffset parentであったとしても
その子要素の位置と大きさを計算できなくなる
だからこの子要素に隣接するstaticやrelativeな要素は
この子要素を無視して配置するしか出来ないのです W3Cのaddress要素の使い方って合ってるんかね >>34
<address id="w3c_signature"><a href="http://lists.w3.org/Archives/Public/site-comments/";>Feedback</a></address>
これのことなら合ってるよ
address要素は直近の親要素かそのページに関する問い合わせ先を表す要素
リンク先がw3cメーリスのアーカイブで、問い合わせはメーリスで出来るからOK >>35
レスThanks！
みんなはaddress要素って使ってるのか気になるけど勉強しまっす！ PCSP別URLのサイトの運用をしているのですが、Googleで検索するとPCのページしか引っ掛かりません。
こういうときって一般的にはどう対応するものなのでしょうか？
JSでデバイス判定してSPページにリダイレクトですか？
またalternateやcanonicalの記述をしていないのですが、これらを書けばGoogleが自動的に出し分けてリンクを繋いでくれたりはしないのでしょうか？ bodyにfont-sizeを設定しなければいけない場合はアクセシビリティ？を考えると1emや100%のような値が妥当なのです？ >>41
良いと思うよ
「指定しなければならない理由」に依るとも思うけどね >>42
レスありがとうございます。
理由と言えるほどではないのですが、
fontのショートハンドだとfont-sizeは必須項目のようなので気になっていました。
ありがとうございました。 中身・コンテンツ部分は、可変にする
一方、margin, padding など外側の部分は、固定でもよい そういやfont-sizeの初期値はmediumだけど
一般的なブラウザだとmedium=1em=100%=16pxってことなんかね 商品写真の背景を消して商品のみくりぬく事をなんと言いますか？
切り抜きかと思っていたのですが、切り抜きは背景を消す意味を指さないようでして 普通に切り抜きとか、トリミングで通じるんじゃないの >>47
photoshopの切り抜きツールのように
切り抜きというと単に500×500ピクセルの写真を200×100ピクセルに切り抜く事のみを指しているようです。
WordPressの写真切り抜き機能やスマホアプリもその事を指しているので、
切り抜き、トリミングには背景を消すという意味は含まれてないようですがまあ通じるならいいのかな トリミングは矩形の切り抜きだけど、
普通切り抜きって言ったらPhotoshopのパスツール使ったような自由曲線のクリッピング。 >>46
プロの間では画像の切り抜きと呼んでいます。
略して切り抜き。
ちなみにトリミングは四角形をベースにした選択領域以外をカットする下位技術のことです。 >>45
body {
font-size: 62.5%;
}
これで、ブラウザのデフォルトの16px を、10px にできるから、
1em = 10px で計算できるから、分かりやすい サーバから送られてくるHTTPヘッダーについて質問なのですが、
Content-Typeヘッダは、必ず頭が大文字で送られてきますか？
それともサーバの実装によって、全部小文字であったり、cONteNt-TYPeみたいな可能性もあるのでしょうか？
cONteNt-TYPeをContent-Typeと同一にするのか、別物にするのか、ブラウザ側はどう解釈するのでしょうか？ 下のサイトに書いてあるようなコードのリストに線を引きたいのですが、正しい線の引き方がわかりません。
ul要素にborderを設定したり、li要素にborderを設定したりしているのですが上手く引けません。
詳しい方、教えてください。
https://jsfiddle.net/p6wujznu/ text-decoration: underline >>59
できました！
borderではダメだったんですね。
勉強します！
どうも、ありがとうございました。 自分のホームページのフォントがgooglechromeだけ、すごい字が小さく映るようになったんだが。
先週までふつうだったのにどうしたんだろ。
そういうことってありますか？ chrome今入ってないしメインfirefoxだからfirefoxでの話になるけど
ctrl押しながらマウスのコロコロ動かしたとかしちゃったんじゃね
サイトごとに設定が保存されてるかもしれないから表示リセットすればいい
firefoxだと表示→ズーム→リセットなんだけどchromeもそれに類するやつがあるはず >>61
windowsならブラウザ表示上で
Ctrl + 0
コントロールプラスゼロ
押してみれ コントロール+０したけど無理でした。
自分のホームページの字だけがおかしいです。何か触ったつもりないのに。
あとのサイトは普通に大きい字です。クロームに嫌われたか。IEは問題なく大きいし
ホームページビルダーで作成中の表示もおおきいのに。 >>64
まずはここにbodyのcssコード載せてみしょう CDN って使ってる？
結局どっちにすれば良いかわからぬ >>65
BODY{
margin: 0;
padding: 0;
text-align: center;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
color : #202020; /* 標準文字色 */
background-position: top left;
background-repeat: repeat-x;
min-width: 900px;
font-size : 95%;
}
/* Safari用ハック 文字サイズ調整 */
/*\*/
html:\66irst-child body{
font-size: 70%;
}
こんな感じになっています。
何かわかります？？ >>68
¥66 は何だ？
普通に f と解釈されて
font-size: 70%; が効いてくるんじゃないか？
あと /*¥*/ は何だ？ >>69
safariの部分削除したほうがいいんですかね。
スタイルシートいじるのが怖いんですが。 >>70
何で safari だけ 70% にしてるかわからないと答えようがないような
怖いならページ複製して試せば？ レス遅れて申し訳ない。
font:100%/1.4 font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
今でも使われている定番の書き方です。
69さんの指摘する箇所が原因かもしれません。
基本bodyで挙動変動はほとんどないので一度試してみてください。 >>72
ありがとうございます。
試してみたところドンピシャでした。
safariの部分削除したら元通りになっています。
古いホームページビルダー全部そんな感じになっているみたいです。
文字がしっかりと大きくなりました。
本当に助かりました。ありがとうございます。 例えばbodyのfont-sizeに1.23456789emを設定したとしてChromeとIEで少しずれるのですが、これを揃える術はあるのでしょうか。
やはりブラウザの仕様上できないのでしょうか。
詳しい方、お教えください。 小数点が出るとブラウザごとに切り上げるのか、切り捨てるのか、四捨五入するのかバラバラだもんな
統一してほしいわ 皆さんはベンダープレフィックスをどのくらいの頻度で使いますか？
参考に聞かせてください
ｵﾅｼｬｽ >>78
msのosサポート状態で見極める
あとはログみて判断だな font-sizeをpxとかの絶対値で指定するとアクセシビリティとか古いIEとかでアカーンっていうけど
拡大縮小はブラウザでできるし今はそこまで重要じゃないのかなってふと思ったけど
他にも理由があるのかな 経済板のまとめホームページをつくりたい
無料サバ考えてるがどこがおすすめ？
有料サバも探したけど無料からでいいよな？
何か問題ある？ >>74
見てるかわからんけど
どんな風に解決したのかkwsk 游ゴシック使うとIEでずれますが、このクソブラウザはこのまま一生調整する気がないのでしょうか？ >>86
そういう局所的なシステムにしかないフォントを使おうとする思考が理解できない >>86
そんなにズレるかね？
ウィンドウズ版chromeでカスれるのはわかるけど
あと局所的ってほどでもなかろう
サイトにもよると思うけど半分くらいの人にはあるんだから Adobeカラーホイールの表示がおかしいの俺だけ？ クロームのフォントサイズの設定にある
・極小
・小
・中（推奨）
・大
・極大
はそれぞれどのくらの倍率なのですか？
検索が下手なのかヒットしませんでした。
どなたか教えてください。 現在、CSSを勉強しているのですが、↓の例のようなPタグを高さ100pxの上下左右の中央寄せにできる方法で最短なのは「line-height」と「padding」で合っていますか？
他にも良い方法があればアドバイスをください。
https://jsfiddle.net/wc4b8mkt/
よろしくお願いします。 >>95
line-height:100px; text-align:center; ※1行の文字列のみに限る
padding:1em 0; text-align:center; ※複数行可だけどpの高さは内容または設定値に依存
一番楽なのはこの２つだと思うけど状況によって使い分けになると思う
他の方法だとpをtableのセルのように動作させる方法で
display:table-cell; vertical-align:middle; text-align:center; height:100px; width:200px;
※高さと幅を指定する必要がある
その他でpをdivなど他の要素に入れる必要があるけど
親の方にdisplay:table-cell;text-align:center;vertical-align:middle;
pはdisplay:inline-blockなどとして似たことができる
これはp自体の位置を上下左右中央にできる＆複数のpを横並びにできるなど利点がある
他にpositionやmarginを使う方法とかあるけど最近はflex使うことが多いかな >>95
こんなのどうよ
ベンダプレフィクスで長くなったけど
flex使っただけ
https://jsfiddle.net/swhw18xm/1/ ツイッターのタイムライン埋め込もうと思うんだけど
横スクロールで表示する方法ない？ >>98
HTMLでペッと貼るだけのやつはどうしようもない
アプリ登録してAPI叩いてデータとってきて自分で整形すればどうとでもなる ■ このスレッドは過去ログ倉庫に格納されています
