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
http://echo.2ch.net/test/read.cgi/hp/1488192984/ >>743
ありがとうございます
アドバイスも参考にさせていただきます
さっそくチェックしてきます メジャーなサイトのソースを見ると、
先頭や先頭から数行まで下のような感じに空行だったりするのですが、
1
2
3 <!DOCTYPE html>
これは単にCMSとかが吐くコードによるもので、
特に意味があるわけではないですよね？ >>742
15年前と同じでいいと思うよー
目の前に広がるネットに参考になるサイトはゴロゴロしておろう
それらを見て学べばいいのよ 5月27日 記事A
5月27日 記事B
12月10日 記事C
12月10日は5月27日に比べて文字が多いのでテキストだとデザインが崩れます。
なので日付(A)と記事(B)の部分で要素を分けて、日付をwidthで固定しようと思います。
table以外でマークアップ的にはどうするのがいいのでしょうか？
<li><time>5月27日</time><cite>記事A</cite></li>
はおかしいですか？ table以外でというわりにciteを使うのはなぜ >>750
すみませんが、それはなしで。
>>751
citeはおかしいのでしょうか？適合する要素や書き方がわからなくて。
さすがにspanは前時代的でおかしいのかなと。
timeの部分が先にきてるので、それ1つで目的は果たせますけどね。
リストを入れ子にするのも考えたのですが、
日付に対して記事は1つだけだからおかしいかなぁと。
HTMLむずかしい。 >>752
tableを乱用しないようにというのは以下のような理由あってのこと
・意味論的にtableで書くべき内容じゃないものはtableを使わないほうがいい
・昔と違って今はわりとタグによらず（tableを使わなくても）思ったとおりのデザインをCSSで実現できる
spanが前時代的と言う前に、まずW3CやMDNでciteについて確認 >>752
>cite
citeの意味は引用（の題名）なので、引用元の存在が前提になるが
その例だとそうは見えないね
>table以外でマークアップ
<dl> 使うとか
日付 <dt> のスタイルを float: left にすれば 横並びになる 見た目が一緒なら同じように解釈されそうなもんだけどんあ 引用に関する事項だったんですね。
自分の見てるサイトだと、
＞<cite> 作品のタイトル・著者名・URLを表す
とだけ書いてたので。
これでも>>749の用途とかけ離れてると思いますが。
<dl><dt>日付</dt><dd>記事</dd></dl>
これでやりたいと思います。どうもありがとうございました。 表にしたいなら迷わずtableでいいじゃん
15年前のような感覚はもう捨てていい ぶっちゃけ検索エンジンもそこまで見ないから
tableでもdivやspanでも好きなように使っていいよ
なにもかも全部それぞれposition:absolute;にしたdivでくるんで配置してるところもある 15年前の感覚だと表じゃなくても何でもtableじゃね？ >>759
15年前ならIE6時代だろ
CSSはあったはずだが CSSでブロック要素の中に文字を中央配置するのってどうすればいいんでしょうか
<div style="height:3em; vertical-align:middle">テキスト</div>
でも真ん中になりません
line-height:3emなら真ん中になるのですが幅が短くなったときに2行になる可能性があるので
複数行でも中央になるようにしたいです >>761
flex
css flexで検索すれば色々な配置が出てくるから、しっかり覚えるといい >>762
みえたりきえたりする要素で上位のCSSに
display:hidden と block を切り替える記述がされてるんですよね
flex指定しちゃうと常に見えるようになってしまいまうので… >>760
IE6と聞くと真っ先にwidth/paddingバグを思い出すが他にも様々なmarginバグ、floatバグ・・・
tableはとても素晴らしい道具だったよ
今はtableのネストを見かけることもほとんどない >>764
上位の要素が非表示なら何をやっても非表示になるから気にしなくていいぞ そういやIE6のおかげで一切marginは使わなかったな
あれ使うと本当にバグってくれる
floatも意味がわからんぐらいずれる >>766
上位っていうのはシステムの生成したCSSって意味でさわる権限がないんですよね
それをローカルのCSSでみばえだけ整えてるところなんですが
#id::checkd ~ #id { display:block }
こんな感じになってて id の部分がシステムで生成されてかわる可能性があるので display を上書きできない
あとタグも自動生成でさわれなくて内側に div 追加もできないので困ってます 質問者じゃないが浅学のためかどういうことを話してるのかわからん
誰か解説を頼む 便乗質問で似たようなことで困っててこれで上下にずれるのってなんで？
あとmargin0でwidth 1/3 にしてるのに2行になる
float使えばきれいに並ぶんだけどflexはいまだに意味わからんことが多いわ
CSS:
div {
width: calc(100%/3);
height: 5em;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background-color:#eef;
}
HTML:
<div>テスト</div>
<div>テスト<br>テスト</div>
<div>テスト</div> >>770
HTMLをこう書き換えたらどうなる？
<body
><div>テスト</div
><div>テスト<br>テスト</div
><div>テスト</div
></body> >>769
表示/非表示を切り替える要素と、cssが自動生成される
自動生成されるcssにはdisplay:blockが含まれるので、display:flexが使えない
要素では入れ子も使えない
flex使わずにblock要素内のテキストを中央揃えするいい方法はないものか
妙に難しい >>770
vertical-align: top; をdivにつければいい
inline要素の縦並びの問題 >>771
これで表示かわるのか
ありがとう
しかしこうなるとソース見易さのために改行も注意して使わないとダメなんだな
あとflexで2行にすると高さがずれるのも謎なんだよな
縦方向のセンタリングはしょっちゅうはまる <div>じゃなくて<li>にすればいい
liは終了タグを省略できるから、
<li>テスト
<li>テスト<br>テスト
<li>テスト
これは
<li>テスト
</li><li>テスト<br>テスト
</li><li>テスト</li>
これと同じ意味になる（ブラウザがこう補完する） >>773
なるほどうまくいったわ
ただheight指定で同じにしてるのにvertical-alignあわせないとずれるのもよくわからないけど
>>775
省略できるの？
表示がうまくいくのとw3c規格でOKなのはまた別の話なんだけど >>772
サンキュー
親の、じゃなくて>>761のdivそのもののdisplayのことだったか
これで2行になる可能性あるなら、jsでどうにかする以外なくね・・・？ >>776
さっきもちらっと言ったけど、念のため
その2つは(inline-)flex特有の問題ではない
inline要素の縦位置の問題だったり、空白類の扱いの問題だったりする
意外と面倒な領域だから調べてみるのをおすすめ
floatは色々と無視してくれるから問題として出てこないんだけど（だからclearが必要になったりするわけで） >>777
やっぱり無理なんですね
無理なら無理でシステム班に内側にもう１つコンテナブロックはいてもらうように頼みますわ
できるならわざわざシステム班の手煩わせるの申し訳ないかなと思ったので
一見簡単そうなのに意外と方法ないものなんですね <meta>で閉じたり閉じなかったり
<link>でプロパティ指定するときダブルクオーテーションじゃなくてシングルで囲ってたり
そういうコードが割と散見されます
このへんのヘッダーはコピペが多そうなので
どこからか持ってきたものでそうなってるのだと思いますが統一性のなさはイラっとしません？
多少面倒でも手直ししろよ糞野郎！！！ >>780
しません。そんな低レベルな方とは仕事をしないので・・・ 形式はよおーpsdでもpdfでもpngでもよおー
なんでもいいんだけどよおー
画面実サイズ確定してんだから解像度くらい合わせろや！せめて整数倍にしろや！
それでラインが1pxどうこう言われてもわかるわけねえだろダボが！ メールサーバぶん投げて全部なかったことにして全財産もって旅に出たいわ！ ちょっとしたアイコンにunicode絵文字を使ったのですが
ふとSEO的にまずいなと思い、imgならaltにアイコンの説明がかけるので、
img srcにunicode絵文字を指定できないかなと思うのですが可能でしょうか？
base64エンコードをすれば出来るのは知っていますが、
そうなるとスクリーンショットとって加工してbase64算出してと作業が増えるので。
（特定ブラウザの絵文字になるのでライセンス的にどうかわからないので、そこまでするなら自分で作っちゃうけど） 親要素liの子要素a全体をクリック出来るようにしたいです
liにpadding:0.5em指定しているので
aをblock要素にしてwidthとheightを100%にしても
padding:0.5em分クリック不可なところが現れます
padding:0.5em分もクリック可能にするために
どのようなプロパティをどこに指定すればよいのでしょうか？
お力添えいただけると幸いです >>785
liのpaddingをやめるか、aの左端をpaddingのぶんズラすか >>786
paddingのぶんずらすと要素ごと移動するだけで解決しなかったので
paddingからline-heightに変えたらうまくいきました
ただflex-basisなど他のプロパティに影響が出たのでもうちょっといじってみます >>765
ほとんど、標準準拠モードでは問題なかったバグだね
なぜか後方互換モード起因の不具合が認知されていなかった IE6はバグも多かったが、それでも当時は
まともにCSSが使える唯一のブラウザだった
ネスケはひどかったな。CSSオフが推奨だったからなｗ ワードプレスでサイト作成してるんだけど
a hrefにhttpを記述しないと後から勝手にサイトのURLを頭に付けちゃうのはどうしたら解除出来ますか？
例えば<a href="a">テスト</a>にして保存して公開しても
なぜか公開されてるサイトでは指定先が「サイトのURL+a」になってしまって困ってます
助けてください！！ リンクからサイトのURLを消したい
自分でa hrefに設定したアドレスだけにしたいんです http:やhttps:、ftp:、mailto:などのスキームから、あるいは//から書けば絶対パス、
/から書けばルートパス、
それ以外からの文字から書けば相対パスになるから無理じゃね？
aって何よ？本当にaにしたいの？何か要件隠してない？ >>796
マジで無理ですか...
aはあくまで例えでa hrefには英数字の文字列を入れたいんです
ただhttp://を入れないと勝手にサイトのURLが頭に付いちゃう感じです >>784
そのアイコンがどんな用途かにもよるが
span や abbr などに入れて title で注釈するので十分じゃないかな
どうやろうがSEO的な効果は予測できんが paddingで上下同値にしてもど真ん中には来ず
若干上にずれてるんだけど
どう対処すべきですか？ HTMLとかスタイルがわからんからエスパーするけど
インライン要素ならvertical-align がデフォルト値の base-line で下が空いてるのかな
まあ display: flex 使うのがイマドキだね サイトのフォントって何にしてますか？
ヒラギノとメイリオでfont-weightを指定した時にかなり違いが出るので気になります。 webサイト 日本語フォントで検索しても４位までwebフォントの記事が並ぶ…
５位でまともなの来たと思ったら個人サイト…
https://hasegawahiroshi.jp/notes/font-family
mdnとかで一般的な指定フォローしてくれてたら安心なんだが。 最近は客からの指定がなければNoto Sans Japaneseだなあ >>804
最近はnotoばっかりだなあ
能登かわいいよ能登 xvideosダウンローダーみたいなサイトを作りたいんですが、どんなワードで検索したり、どんな本で勉強すればよろしいでしょうか？ >>810
レオ レオニの著書「スイミー」を読んでみては？きっと君には合ってる >>813
ありがとうございます
しかし何故スイミーを？ ウェブ制作会社で働いてるんだけど
原稿ワイヤーみて HTML CSS js PHP の下層コーディングばかり
給料がなかなかあがらずそのうち独立したいと思ってます
上流工程って具体的にどんなことが必要になりますか？
クライアントにヒアリングして
要件定義とか原稿デザイン画面設計入出力設計とか作るにはどういう勉強yが必要ですか
今の時点で独立してそのへんできるかどうか知りたいです 経験が無ければかなり大変だとは思うよ。
今の状態で独立しても、そういう業務が必要な仕事が発注されるとも思えないけど。 逆にいうと原稿がすでに用意されたコーディングだけの依頼もあるってことですか？
それで食べていけるならそれはそれで拘束時間を自由に選べるので独立したいんですけど 上には上がいてその上が糞みたいに安請けするのがこの業界
独立しても仕事なしか貧乏くじみたいな仕事しか回ってこない >>815
継続的な仕事や新しい客を呼んでくれる
自分を信頼してくれている客が1人以上いること
その客に対して常に
客も自分も満足できる提案が出来ること
提案したものを確実に開発・運用してくれる
自分で完全にコントロール出来る製作陣が1ユニット以上あること
これが最低条件 ゲーム作って公開してアフェリでほそぼそと小遣い稼ぎしたいんだけど
HPのサーバー維持費で赤字だったらふんだりけったりじゃん
なのでHPを完成させてからレンタルサーバー借りてUPしたいんだけど
オフラインでHPを作っていくことって可能ですか？ 無料でちょっとした１８禁ゲーム作ってちょっとした広告収入を得たいんだよ
１８禁だとやっぱりみんな喜んでくれるし作りがいを感じてモチベも上がるしゲーム作成が初心者の頃はエロでモチベ上げといたほうが
良さそうでさ
俺的にもエロつくると真剣味ますしやる気でるしさ
グーグルのやってるブロガーとかって無料で借りれるサーバーも考えたけど１８禁を受け入れてくれなさそうだし >>820
可能だし、それが普通
それよりゲームダウンロードしに来た人間がアフィ踏む理由が謎 javascriptとか使ってページ遷移なしでブラウザのURL変える方法ってありますか？ >>828
あーqiitaで最近読んだな…
ちょっと待ってろ なんお技術だよｗｗｗ
って言いたいけど俺も一回だけ使ったことがある リンク先見てないけどpushstateだったら
1ページものをよくやる人にはお馴染みかも ブラウザのURLを書き換えられるってだけで
実際にそのURLにアクセスしてるわけではない？ 少なくともこの機能で書き換えただけではアクセスする事はないよ XHRはIE6にも実装されてた
17年も前のことなんだなあ 当時はとにかくテーブルで作ればそれでいいって時代だったな >>838
>>828も読めない？
まず国語の勉強しては？ IE6は標準とずれていたってだけで、
機能的にはHTML5の初期レベルの能力があったからな ■ このスレッドは過去ログ倉庫に格納されています
