HTML/CSS のどんな質問に必ず優しく答えるスレ 32
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html ■回答はSass/Scssを前提としないこと
CSSでの回答とし、要望があった場合のみSass/Scssでも可 勝手にSCSS入れやがったから前の>>1内容のままで立て直した↓
HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.5ch.net/test/read.cgi/hp/1521035557/ おすすめのテキストエディタ教えて。
予算3000円ぐらいだす。
マクロ使いたいんだけど、解説本充実してたらうれしい。 ちなみに俺の中で最強エディタはエクセルになりつつある。 一長一短で、これってのがないんだよね
決めてに欠ける
とりあえずVisual Studio Codeにしとこって感じ >>11
htmlやcss書くならvscodeでそうそう不足ない気がするけど
なにが足りないのかな? HTML/CSSならBracketsお勧め
コードがすぐブラウザに反映されるライブプレビューって言う機能が便利すぎる この板で
BootstrapやFoundationのスレが見当たらないんですが
使ってる人少ないんですかね。 いや、普通に使ってる
もう当たり前すぎて話すことない CSSでtable要素のborderを指定したいのですが、
下記のようにコードを書いてもまったく変更されません。
table {border:solid 1px;}
index.html内にはlink でスタイルシート(index.CSS)へのリンクを書いており、
他の要素へのCSSは問題なく反映されているのですが、tableだけ反映されないのです。
何が原因なのでしょうか？ >>17
table {
border:solid 1px;
color:red;
}
のように指定しても反映されません。 >>19
こうですか？
table {border:solid 1px black;}
これでもだめですね。 >>20
collapseも特に設定していません。 >>23
index.css
header {
background-color:##0B3861;
color: white;
width: 100%;
margin: 0 auto;
padding-left: 5px;
}
body {
margin: 0;
}
a:link {color:white}
table {
border: solid 1px black;
} >>23 index.html(1)
<html>
<head>
<title>*****</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h3>*****<br></h3>
<a href="todo_test.php">ToDo</a> / <a href="todo_readme.php">ReadMe</a><br>
</header>
<a href="todo_show.php">▼ToDoの追加<br></a>
<?php
require_once("MYDB.php");
$pdo = db_connect();
//TODOを表示
try{
$pdo->beginTransaction();
$sql = "SELECT * from todo";
$stmh = $pdo->query($sql);
echo "<table>";
foreach ($stmh as $row){
//echo "<table border='1' >"."<tr>".$row['todo'].':'.$row['status'].":".$row["period"]."</table>"."</tr>";
echo "<tr>"."<th>".$row['todo']."</th>".':'."<th>".$row['status']."</th>".":"."<th>".$row["period"]."</th>"
."<th>"."<a href='todo_test.php?action=delete&id=".$row['id']."'>".$row['id']."</a>"."</th>"."</tr>";
}
}catch(PDOException $Exception) {
$pdo->rollBack();
print "エラー:".$Exception->getMessage();
}
echo "</table>";
?>>>23 >>23
<?php
$pdo = db_connect();
if(isset($_GET['action']) && $_GET['action'] == 'delete' && $_GET['id'] > 0){
try{
$pdo->beginTransaction();
$id = $_GET['id'];
$sql = "DELETE FROM todo WHERE id=:id";
$stmh = $pdo->prepare($sql);
$stmh->bindValue(':id',$id,PDO::PARAM_INT);
$stmh->execute();
$pdo->commit();
require_once "todo_test.php";
} catch(PDOException $Exception) {
print "エラー:".$Exception->getMessage();
}
}
?>
</body>
</html> >>26
PC再立ち上げしてlinkでスタイルシート指定しているところを書き直したら反映される様になりました。
ご迷惑おかけして申し訳ありません。 自分はホームページを作り始めてから間もないのですが
一応トップページだけは公開出来たのですが、ディレクトリのアップロードの仕方が分かりません。
例えば、http://aaaa.netというトップページがあったとして、
その下層にhttp://aaaa.net/xxxxやhttp://aaaa.net/xxxxxx、xxxxxxxx等と言ったカテゴリがあるじゃないですか。
それの作り方、と言うかアップロードの仕方がどんなに調べても分からないので教えていただけるとありがたいです。
因みにアップロードにはFFFTPを利用しています。 おはようございます。
CSSでwindowのサイズに合わせてマージン幅の調節をしたいのですが、何か良いやり方はありますでしょうか？ ページの中のそれぞれに要素に対して、display:noneで別のリストがあるんですけど、これって何なんでしょうか？ CSS3.x というものは実際は無い
唯一CSS2のみがあって 「CSS3」 はそれ以外のCSS全部
バージョンは個別のモジュールごとにあるが
CSS全体としては living standardみたいなもの
量的にはCSS2の数十倍くらいあるだろうから
細かい所まで網羅するような参考書は無理だろうな CSS3を求めるなら、モジュール単位で指定しないと コーダペインにあるような
すっごいエフェクトとか動きのCSSかけるようになりたいんだけど
本屋にいっても初歩とか基本のCSSの本しかない
こういうのどこで勉強すればいいの？ >>45
やっぱりそれしかないのかぁ
独学でやってんだけど
WEBの学校とか高度なこととか教えてくれたりすのかなーとか
ソース見てすらすらわかるようになるのだろうかとか 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
V610Q 最近になって色指定のとき16進数でもアルファを指定できることを知った
これって実装状況ってどうなってんの？
調べてもよくわからないんだけど Edgeは言えば対応するよ
Microsoftが「EdgeではWebKitと動作が異なる場合はバグ」って明言してるからね 透明度のことを考えるとrgbで覚えた方がいいんだろうけど
#で慣れてしまった体にはもう オペラミニはどうでもいいけど
IE11も見たら対応してなかったぞ すいません，質問です。特定のクラスの内側全てを否定するCSSの書式を教えてください。
あるHTML文書に対して
* { all: initial }
というCSSによって全ての要素を初期化したいのですが，その際
<span class="katex-display">
[以後大量の階層構造...]
</span>
という領域だけは初期化の影響を与えたくありません。
しかし例えば
*:not(.katex-display) { [...] }
という指定だと除外したい領域の最上部しか実際は除外できておらず，内側の<span>などが初期化されてしまいます。
ですので，「“katex-display”クラスのspan要素以下の階層全てを除外する」方法が知りたいのです。
どうかお知恵を貸してください。 他にいい解決方法？
いまのところひとつも解決方法出てないが。
> CSSの書式を教えてください。
という質問にSCSS使えと答えたバカはいたようだがｗ >>63
仕様上は
:not( .katex-display * ) { all: initial; }
のように書けばいけるはずだが（ .katex-display 自身は除く）、
この形のセレクタ引数はまだサポートされてないか >>68
ありがとうございます。
Google ChromeおよびMozilla Firefoxの最新版で試してみましたがいずれも対応していないように見えました。
https://developer.mozilla.org/ja/docs/Web/CSS/:not
↑ここにも一通り目は通したのですが，助けになる情報はありませんでした……。
とりあえずあきらめます。
仕事ではなく個人的な案件なので，最新の特定のブラウザさえ対応していればそれでいいんですが，Google ChromeもMozilla Firefoxも対応していないとなると厳しいですよね。 頓珍漢覚悟で書くがinheritで何とかならないかな？ >>69
すみません。どなたかこの解決方法知りませんでしょうか。 >>71
英語で検索しても解決方法が出てこないなら、あきらめて
別の手段や発想の転換で解決しよう
そういうことは山ほどあるよ CSSに書くプロパティの順番は
アルファベット順かFireFoxのモジィーラ順かで別れると思うのですが
その1つ上のタグの表記の順番はどういう決まりになっているのでしょか？
HTML側で上から順番に書くタグに合わせて
CSSも同じ順番に書いていくのですか？ 質問させてください。
<time datetime="2018-06-09">2018年6月9日</time>
というような形式と同じように
<sometag someattr="30000">3万</sometag>
というような「数値の統一解釈」みたいなことってできませんかね。 SASS
SCSS
LESS
・・・・まだ他にもありますね。どれおぼえればいいの？あるいは覚える必要ない？CSSで十分？ PostCSSで必要な機能だけ選んで漸次導入していくのがナウいやり方。
PostCSSでもフルアーマーするとSass/Less/Stylusすべての機能同等のものができるがそれは筋が悪いやり方。
本当に必要なものだけ選んで入れる。
余計なものは入れない。 CSS3とHTML5で
スクロールしたら文字浮き出たりするのは
無理ですか？
jsなしで、jsありならできるのはわかります。 大枠:hover 浮き出る要素
とかでそれっぽくできんじゃね？
スマホには対応しないけど スクロールしたらなのになんでhoverが出てきたしｗ >>83
ありがとう、hoverしかないですよね。
なんか色々探したらJavaScript使用するのはありました。
ま、無理そうなので諦めます。
勉強になりましたわ。 >>76-79
SASS で良い
ただし、SASSとは、SCSS の事です。
昔のSASSではない cssをもう一度基礎からやりたいんだけどおすすめの本を教えて >>87
本も知識かたよってるからね。信頼できる師匠見つけて、仕事手伝って覚えるのがいい >>89
うん。どうやったって偏るから、信頼できる人のを学ぶのがいい >>88
>>89
人によって書き方にはクセがあるからね Bootstrap 使っているサイト内のロゴをcinzelというフォントとstyle.cssで文字組みしてデザインしたいんですが、h1を使うとbootstrapのh1が反映されてしまい、!importalを付けても反映されませんでした。
どうしたらいいかお願いします https://www.nadsukimikadsuki.com/
こちらのサイトの上部４つのリンク(【手帳活】～)のようにマウスオーバーで変化するcssが知りたいです。
よろしくおねがいします。 >>103
必要なのはHTMLとCSSのみ
期待通り動かないのはコピーする場所が間違っているか、不足している ずーっと気になってて、以前から調べても解決できなかったんですが、疑似要素を使った矢印とかで、モバイル版のchromeでみると必ず隙間ができるのはなんでだろう…
PCのブラウザだと問題ないから、ブラウザ依存なら諦めるしかないのかなぁ
本体と疑似要素の間をつめても線が入っちゃうから隙間とは違うのかな
どなたか解決方法を知ってますか？
https://i.imgur.com/n2XO4HC.jpg >>102
ありがとうございます。
記載したサイトそのままの動きにするにはどのようなcssを書けばいいでしょうか。
ソースを見てみましたが探せませんでした。 <div class="pickup-image"> の所の、transform, transition に色々書いてある
サイトを表示して、右クリックメニューから要素の検査をすれば、F12 開発者ツールが起動する >>108
ありがとうございます。
探していろいろと触ってみたのですが他の要素も混ざっていたりと難しく、
ソースを参考にするのは断念してしまいました。
http://www.cssdesk.com/6JLsA
自分で調べながら理想の形になるように組み合わせてみたのですが、
当たり前ですがそれぞれの要素にマウスが重なったときしか反応しません。
画像にマウスオーバーしたら枠線や中央のテキストの効果も全て反応するようにしたいのですが、
なにか良い方法はありませんでしょうか。
それともこの方法では無理ですか？
無知で申し訳ないです。どなたかご教示いただければ幸いです。
よろしくお願いします。 度々すみません。
>>109です。
検索してみて
https://mementoo.info/archives/777
https://coliss.com/articles/build-websites/operation/css/css-hover-on-everything-but.html
この方法でできるのではと思い、
http://www.cssdesk.com/6JLsA
こちらで試してみたのですが(下の画像の方です)
変化がありません。
ずぶの素人でどこをどうすれば同時に変化するようになるのか分かりません。
cssの書き方が間違っているのでしょうか。
ご教示いただけましたら幸いです。
何度も申し訳ないです。 DOMイベント伝播(バブリング)の順番は、孫 → 子 → 親。
つまり内側から外側へ、伝播される
外側のイベント発生時に、内側へイベントを発生させるには、
Vue.js などのJavaScript を使わないとできないのでは？
1. 外側(親)の要素がイベントをキャッチする
2. 内側(子)の要素へイベントを投入すると同時に、自分(親)のイベントを消化する >>111
ご丁寧にありがとうございます。
https://mementoo.info/archives/777
こちらのURLで紹介されているデモでは、
外側の#testにマウスオーバーする事で
内側の#innerも変化しているように見えるのですが
これはまた別なのでしょうか？
私の書き方が間違っているわけではないのでしょうか。 君は、101 かい？
書き込みを続けるなら、名前欄に、101 と入れてくれ
>>112
:hover で他の要素とも、連動できるのか。
そのサイトを参考にして作れば？ >>109
.text { }
#sample:hover > .text { }
この2つは、内容が同じだから、変わらないのでは？
もっと、内容を変えてみれば？
それと、もっとポイントを絞って、狭い範囲で質問してほしい。
量が多すぎて、何が悪さしているのか、ちょっとわからない
それと、このサイトを使わない方がよい。
動きがおかしい。バグってる
CSS が一番下まで表示されないし、特に、Edge ではコピペもできないし、
ろくにテストもしていないし、技術力が低すぎて使えない >>112
www.cssdesk.com/bTqgy
何やりたいかよくわかんなかったけどこんな？ 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 コアアドインフィニティ
吉田篤史 ニート歴10年
経歴詐称で入社、ただいま職歴ロンダリング中 チェックボックスのチェックありなしで
tableのthを消したりtableそのものをdisplay:blockで並びを変えたいのですが
cssの記述がわかりません
チェックボックスのチェックありなしの時に設定したいcssそのものは出来上がってて現在はhtmlを分けて動かしてます。 これだけの情報ではいかんともしがたい
まずコードがわからない
チェックボックスとtableの位置関係は？
tableそのものの並びを変えたいとは？
できあがってるcssとは？
htmlを分けてるとは？ いずれこっちに統合予定でチェックボックスでテーブルの切り替え機能付ける予定
https://excelog.web.fc2.com/2018.html
↑このページを基本としてチェックボックスにチェックついたら↓のページのhtmlのヘッダのところに書いてあるcssで↓のページのように縦長にcssでやりたいけどうまく動いてくれないというのが質問です。
https://excelog.web.fc2.com/2018_test.html
スクリプトでゴリゴリ書いてもいいんだけどcssでできそうだからと試したら泥沼状態 しかしWPFやsilverlightやってたときもそうだがこの手の技術はブラックボックス納得させるのに苦労するね
コードは割となんとでもなるんだがビュー周りがきつい 質問しておいてあれですが自己解決しました
>>119
>>121
は取り下げします 初歩的な質問でごめん、
ulでliのメニューがあるんだけど、これを画像の幅にピッタリ連動するように
するコードを書くようにするにはどうしたらいい？できれば中央揃いで。
参考になるサイトがあったらよろしく。
ものすごく基本的な事聞いてるかもしれないけど、段々頭が混乱してきたので
書いておく、ちなみにコードは
HTMLは
<div id="container">
<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div> cssは
#.center {
width;100%;
}
.center {
width:100%;
margin:0 auto;
}
@media scerrn and (min-width:1680ps) {
.center {
margin:0 auto;
width:73%;
}
}
ul.menu {
zoom:1;
postion:absolute;
z-index:2;
margin-left:15%;
}
なにかわかったら教えてくり >>125
どゆこと？
メニュー全体の幅をカルーセルの幅に合わせたい？
っていうかそのhtml、divの閉じタグが足りないが >>128
メニュー全体をカルーセルで幅ぴったりにしたいと思っています。
修正版は
<div id="container">
<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
</div>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div> >>129
プラグイン含めて
jsfiddleにUPしたら？
ところで、
こういう文章が
見やすいと思ってるの？ css描く矢印ってボーダーを内股にする方式しか見つからなかったので三つ折り方式作ってしまった >>129
プラグインの内容がわからないし画像の幅って言うけど画像がどこにあるかわからないし… フォームでリセットではなくて
切り取りボタンは設置できますか？
例えば、テキストボックスに入力された文字の一部を
マウスでハイライトして、ボタンを押すとハイライトした部分だけを切り取るような。
ブラウザで言えば、ハイライトしてブラウザの編集-切り取り。という作業の切り取りボタンを
フォームのリセットボタンの隣に置きたいです。 すみません、質問よろしくお願いいたします。
ttp://allfont.net/download/tiranti-solid-let-plain10/
のページにあるwebフォントを使用したいのですが
下部のfor siteにあるとおりhtml/cssを記述してもchromeとoperaに反映されませんでした。
Safariとfirefoxではちゃんとフォントが反映されていました。
ブラウザのこの違いは何が原因で起こりどうすればいいかご教授お願いします。 >>144
ありがとうございます！
エラーについて調べたのですが
Blocked by CORSだそうで色々調べたのですがよくわかりませんでした >>145
調べてないけどプロトコル（http/https）がフォントとサイトで齟齬ってるんじゃ？ うまくいかないページのミニマム版をくれればテストもできるんだがそもそもちゃんと書いてるかどうかすらわからんからなあ 皆さんありがとうございます。
このフォントでサイト名をヘッダーロゴにして使用したかったのですがウェブフォントは使わずSVGに変換して表示させることにしました。 反映されたページ見ながらcssいじれるソフトやウェブツールってありませんか？ ブラウザ上でHTMLjscss書けるところはいっぱいあるよ
あの黒系統のUIが合うなら ブラウザの開発者ツールでよくね？
htmlもjsもcssも書くとリアルタイムで反映されるぞ
ローカルファイルならファイルを上書き保存できるからエディタ的で便利 >>151です
回答ありがとうございます
たくさんありそうですね
cssに100を越える重複があって、それを解消するために反映されたページを見ながら、cssをいじりたいと思いました
何て単語で検索すればいいかわからずここで聞いてしまいました
>>153をヒントに調べてみます デベロッパーツールっていうすげーソフトがあるよ。
どうしてもっていうなら特別に１０万円で売ってあげるけど？ >>157
それ1万円で売ってるやつだろ
しかも機能が全部中途半端
ぼったくりにも程がある >>158
かなわないなぁ…
しょうがない！１万で売ってやる。 VSCode で開発すれば？
open in browser という拡張機能で、ファイル名を右クリックして、ブラウザが起動する。
Live Server では、HTML ファイルを保存すると、自動的にブラウザに反映される 何そのどこぞの馬の骨
Live serverだろ普通 なんでvertical-alignって使えるdisplayが決まっているのでしょうか？
pでもなんでも使えれば便利だと思うんですが pじゃなかった、display：blockなどですね 誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 66945
https://you-can-program.hatenablog.jp スマホとPCの2段階のシンプルなレスポンシブなサイトを作る時、
cssはスマホ用を先に作って、PC用を後から作るのか
その逆か、どちらが作りやすいのでしょうか？
何かこころがけておきたいこと（幅とかレイアウトとか）
があればお勧めを教えてください。 >>167
モバイルファースト、スマホ版から作る
もう最近はスマホ版だけにしてPC版なしってサイトも増えてきた
（スマホゲーなど）
PC版無しでもいいんじゃね
まぁ慣れれば同時に作れるけどな > >>986
> はーなるほどなぁ
>
> ここ最近擬似クラス擬似要素やっと覚えてきたから
> むだにIDやclassつかわないで構築してたけど
> これみるとDIVで細かく指定するほうがいいのか
わざとらしすぎ。divは他に変わる要素がない時に
デザインのためだけに使うもので、技術力不足を隠すためのものじゃない ajaxでデータを取ってくる時に中にHTMLが含まれてるから（←馬鹿１ 普通は含めない）
それを変えることが出来ないんですよ！（←馬鹿に２ 変えることはできる） >>167
人それぞれやりやすい方でいいよ
もしくは会社のコーディング規約に則る
俺の場合はスマホから作ってる
スマホは絶対いるし逆にPCはいらない時もあるしスマホのレイアウト違いだけのデザイン増えてきたから
ちなみにメディアクエリ出てきた頃のIE(バージョンは忘れた)はメディアクエリに対応してなかったからPC先に作ってメディアクエリでスマホ作る必要かあった
なので今でもその流れの人は多い スマホサイト→PCサイト
・グローバルメニューを左メニュー
・body width100%→width960px
もうめんどくさくて最近全部これ
以上！終了！ ライブドアブログとFC2ブログでDMMアダルトのアフィリエイトサイトを始めたのですがわからないことがあります。
無料動画のアフィリエイトのHTMLが以下なのですが、
PCとスマホで確認したところ右カラム等にはみ出してしまいました。
サイズは４種類あり以下は一番小さい476×306です。
<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
PCとスマホでそれぞれ適切な大きさに表示させることは可能でしょうか？
可能でしたら記述を教えてください。よろしくお願いします。 <iframe width="476" height="306"
↓
<iframe width="100%"
か
<iframe width="100%" height="auto"
多分前者で行けるけど念の為 >>174
レスありがとうございます。
書いてみたのですが横幅は良くなるのですが、
縦が上半分のみになってしまいます・・・。
width="100%"で画像はできたのですが、動画が上手く表示できず質問しました。
引き続きよろしくお願いいたします。 calc(calc(306 / 476) * 100%) >>176
レスありがとうございます。
calc(calc(306 / 476) * 100%)
は下記のどこに書けばよいのでしょうか？
<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
皆様、お手数おかけいたします。 こうかな
<iframe width="100%" style="height: calc(calc(306 / 476) * 100%);" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe> >>178
ありがとうございます。
先程と同じく横幅は良くなるのですが、
縦が上半分のみになってしまい画面全体が映りません。
scrolling="no" を yes にするとバーの上下で出てくる感じです。
ありがとうございました。 <iframe width="100%" height="500"
もう決め打ちでいいんじゃね >>180
スマホで上手く再生できないようなので諦めます。
ありがとうございました。 <div class="outer">
<iframe width="476" height="306" src="https://www.dmm.co.jp/～/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.outer {position:relative;width:100%;max-width:640px;}
.outer::before {content:"";display:block;width:100%;padding-top:calc(100% / 476 * 306);}
.outer iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
</style>
iframeのアスペクト比を保ったままのリサイズならpaddingハックつかうのが普通じゃね？
::beforeとか使えない状況なら、代わりに下に476x306のダミー画像しいて、表示するボックスを確保しないといかんけど afterでdivやその他のタグを追加することは出来ませんか？ リンクというリンクが全部リストタグになってるページあるんだがSEO上有利なのかな 以前聞いたことあるけど今でもそうなのか？
SEO競争にGoogleが終止符を打ってオワコンと化したイメージ 変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど うむ。コンテンツに精を出して欲しいところ。
しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。 ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない ちょっとした疑問ですが、
5ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？ もう何年もアプリでしか見てないからどうなってるかよくわからんな 隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？ 5ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている
書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう
でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう
一般的には、潜り込まないようにするには、CSS で、どう設定するの？ >>194
外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
https://jsfiddle.net/m8Lthq1x/1/ 大きい画像をcssで小さくすればページって軽くなったりします？ 5ch のスレの右側の広告は、フローティング追従広告ですね
左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？ padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ .thread { word-break: break-all; }
広告をdisplay:none;してしまった方が捗る気がするが html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか
nth-child を試してみましたが、うまく行きません
https://jsbin.com/jugecok/edit?html,css,js,output
JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：https://konohazuku.net/css/css_nth-child_tbl_border/ >>203
これじゃあかんの？
div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}
tr:nth-child(even) {
background-color: #555;
}
table {
background-color: #eee;
} ありがとうございました
https://jsbin.com/xapekam/5/edit?html,css,output
CSS の基本的な所が分かっていなかったようです
お手数をおかけしました スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか
「個人として弄る」分には >>203 のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？
・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！ jQuery で書け！
みたいなかんじなのでしょうか バニラで問題なく書けるならわざわざjQueryで重くすることはない jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？ どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな ECサイトでかけたくない負荷は、
サーバー側であって、クライアント側じゃないよｗ
ってか重いと思ったこと無いんで
余計な負荷はないと考えて良いんじゃねーの？ フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者)
バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない
バニラでするかjQueryでするかでは実際にjQueryの方が重いことはよくある
逆にバニラでした方が開発コストかかるかどうかは仕様(処理の複雑さ)による
実務としては多少コストがかかる程度なら見積り時にバニラで実装する想定で見積りを出す(見積書には明言しないが)
それで発注がもらえればコストの面は気にしなくていいので設計時にどうするかを決める
こんな感じ まぁ書き方にもよるけどな
速度にそんな差が出る処理って例えばどんなん？ >>214
でもさ、お前、古いブラウザすぐに切り捨てるじゃん？
新しいブラウザを搭載してるのは、性能がいい端末なので
jQuery程度、なんの生涯にもならんよ
そもそも、ほとんどのサイトが使っていて
今まで問題起きてない 複数タブ開くのは普通だし少しでもリソース無駄にしたくない派と
性能いいんだから開発楽するためになんでも使うバッテリーの持ちなんて知ったことじゃねー派は常に相容れない jQueryをやめてもバッテリーの消費は誤差程度の違いしか生まれなかったよ jQuery覚えるのめんどくさいから、vanillaで済ましてる
この仕事始めてすぐにVistaとIE9のサポート切れたんで、なくても困ったことがない
ライブラリもjQuery非依存のやつが一通りそろってるし、
定番プラグインだったらしいのは軒並みメンテナンス放棄されてるしな
使うのは他人が書いたコードをメンテするときだけ jQueryのメリットなんてもう薄っぺらいもんな
使う必要かなくなってきた ってかここってHTML/CSSのスレじゃん
jQuery云々はさすがにスレチだろ Bootstrap を使ったら、依存関係で、jQuery も必要！
Bootstrapの機能は、jQueryで作られているから
だから、Bootstrapのユーザーが増えるに従って、jQueryのシェアも増えていく 他人が書いたコードをメンテするときに使うから
結局jQueryを使う。この業界にいて覚えないなんて選択肢はないよ jQueryの話はjQueryのスレに行ってください >>223
そうなの？ Googleのじゃなくて？ >>222
まあこういうドミノ倒しばかりだな ゼロから作るならそもそもbootstrapを使わない。 今の時代は〇〇だとか言う人って絶対システム屋のプログラマだよな。
ただのWeb屋はそんな会話になかなかならない。
いつもいつも新しい技術に追われて追ってお疲れ様だわ。 ／⌒ヽ
/ ´_ゝ`） HTML,CSSベタうちのおっちゃんがここを通りますよ・・・
| /
| /| |
// | |
Ｕ .Ｕ iPhoneのセーフエリアにCSSで対応することは出来ますか？
XとXRだけでも違うので、あっちに合わせればこっち合わずみたいになります >>233
font-size、padding、widthなどの単位をpxではなくvwでやってみ。 viewport-fit=contain
とか
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
とかではなく？ >>227
Materializeも独自のjsとセットになってる
jsがついていないシンプルなCSSフレームワークで多分一番人気あるのがbulma
yahooのpure.cssってのも一応ある position:absoluteを設定した要素が左上に移動する場合と、場所はそのままで右や下の要素が重なって表示される場合の２パターンあるのですが違いは何ですか？
leftやtopは指定していません 基本的なことが全然わかっていないので質問させてください。
グリッドレイアウトで３つの領域A、B、Cに分けました。領域Bに置いたリンク（<a href="article.html">B</a>）を押して、
C内に表示させたいのですが方法がわかりません。どういうコードで実現するのでしょうか？
黎明期のフレームを使ったホームページにあったりした、上に看板画、左に長細いメニュー、その右横のペインにリンク先が表示される、
といった基本的なことがしたいのです。よろしくおねがいします。
●HTML
<div id="container">
<div id="itemA">A</div>
<div id="itemB"><a href="article.html">B</a></div>
<div id="itemC">C</div>
</div> ●CSS
#container {
display: grid;
grid-template-rows: 50px 200px;
grid-template-columns: 100px 1fr;
grid-template-areas:
"areaA areaA"
"areaB areaC";
}
#itemA {
grid-area: areaA;
background: #f88;
}
#itemB {
grid-area: areaB;
background: #8f8;
}
#itemC {
grid-area: areaC;
background: #88f;
}
長々とすみません。 >>241
レスありがとうございます。
私には難しいことがわかったので、iframe試して駄目なら
諦めます。
スレ汚し失礼いたしました。 >>243！
残念ながらjQueryはほとんどわかりませんが、
>243さんのレスでJavaScriptをつかえばいいのかと、
強引ですが以下でなんとか希望の動作をしました。ありがとうございます。
<div id="itemB">B <a href="javascript:void(0);" onclick="OnLinkClick();">Link</a></div>
<div id="itemC">C <div id="c"></div></div>
function OnLinkClick() {
document.getElementById("c").innerHTML = ' <iframe src="example.html" </iframe>'
}
他に標準的な手法がありましたらお教えください。よろしくお願いします。 昔のframeと同様にiframeにname付けてaでtarget指定すればいいだけなんだけど bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ > bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
使える。jQueryは他のライブラリと混ぜて使えるように設計されており
jQuery.noConflict(true); をすれば $ はprototype.jsに解放される。
その状態でもbootstrapはjQueryを使って動作するし、
$の代わりにjQueryを使うことで自分もjQueryを使ったコードを書くことができる。
> bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ
prototype.jsは標準のJavaScriptオブジェクトを拡張している。
そのせいでprototype.jsで追加拡張されたreduceと、
標準で作られたreduceで仕様が異なっており互換性問題が発生した。
これはプロトタイプ汚染やオブジェクト汚染と呼ばれバッドプラクティスとなった。
その問題もあり、prototype.js よりも安全で使いやすいjQueryが登場し
prototype.js は急速に使われなくなった。prototype.js は1.7系が9年前に公開され
あとはバグ修正のみでそれも3年前でもはやメンテナンスされてない状態
最新のブラウザで動くかどうかも怪しく使う意味がない。
それに対してjQueryは3.4.0が今年の4月、3.4.1が5月にリリースされており、
4.0がリリースされることもアナウンスされている >>248
はえー、マジか
じゃあprototype.jsは使わない方がいいのね？
使えてるから使ってるんだけどいつ問題が出てもおかしくないのか
ちゃんと理由あるんだねえ
jQueryに乗り換えないとなのか、めんどくさいなあ
とりあえず jQuery.noConflict(true); ってすれば使えるらしい？のでやってみよう
ありがとう prototype.jsのプロトタイプ汚染でjQueryにのりかえって、10年前かって感じだな
あ、jQuery使うなら、1.8か1.9にしとけよ
jQuery2や3は、後方互換性壊しただけの「メンテナンス続けてます」詐欺みたいなもんだからね
2や3使うくらいなら、もうjQueryなしでやったほうがいいから >>250
へ？
君のブラウザ対応どこまで広範囲なんだよ。 >>250
1系の最後は、1.9じゃなくて、1.12.4だからな
Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ に対応するなら1.x系
必要ないなら3.x系だ。
2.x系は、3.x系のプレビュー版みたいなもん。今はもう使う必要がない
IE6-8対応 ○ ×
：
jQuery 1.8
jQuery 1.9
jQuery 1.10 (≒ 2.0.x）
jQuery 1.11 (≒ 2.1.x)
jQuery 1.12 (≒ 2.2.x)
jQuery 3.0
jQuery 3.1
： >>253
jQueryを使わずにIE3もサポートしてくれって言ったら断られたよ。
なんでだろう？ 古いJavaScriptは互換性がないからな。
互換性を吸収するjQueryを使ったとしてもIE6が限界。
jQueryなしでIE3に対応するとか正気の沙汰じゃない。
例えばIE3だと外部スクリプトすら読み込めない。
try-catchに対応してない（文法エラーですべて実行できない） jQuery使ってどうにかクロスプラットフォームが実現できていたものを
jQueryを使わないとか地獄やろうなぁ まあIEももうMSが使うのやめてくれって声明出したし
よほどのアホ企業じゃないと切り捨てる方向だろうけどな つまり、日本企業の99%以上はアホ企業ってことだな スマホアプリ
EDGEブラウザくん「こんにちはﾌﾞﾋﾋ」 >>258
そう
上の世代の連中が根本を理解できてないから未だにIE対応しろとか言い出す
実際問題今のWebの閲覧はスマホを基準に考えないとダメ まぁ今45歳以上のオッサンが若い頃にネットとかないしな そもそもの問題は多分、年齢や世代ではなくて
文系の口が達者なだけのバカ営業な気が >>261
団塊ジュニアは大学時代にネット使ってる最初の世代 大学でしかEメール読めなかった
家にネット回線ある人はまれであったな 昔話いらね
こういうやつらが会社で老害になるんだよな 260-261でおっさんが問題とか言い出す
262-265でおっさんの反論（？）が始まる
266が昔話するこいつらが老害と断じる
何がどうなろうとおっさんが悪い風潮 今、老害だの言ってオッサンを叩く若い連中こそが
同じ様な老害になるから大丈夫。
どうせそのうち「最近の若い奴は」とか言い出す。 content=''
これの使い道がわかりません。
どんな意味があるんでしょうか？ 基礎39. 回り込みの解除（floatの解除）
https://web-manabu.com/html-css39/
clear: both; は、floatを指定した要素の、次の要素に指定するけど、
clearfix は、親要素に指定できる
clearfixで、:before, :after に、content: ""; を指定する奴だろ？ とりあえず、これでも読んでみたら？
ttps://www.webcreatorbox.com/tech/content-property >>271
::beforeや::afterはcontentを設定しなければなにも起こらない
しかし装飾のために使う場合など、contentに指定したい文字列や画像がない場合は多々ある
そういうときはcontent:''; のように空(長さ0の文字列)を設定する beforeやafterを擬似クラス(:1つ)で書いてるの見るとモヤっとする
まあ初心者さんなんだろうけど 古いブラウザにも対応するために1つだけにしている可能性もある
IE8とかな いやあ、今更そんな必要ないし、ましてやここに書くのにそんなこと考慮しないだろ
初心者さんがネットの古い記事で見知った書き方してるんだと思う 271です。
装飾とは例えばどんなものの事でしょうか？
初心者ですみません いろいろあるけど、例えばグロナビのそれぞれの前にアイコンついてたり、見出しの前に装飾ついてたり
構造化的には意味がないものとかはhtmlでは何も置かずにcssで要素を置きたいとかがある
そういう時に
.foo::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
}
みたいな感じにするとあたかもそこに要素があるようにできる >>279
そういうことだったんですね。ありがとうございます！ あと★とかアイコンとか
更新情報の頭にNewつけるとかな 複数のページである事柄を説明する時に
同じ内容の見出しと記事を使うと
検索順位的によくないのでしょうか？
～の仕方で複数の記事を書く時に
共通の事柄を説明しないといけないんですが
こういう時ってみんなどうしてるんでしょうか？ げりのときにがすがたまりまくってるじょうたいでといれいったらといれがやばいことになるげんしょう 初めて書き込みさせていただきます。
添付画像のように、トピックスが10個表示されているうちの下7つをCSSで非表示にしたいのですが、うまくいきません。
わかる方がいらっしゃいましたらご教授頂けないでしょうか？
https://dotup.org/uploda/dotup.org2036569.png.html
試したコードは以下になります。
①
.loop-item-3,
.loop-item-4,
.loop-item-5,
.loop-item-6,
.loop-item-7,
.loop-item-8,
.loop-item-9
{
display: none;
}
②
.loop-item-3.user-id-1.bbp-parent-forum-51.even .post-136.topic.type-topic.status-publish.hentry
{
display: none;
} SASS なら、ループで、
このサイトに入力してみ
https://www.sassmeister.com/
@for $i from 3 through 9 {
.loop-item-#{$i} { display: none; }
}
出力
.loop-item-3 { display: none; }
.loop-item-4 { display: none; }
中略
.loop-item-9 { display: none; } >>287
ul.bbp-topic >li
をdisplay: noneにして
ul.bbp-topic >li:nth-child(1)
ul.bbp-topic >li:nth-child(2)
ul.bbp-topic >li:nth-child(3)
をdisplay: blockでどうよ >>287
(1)に!important付けてみても効かないようなら何か間違ってるんじゃ?
.bbp-body > ul:nth-child(n+4) { display: none !important; } >>290
こちらの!importantをつける方法でできました！
スタイルシートの優先順位があるんですね！
nth-child()やfor文で書く方法もあるんですね。
とても勉強になります！
皆さんありがとうございました！ あと追加でお聞きしたいのですが、
「＞」←この記号を付ける付けないで表示って変わる場合がありますか？
ただ分かりやすくするために明示的に記載しているだけでしょうか？ .a .b
.a > .b
空白なら、.a のすべての子孫の.b で、
> なら、.a の子(直下のみ)の.b
> は、直下の子のみに限定される
CSS の基礎を勉強してください！ >>293
なるほど！ありがとうございます！
基礎すら勉強せずにホームページ作り初めてみたので苦戦しまくりです...
ちゃんと勉強してきます！ VScodeとブラケッツってとっちが使ってる人多いのかなー？ "ホームページ作り"って今はもう既に懐かしい言葉に聞こえるな サーバーのFTPマネージャーでアップロードしたファイルをスマホからエディタで編集しながらサイトを作っているのですが、急にアップロードしたファイルが文字化けしてしまったのですが、どうしたら治るでしょうか？
あと、/public_htmlの下にディレクトリを2つ分けて2つのサイトを作りたい為それぞれにパスワード設定したいのでそれぞれのディレクトリに.htaccessと
.htpasswd入れたところ、どちらもパスワードの認証画面は出るのですが、二番目のサイトの方も一番目のIDとパスワードじゃないと入れなくて困ってます。
どうしたら良いでしょうか？ 今って、皆さんIE対応どこまでしてるんですか？
IE11のみ？ ようつべでアップしないでvideoタグでMP4アップすると音は出てるけど動画が映らないんだけどなんで？ >>301
いちおie9～
アクセスログ見ると、macと同じくらいいるから >>301
ie11のみ
flex使いまくり
書き方少しだけie用に気を使うけど >>301
趣味サイトはIE11のみ、仕事なら料金次第
「どんな環境でも問題なく読める」ということと、「どんな環境でも全く同じ表示になる」は
どちらも「対応している」と言えると思うけど、対応の仕方は違いますよ IEなんかポイっだよｗ
今時の素人はスマホで見れれば満足する みんな仕事依頼を初めて受けるためにポートフォリオをアップする時、サーバー代を払ってサイト作りましたか？ >>308
無料のレンタルサーバーがあるんですね;探してそれ使ってみます！ありがとうございます！ 日本だけIE利用率高いんだよな
リモートワークとかリモートスクールが増えたせいで
また10％近くまでシェア伸びやがった 広告を２枚横並びにする場合divよりtableの方がいいと思うけど
divを使う利点ってありますか？
tableだとwidh指定しなくても広告サイズにあわせて伸び縮みしてくれるから 同業者に見られたときに
div＝まあ普通・まあ分かってるよね
table＝こいつ分かってねえな・仕事任せられん
という評価 >>312
マークアップ的にNG
個人のサイトなら自由にすればいいけど
企業や依頼されたサイトでそれやるのは
あとあとの保守の面でもマークアップ的にもマイナス評価 右カラムのラベルから選択して、
表示したい画像のサムネイルが並んでほしいものを開くという工程で
そのサムネイルが画像全体の表示にならないのでその絵が何なのかわかりません。
全体をサムネイルで見せる方法を教えて下さい
https://2021testsaite.blogspot.com/
↑テスト用サイトです。
ナマケモノの画像の方は元画像のサイズは1200?630とバカでかい画像なのに
全部表示されてます。アドバイスお願いします。 >>319
そもそもサムネイル画像が正方形に加工された状態で出力されていて、CSSじゃどうにもならない
使ってるテーマを改造しないとダメなんじゃない？
Bloggerでアイキャッチ（サムネイル）のサイズを変更する
ttps://toaruhetare.net/7445 >>320
ありがとうございます
全部の記事の最初に入れるんですよね？
1つめ
<img expr:src='data:post.thumbnailUrl'/> 変わらず
下の残り2つは書き方がわからずそのまま文字が出てしまいます。
resizeImage(イメージURL, 新しい画像の横幅, 画像のアスペクト比)
resizeImage(data:post.thumbnailUrl, 120, "1:1") >>321
<img expr:src='data:post.thumbnailUrl'/resizeImage(data:post.thumbnailUrl, 120, "1:1")
>でもだめです、、 >>321
【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法
ttps://www.limosuki.com/2020/01/blogger-qooq-photosize.html >>323
<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 240, "1:1")'/>
これ書くと開いた画像の右上に四角い空白が出ます。
何も変わらないです。
1行目に入れていいんですよね？
CSSは入れたら変わりましたが
自分は小さくしたいのです。全体が見れるようにしたいのであります、、
何がおかしいのでしょうか？ >>324
あ、HTMLのメインのページじゃなくメインを修正ですね、ちょっとやってみます。すみません >>320 >>323 ありがとうございます
https://2021testsaite.blogspot.com/
画像は小さくなったのですが、今度は余白が余りすぎます
どのへん触ったらいいのでしょうか、、
3列に表示したいのです。 >>326
それだと250px幅の正方形画像を出力してるだけだから、元画像のアスペクト比にしたいなら
<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 250;)'/>
とかじゃねーの？
3列にしたいならCSSで.list-itemのflex-basis:49.5%;を32.5%とかにする
あと、ついでに.list-item-imgにobject-fit: contain;指定しとくとか >>327
ありがとうございます！
まだ実行する時間ができませんが、感謝を先に、、 >>327
49.5%を三等分するから32.5％
.list-item-imgにobject-fit: contain指定でサムネと同じ画像比率になりました。
ありがとうございます
https://2021testsaite.blogspot.com/
見ていただけたら幸いですが、
縦の長さを均等にしたいという欲望が出てきまして、、
どこにそのコードがあるのでしょうか。。 >>329
それと
横列列が3つ埋まらないと
真ん中が空いてしまいます。
6つ入れれば大丈夫ですが、、 >>327
何度もすみません。
タイトルを入れ忘れたのでずれてたみたいです。
が、どれかが2行とかだと又ずれる仕様ですね、お騒がせしてすみません。
問題は5つだと真ん中が空く問題なのです >>329
元画像のアスペクト比で画像が出力されないのな
そもそも何のテンプレ使ってんの？
>>331
最下段が左右に分配されるのを左寄せにするのは#listのjustify-contentを
justify-content: flex-start;
ただ、これだとアイテムの間隔が無くなるから、.list-itemにmargin-right: 5px;とか適当に
タイトル無しで空きを埋めたければ、同じく#listのalign-items:を
align-items: stretch; >>332
全部できました。驚きです。ありがとうございました。
あのーPCブラウザーで画面幅を狭くすると
3行構成だったのが2行になります。
これは固定することって可能でしょうか？。。
それとですが
携帯側で見るとラベルとかそういったものが表示されなくなってます >>334
ちなみに
このページなんですが
https://irasutofree.blogspot.com/
WEBで見るとトップページが何も書かれていなくて
スマホで見るとしっかりラベルも表示され機能してます。
今までコードを教えていただいたHPです
https://2021testsaite.blogspot.com/
トップ画面のホームにすでに絵が並んでます。
これが関係してますか？ >>334
2列になるのはflexboxによるレスポンシブ対応になってる
3列固定は#main-contentのwidth: calc(100% - 346px);を、固定値にすれば可能だけど
画面の小さいノートPC等の端末で見る場合に横スクロールが発生する場合がある
>>335
PCでもスマホでも同じものしか表示されないけど、前者の方はそもそも記事投稿してある？
それぞれブログとしては全く別物だから、同じテンプレ使ってても記事無いなら何も表示されない >>336
ありとうございます
ページを作るわけですね？
トップのURLが変わってし舞うという理解でいいですか？
https://irasutofree.blogspot.com/p/blog-page_4.html?m=1
このサイトはスマホもちゃんと表示されますが、
コードを修正してきた今までのサイトは
https://2021testsaite.blogspot.com/p/main.html
このようにスマホでは上の方のHPのようにきれいに表示されません、、
何がおかしいのでしょうか？ >>337
WEBでスマホ画面確認する場合
どこかリンククリックして見るとおかしくなります >>337
> ページを作るわけですね？
違う。「投稿」に記事はあるのか？って話。
このテンプレの場合、トップページに表示されるのは「投稿」一覧であって「ページ」一覧ではない。
「ページ」を作成してもトップページには何も表示されないし、「投稿」に何も無ければ
何も表示されない。
「ページ」と「投稿」は別物だから、それぞれの個別記事はPCでもスマホでも表示のされ方が違う。 >>339
ありがとうございます
記事は投稿されています。ナマケモノの写真を投稿からUPしてみました
https://irasutofree.blogspot.com/search/label/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88
それ以外にイラストも以前に投稿してみたものです。
しかし、オレンジ色の女の子のイラストやホームを押すと
又空白に戻ってしまいます。何か間違ってますでしょうか？
それとスマホの方はWEBの左のカラムがそのまま表示されてるだけのようですが
その投稿がうまくいった場合
教えていただきながら作った
https://2021testsaite.blogspot.com/
このサイトのスマホ版のようにリストなどのない
出来上がりになるのでしょうか？ >>340
もう一度、「テーマ＞HTMLを編集」で上手く行ってる方のテーマのデータを全て上書きコピペして
それでダメなら、もはやスレ違いなのでBloggerのスレで聞いた方が早い
後半の質問はちょっと何言ってるか分からんが、単にモバイルデバイスでモバイル版を設定してるか
デスクトップ版を設定してるかの違いじゃねーの？ >>342
ありがとうございます
最初のページに移植しても無理でした。でも問題ないんです。
教えていただきながら進んだサイトの方でできて、
新しいテストサイトに移植してもちゃんと表示されてるからです。
そこでです。言われたままモバイル設定をデスクトップ設定に変更したら
ちゃんとできました！！！感謝です。 >>342
おかげさまで未完成ながらも理想の形になりました
何度もお付き合い頂けて本当にありがとうございました。
今後も進めていくうちに問題が山積みかもしれませんが
諦めずに勉強したいと思います。
又何かあった時
かまって頂けたら幸いです。
ありがとうございました！ >>342
恥ずかしながら戻ってまいりました。
https://2021testsaite.blogspot.com/
15枚の画像をアップしてみたんですが
1Pめが9枚分のスペースがあるのに
7枚で次のページ、次のページも7枚です。
object-fit: contain;をこのように入力したのですがなにか関係ありますでしょうか？
}
.list-item-img{
display: block;
width: 100%;
object-fit: contain;
} >>345
分からないことは質問する前に先ずググろう
トップページに表示される記事数を設定する
ttps://www.howtonote.jp/blogger/ini/index3.html >>345
あと、object-fitは1:1の正方形サムネイルを出力してる今の状態では
何の意味も無いから、元画像のアスペクト比で画像を表示させないなら
無くてもいい >>347
ありがとうございます。HTMLに目が行き過ぎてました、、ｗ
一つうまく行かないのがありまして、、、
スマホ版で
このブログ内検索を一番上に持っていきたいので
https://fujilogic.blogspot.com/2020/03/searchbox-in-navibar.html
このサイトのようにやりました。
ナビゲーションバーに検索バーを加えました。
しかし
スマホの方だと上のオレンジ色のところを押さないと出てきません。
これを常に表示したいのです。押さなくても
現在の私のテストサイトです
https://2021testsaite.blogspot.com/
アドバイスお願いします、、 >>348
>検索BOX可愛くないですが事務的なデザインのやつ貼ることに成功しました！
ナビゲーションバーをタブ押さずに常に開いた状態で表示したいので
やってみます、、 >>348
先ず、検索ボックスの挿入場所が間違ってて参考サイト通りに出来て無いっぽいから
出来てる前提で説明するけど
#navigation-contentのdisplay: none;をdisplay: flex;にして
#navigation-button:checked ~ #navigation-contentのdisplay: flex;をdisplay: none;にすれば
デフォルト状態だとナビゲーションが表示になって=マークをタップすれば非表示になる >>349
何が何だか分からんけど、デザインはCSSでどうとでもなるので
まぁ、頑張って >>350のCSSは
ナビゲーションって書いてあるとこの
@media ( max-width : 768px ) {
って書いてある下にあるやつな
displayのnoneとflexを入れ替える感じ >>352
おそくまでありがとうございます～～！
できましたー感動です！！
まだ問題ありそうですが、検索かけて自力でやる努力をしながら
やってみます。又何かあった際は是非ともよろしくお願いいたします、、、
本当にありがとうございました！ えーこんにちは。、またまたです。が
https://2021testsaite.blogspot.com/
このサイトのサングラスの女の子が縦に並ぶのも大問題なのですが
その下の一番新しい投稿に5人の男の子が写ってます。
アイキャッチの画像だけ変更して
開くと5人のイラストが5つ個別でサムネイルのように並んでます。
これはサイトからHTMLをコピーしてどんなものかと触ってみたのですが
うまく行ったと思いきや、WEBでの方で列が、ずれてしまってます。
これはどこを触ったらいいかお願いします、、 >>354
直接的には.list-itemにCSS（特にflex-basis）が効いてないのが原因
list-itemに横幅の指定が無いと、タイトル文字列が自動的に折り返せない
で、何故CSSが効いていないのかというと、.list-itemの上（183行目）に余計な
「}」があるから、これを削除する
結局は余計なことしてるから不具合が出るので、おかしくなったと思ったら
いじったところを調べよう >>356
あー、あの中から
たった一つのそれを探して頂けて本当にありがとうございました！！！
うまくいきましたー！ >>358
文字列？
タイトルは長ければ折り返されるだけなので、そこはお好きにどうぞ >>359
タイトル入れてなかっただけでしたーｗありがとうございます！！ https://www.bambi.pro/entry/blog-eyecatch-list
アイキャッチ画像をヘッダーの下に貼り付ける内容ですが
750行あたりの記事表示部分に移植しました
このサイトのスマホ２列用を入れたのですが
WEB側もスマホ側も二行になりません
数字を変えてもうまくいきませんし、画像も小さいです。
理想を言えば
WEB側は3行 スマホ側は2行にしたいのです。
どのへんを触ればいいのでしょうか？お願いします。。 >>361
貼り忘れましたサイトです
https://2021testsaite.blogspot.com/
750行あたりの記事表示部分に移動させると、
どのページ開いても常にそのアイキャッチ画像が見えるってことですよね？
本当は邪魔ですがそういうテンプレートだから
そこに表示させたらずっと表示される設定なんでしょうか？ >>361-362
どこに貼り付けたのかは厳密には分からんけど、パンくずリストなんかに混ざっちゃってるから
挿入部分がおかしいんじゃないかと
挿入するなら730行前後にある<div class="container">の上辺り？
というか、単純に挿入したところで他の部分で上手く行くとも思えないけどね
よく分からないのなら、はてなブログとかBloggerとは別物のソースを安易に使わない方がいいよ >>363ありがとうございます
https://www.moca-memo.com/2020/02/blogger-qooq-header.html
このサイトのようにやって見ました
中くらいにある
Blogger「QooQ」ヘッダー下にアイキャッチ画像付きリンクを表示する方法
という項目です。
CSSを入れたので
780行あたりにが指定箇所可と思い
HTMLを入れてみましたがそこだとこうなります。
https://2021testsaite.blogspot.com/
ヘッダの下に配置されてしまいます
尚
864行目にも同じ画像HTMLを入れてみました。
場所は
タイトルのテキスト
検索して頂けたら出てくると思います。 >>364
色々いじり倒してると、もはや行数言われても、どちらが何なのかが分からんのだけど
どこに挿入するのが、あなたにとっての正解なの？
どちらが正解で、正解の方で困ってる事を教えてくれないと答えようが無い >>365
ごめんなさい、、
https://2021testsaite.blogspot.com/
こちら側を採用したく、
できればWEB側は
https://www.irasutoya.com/
のように3行でメガネのイラストを配置したいと思ってます。
理想としてはスマホ側では
https://www.irasutoya.com/?m=1
この様になったらなーと思ってまして
2行で並ばせたいと思ってます。 >>366
だったら、CSS部分の..article-containerにflex-wrap: wrap;追加するぐらいでいいんじゃない？
現状でもスマホは2列になってると思うけど >>367
ありがとうございます
入れました！
スマホは二列ですが
WEBだと
画像6個で縦に並んでしまいます
大きさを固定して
3行で2行、3行と並んでくれるようにしたいのです、、 >>368
いや、どこに入れたのか知らんけど
先ずは/*=== article window ===*/って書いてあるとこのちょっと下にある
.article-containerの直下にあるarticle-container単独で入ってる行を消して。
んで、同じ箇所の.article-containerの後の{}でくくられた中にflex-wrap: wrap;を入れて。
で、入れました！ってのは間違ってると思うので元に戻そう。 >>369
すみません、検索していた文字をそのまま打ち込んでしまってましたｗ
それで、
下に並んでいるイラストの枠のように幅固定なりサイズ指定などはできますか？
.article-box{
box-sizing:border-box;
border:2px solid whitesmoke;/*画像の枠色*/
width:25%;
padding:0px;
margin:30px 15px;/*画像周りの空白*/
overflow:hidden;}
このへんだと思うのですが
width:25%;を大きくすると2行になってしまいます。 答えてくれる人とメールなりでやりとりすればいいのでは？ >>370
幅固定のリサイズ指定など、ってのがよく分からんけど
現状、article-boxの左右のmarginが15pxあるのでwidthとの合計が、.article-containerの幅をオーバーすると、改行される。
3列のままarticle-boxの幅を広げたければ、例えば
width: calc(100% / 3 - 2%);
margin: 30px 1%;
にするとか。
widthの部分は横幅100%を3分割して（3列だから）、marginが左右1%ずつで2%分を引くっていうのがcalcのカッコ内の計算。
margin部分の30pxは上下のmarginを指していて、1%は左右のmarginを指す。
なので、もっとarticle-boxの横幅を広げたければmarginの左右幅を、もっとpxとかで小さな値に変更して、それに合わせて
widthの2%部分を変更すればいい。 ほぼ占有じゃん
過疎ってるスレとは言え度が過ぎてると思うよ >>372
ありがとうございます！！
とてもとても理想になりました！！感謝です
超わかりやすく解説ありがとうございます。
調整してみたいと思います。 >>374
微妙に違うスレあったのね
次スレ候補検索で間違って移住してしまってのかも
移動しますわ
ご迷惑をお掛けしました こんにちはツイッターとの連結についての質問です
Bloggerでの
https://2021testsaite.blogspot.com/
よろしくお願いいたします。
https://www.howtonote.jp/blogger/setting/index4.html
このサイトのように全6行の1.2行めをを書き換えて
新しい投稿に画像の記事を書いてUPしても
ツイッターで表示されません。
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html
こちらの方でやっても書き出されません。
新しい投稿をすれば連結するという期待をしてるのですが
なにか根本が違うのでしょうか？
理想の形は
https://imgur.com/a/wwtQxHl
です >>379
>>380
ブログに投稿と同時にtwitterに自動投稿をしたかったのですが
Bloggerは非対応のことでした。
お騒がせいたしました！ すいませんHTMLの入門書を一冊読み終えた程度の入門者なのですが
remとemと％とvhとvwがよくわかりません…
凄い簡単な例を出して教えて欲しいです
1.375remとか書いてあったらどういう計算をすればいいのでしょうか？ 埋め込みSVG使えばいいのに、とか言っちゃいけないんだろうな(言ってる) こういうことも出来ますよってだけで
効率とかじゃないんだよ こういうのって何かツール使うの？
それともちまちま
ここら辺の位置にこの楕円を…とか
頭の中で想像しながらコーディングするの？ ツール使うならSVG画像でしょうね
これはエクセルアートとかそのたぐいだよ
ちまちまやるしかない 昔はテーブルでマリオとかファミコンのドット絵を描くとかあったなあ https://www.irasutoya.com/search/label/%E9%81%8B%E5%8B%95
このページの2段めの階段を上り下りするサムネイル？2枚ありますが
クリックすると縦に2枚の絵が表示されて
サムネイルで2つ表示するようにしてると思うのですが
自分で普通に入れてもなりません。
https://2021testsaite.blogspot.com/
これのやり方を知りたいのです。
よろしくおねがいします >>397
コードを見ていただきたいのですが
https://jsfiddle.net/15k0tsqL/
なんかサムネに表示される画像が貼ってあります。、なんですかこれ >>398
個別ページの最上段の画像が、一覧ページのサムネイルに使用されるっていう仕様だから
一覧ページのサムネイル用に別途画像を用意して、個別ページ最上段に置いてる
でも個別ページでは表示させたくないから非表示にしてるってだけ >>399
ありがとうございます
自分でやってみるとサムネ画像も表示されるんですど
どこが非表示の書き込みなんでしょうか？ >>400
いらすとやのHPをブラウザのデベロッパーツール使って見てみると
個別ページに表示されている画像の上あたりにサムネイル用画像が
置いてあって、display: none;で非表示されてる
とりあえず、これでも読んでみ
目から鱗！Bloggerのアイキャッチを任意の画像にする方法
ttps://www.iloilo-good.com/2017/04/blogger_20.html >>405
なんでサムネイル用画像2枚貼ってんだ
まぁ、2枚貼ったうち1枚目は非表示になってるから動作的には正しいわな
ドット？そんなもん知らんがな >>407
イラストやだと、
https://jsfiddle.net/15k0tsqL/
このようにページに貼って表示しないように難しくやってるけど
教えてもらったものは、画像を引っ張ってくるやり方ですね
ありがとうございます！
Bloggerって画像どこに保存すればいいのか謎 いらすとやの方はページソース473行～の
img.postthumb{
width:1px;
height:1px;
display:none;
}
で消してる >>409
ページに入れりゃいいってもんじゃないんでしょ？ https://starperm.blogspot.com/
画像が3かける3 で
9枚並んでほしいのに
7枚で次のページになってしまいます
この辺おコードかと思いますが、
https://jsfiddle.net/qe81kr2p/
改善策お願いします、、
同じｈｔｍｌのはずなのに
https://2021testsaite.blogspot.com/
こっちではちゃんと表示されます、、 >>415
設定＞投稿＞メインページに掲載する投稿数の上限 既存のサイトをダークテーマに移行したいのですが、cssを自動でダーク仕様に書き換えてくれるソフトウェアはないでしょうか？ JavaScriptのイベント処理で
取得要素.style.backgroundColor
取得要素.style.color
で背景と文字の色変えるだけいいやん 初めまして
先日からiPadでhtmlのプログラミングを勉強し始めました。
テキストエディタはTextasticを使っています。
画像の載せ方を勉強しているのですが、＜img src=”画像アドレス”＞の画像アドレスの部分がわかりません汗
画像データは自作したhtmlファイルと同じicloud上のフォルダへ格納しています。
どうすればよろしいでしょうか？
ご教授願います。 >>422
どう分からんのかが分からんけども、とりあえずコレとか読んでみて
【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
ttps://webliker.info/78726/
特に相対パスってとこを重点的に読んで理解しておくといいかも >>423
iPadでのパスの書き方がわかんないんですよ汗
Win10とかならやったことあるので分かるんですが・・・
やっぱり初心者はiPadとかでいきなり勉強するより
PC買って正攻法で勉強進めた方がいいみたい
諦めてPC買って勉強することにします。
参考アドレスありがとうございます。PC購入したら活用させていただきます！
また分からないことがあったらよろしくお願いします。
ありがとうございました。 >>424
その画像ファイルはhtmlファイルと同じフォルダにあるの？
同じフォルダ内なら
src=”画像ファイル名“でいい
さらにフォルダ内にあるのなら
src=“フォルダ名/画像ファイル名“でいい
一つ上のフォルダにあるんなら
src=“../ファイル名”
さらにフォルダ内にあるのなら
src=”../フォルダ名/ファイル名”
2つ上なら../../、3つ上なら../../../となっていく
それはあまりよろしくないから普通はフルパスで指定する
ローカル環境の場合は
src=”file:///パス”
webサーバー上の場合は
src=”http://ドメイン名/パス”
とりあえず作ったhtmlファイルと同じフォルダ内に画像置いて試してみては？ macbook airを使ってます
エディターはmiとAtomならどちらが良いですか？
出来れば理由もお聞きしたいです atomはとっくの昔に開発終了してるから
多くの人がvscodeに乗り換えてる 今はvscodeかな
macならターミナルでvimも使えるようになるべき CSSでmarginとかline-heightのピクセルを書く時に０pxの場合は０だけでも良いですか？
何かで不具合でたり0pxと書いた方が良かったりしますか？
例
h2 {
margin :20px 0 20px 0;
} progateでHTML CSS学習→本を読んで実際にホームページ作ってみるというのを３冊分やりました。
次は何やるのが効果的だと思いますか？
HTML CSSよりもword pressなんかをやって幅広く学習した方が良いですかね？ wordpressやるなら先にphpやっといた方が役に立つ HTMLで下記のようになった場合、1番上のh2は、他にもh2があるのでclassを付けるのはわかりますが、
2行目のtableは、他にtableが無いのでclass="info"とclassを付け無くても良いように思います。
class付ける、付けないって何か基準はありますか？
<h2 class="clear">店舗情報</h2>
<table class="info">
<tr>
<th>住所</th>
<td>〒199-9999 或留県九寺楽市九寺楽町3-30-8（<a href="access.html">地図</a>）</td>
</tr> 個別にcssやjsで操作したい時にclass名を付けたりするけど
そうじゃなければh2もclass名は無くてもいいよ そもそもclassを何故付けるのかを理解してないな webサイト作るのにnode.js必要かぁ？
アプリ作りたいとかならわかるけど >>437
reset以外の目的では、要素セレクタは一切使わず、必ずclassをつける
これやっとかないと3年後には!importantまみれになるぞ Ruby on Rails では、HTML, SASS/CSS, JavaScript,
jQuery, Bootstrap, Node.js(Webpack, Babel)
VSCode, Linux, Docker Compose, CircleCI、データベース
最近のカリキュラムには、YouTube で有名な、雑食系エンジニア・KENTA も言ってるように、
Vue.js, React, AWS Fargate, Terraform も入る
最近のKENTAの教育体制により、Rails の未経験者のレベルが、
10年以上のプロよりも、技術力が上になった！
基本、Udemy とか、どこかの学校のカリキュラムが変わると、
すべての学校が追従するから、技術スタックが永久に上がっていく
就職競争だから、下がる事はない。
皆、KENTA・AWSのくろかわこうへいのサロンを掛け持ちしてる
ES2015 では、VSCode, Node.js(Webpack, Babel), Docker Compose などは必須 Vue.jsとjQuery
なにが違うの？
どっちもライブラリーっしょ？ 質問です。メールを送って貰う用にmailtoタグでサイトにアドレスを記述したのですが、リンクをクリックしてもメールソフトにgmailを選んだ場合だけ何故か宛先が空になってしまいます。
フォームだと面倒くさがられるのであえてメールにしてるのですがどうしたらよいですか？記述は間違ってないはずです。 記述はこれです。?subject=質問"やbccを消してもうまくいきません
<DIV align="center">
<a href="mailto:www@yahoo.co.jp?bcc=xxx@e.jp?subject=質問">上手くいかない場合はメールお願いします</a></DIV> なんか違うメーラーでも無効なアドレスがありますになってしまいます… <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<table border="1">
<tr>
<tb>表1</tb>
<tb>うんこ</tb>
<tb>うんこ</tb>
</tr>
</table>
</body>
</html>
borderが機能してくれません。原因もわかりません。
助けてください、、、 >>445
とりあえずコレでも読んで、スクリプト使ってみるとか
メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト
ttps://www.webcreatorbox.com/tech/mailto >>450
凡ミスでした！
ありがとうございます、笑 >>451
tdはtable dataの略って憶えとけば間違わない hはヘッダって予想がついたけどrはrowのことだったのか！へぇー！ preloadでcssを非同期でDLだけさせて、任意のタイミングで適用する方法と、
単純にbodyの閉じタグ直前で通常の方法で適用するのと
どっちがよいのでしょうか？
非同期でレンダリングをブロックしないからといって、レンダリングに必要な
ものをDLするのは妨げてますかね？ HTML5ってなくなったのは本当なの？
結局HTML5勉強しないままだったんだけど
その前なHTMLでいけるのか？ livingってのがもやっとするよねぇ。結局いつの仕様に合わせりゃいいのやら。 別にバージョンが巻き戻るわけでもなしlivingの仕様に基づけとしか >>459
まじか...
ずっとHTML5でやってたんだけどww だからバージョンアップしないIEにしとけって言っただろ こんなもん別に今までのノウハウがあれば記述なんか大して違わんしすぐ慣れるだろ そうそうxhtml4からhtml5の時もそうだったけど別に差分要素だけ把握しておけば良いからコストは低い レスポンシブでサイトを作る際は、ウィンドウサイズはいくつで確認するという目安はありますか？
自分はこれまではなんとなくchromeのF12の開発者モード？で、
画面幅を375px～1440px辺りで動かしつつ、見た目問題なさそうならいいかなと思ってましたが、
例えば↓のアニメ公式サイトだと、851px～付近だと左側のほうの文字とかコンテンツへのリンクバナーが見切れてしまっています。
https://maidragon.jp/2nd/
「PCだったら1000pxくらい、タブレットだったら768px、スマホなら375pxで確認してそれ以外の幅のときは気にしない」
みたいなにやるのが主流でしょうか？
それとも制作者とか、制作会社の方針次第、といったところでしょうか 主流はよくわからないけど、
スマホ320まで想定範囲に入れとくかな、、一応 PCとタブレットのサイズは本業の人でも悩むやで
SPは最小サイズを横320pxか375pxにしておけば間違いはない ipadproのみを指定するmediaqueryの書き方ってありますか？
わかる方教えて頂きたいです。 inkscapeでサイトのモックアップを作ってみたのですが、どうも寂しい印象になります。改善点があれば教えて下さい。
https://imgbox.com/w7l8a5Qa
背景などを使うと難易度があがるので、今回は白背景でいくつもりです。
参考にしているのはハテナやこちらのサイトさんです。
https://hatenablog.com
mochi1999.blog.えふしー２.com >>475
アニメDVDラベルは通報案件だな
ありがと >>475
デザインの質問？
白背景ならグリッド無し？だったらスクショはグリッド非表示でお願い
はてなブログのヘッダー要る？デザインテーマでも作るの？
デザインはとりあえず白背景のHTMLテンプレートとか拾ってきて
参考にしてみるといいかも >>476
何のことですか？
fc2のサイトのことですか？ >>477
そうです、デザインの質問ですね、、、スレチかもしれませんが
グリッド消しました
https://imgbox.com/7x2WtYvf
はてなのヘッダはいらないのですが、何か寂しいなとおもって入れてみました、、、
これはデザインの問題というより、コンテンツがないから寂しいのかもしれません
白背景のサイトを参考にする場合、はてなのテンプレがきれいだなと思います
Fc2のサイトみたいに、背景がつくと難しくなるんですよね
色も白とグレーと黒くらいに制限してみようかなと思います >>479
なんか寂しかったら別のなにか追加すればいいのでは？
はてなのノリでそれ以外（アイコン等）もどこかのサイトからのコピペだったりした場合は
著作権的に問題ないものを使ってね >>480
アイコンですね
font awesome使ってます 質問なんですが、やはりブログカードは横長ではなくて、２列のタイプにしたほうがにぎやかな感じはあるんでしょうか？
これもつくってみますが 仮で入れてるアイキャッチは全部同じ画像じゃなくて、何種類か別の画像にするだけでも印象が変わる
あと、もうちょっと余白やマージンに余裕を持たせて、文字もサイズ調整してメリハリ付けた方が見やすい
にぎやかにしたいからって隙間を埋めようとすると、ドンキの圧縮陳列みたいになるから注意な
むしろ余白を活かしてバランス取った方が、デザイン的には良いかも >>483
https://imgbox.com/3behpWt3
ありがとうございます。
画像と余白と、横の広がりを意識してみたらマシになりました。
実践していきます。 wordpressで作ったサイトなんですが、にぎやか感を出す方法ってあるでしょうか？
無料ブログの共通ヘッダとか個人的に好きなんですよね。
あんなのありますかね。 閲覧数一覧のフォント1～2段階小さいほうがいい
今のだと詰まって見える
ボタンのbackground画像はいらん
青い帯とボタンの間の余白もう10～15px
検索は検索ボックスとボタンを1行で
最新記事と閲覧数一覧のbottomに線入れて 回答どうも。
サイドバーのフォントサイズは、メインコンテンツが目立つように小さめにするってことでしょうか？余白が足りないということですか？
少し改善しました。
https://imgbox.com/2423el8Q
確かに余白を取るとサイドバーがスッキリ見えますね
デザインは特にここを参考にしてます。
こういうゴチャ感
https://blog.はてなblog.com/
トップのメニュー背景画像も、ここをパクってます、、、 デザインカンプ制作のデザインだけに関する質問はスレチのような？ Facebookとhtmlはなにか関係ありますか？ facebookのwebサイトはhtmlで作られている デザインの話は、スレ違いなのだけど、話題もないからいいのかね まずは色なしでデザインしたほうがいいんでしょうか？
白黒のみとか h1に画像を入れると画像に隙間が出来ます。
h1に設定したフォントサイズより小さい画像だとこのような現象が起こるようです。
高さ15pxほどです。
font-size:0などとすると大丈夫なんですが、これは正しいんでしょうか。
jsfidleで再現出来ませんでしたねぇ、、、; line-height 1 か
vertical-アライン bottom
入れてみて 再現出来ました。
font-size:0;で問題ない表示になってますが、外すと駄目ですね。
https://jsfiddle.net/bgegg/rcf3j9om/24/
どうも小さい画像だと問題があるようです。 そうですか。
小さすぎる画像なので、今回はテキストにしときます。 htmlをあまりいじれない場合は疑似要素を使うといいんでしょうか？
確実に動いてくれれば良いんですけどね。 疑似要素でコンテンツをインナーに入れることは可能ですか？ https://jsfiddle.net/bgegg/q2mte1c9/
ブログカードを３列にしたいのですが、gapによる余白はborder-boxに含まれないようで、３列になりません
改善策があれば教えて下さい
絶対値指定はあまりやりません gap消してliのwidthをcalc((100% - 2em) / 3)じゃだめ？ floatの前のinline要素がfloatの後ろに回り込む事に今し方気づいたのだけど、これって使っていい仕様なのかな？
MDN等でも
<section>
<div style="float:left">1</div>
<p>...</p>
</section>
とfloatは前側に置いてあって、俺もそういう使い方しかしてないし、見た事も無かったが、
<section>
<p>...</p>
<div style="float:left">1</div>
</section>
でも同じ見た目になるのだけど、これって使っていい仕様？
前後入れ替えるといったらflexかabsoluteかって話だったけど、場合によってはfloatもあり？ 522追記。
どうやらinline要素の幅が短くて、floatの幅と合わせても1行に届かない場合になるようだ。
522で言えば、<p>の中身が数文字で<div>の幅と合わせても<section>の幅に足りないと再現する。
ただこれだと、長さ依存であって現実的には使えないけど。 サイトのごちゃ感を出したいのですが、版面率という概念があるみたいですね。
余白を狭くすると見づらくなるんですが、どうやって版面率高めますです？ 素朴な疑問なんだけど印刷物なら紙面に制約があるけど
Webで版面率って気にするものなん？
それともちょっと野暮ったいけど激安店のような目詰まりした感じでもほしいの？ デザインの話はさんざんスレチと言われてるのに
懲りずにまた聞きに来たの？ 阿部寛のサイトっぽさ出したいなら
HTML3で作ればいい 愛生会病院みたいなとこはどうなってるのかと思ったら
愛の妖精プリンティンは健在で、意外と美人な孫娘に継がれてるようだた gifファイルのフレーム数ってどうしたら割り出せるんですか？ Wikipediaに「阿部寛のホームページ 」というページがあってワロタ
この板の誰かが作ったのか 昔、youtubeの個別ページにおいてサイドへRecommended for youがひたっすら記載されていた時代
www.youtube.com##span[class="ytd-video-meta-block"]:has-text(Recommended for you)
的な記述で全部削除していました
最近それらの仕様削除を知り、ならば他のサイトで気に入らないテキスト語句を上記の部分入れ替えで使おう！と試すものの、有効とならず
用途はあるサイト内において、テキストを一括削除することです
この上記記述に過不足または間違いがあるのでしょうか？よろしくお願いしますm(vv)m ふと、spanの部分を変更したら自己解決できました
仕様の根本を無理解のままコピペ運用すると、こういう面で苦労しますね
失礼しました px固定幅と可変幅のセルが入り混じったテーブルがあって可変幅のセルが複数ある場合、可変幅セルの幅をそれぞれ調整したい時はJSでやるしかないですか？
本当はwidthをcalcで指定したかったんですが、テーブルセルには対応していないようだったので
CSSだけで調整できる他の方法があれば知りたいです 状況が端折られすぎてて条件を後出しされても困るので
ここにもっと具体的なソース貼って
https://jsfiddle.net/ Jsfiddleがscssを展開しなくなってるな
サービス全体の不具合っぽい 不便だ 説明が難しいのですが…元画像のサイズを100%とした時に
画像を%で縮小指示をする方法はありますか？
例えば、横幅サイズ100px、150px、180pxの三種類の画像をブラウザ幅に対して％でサイズを指定するのではなく「元画像サイズより50%小さく一括指定」というような事がしたいです
上記の例だと元画像はそのままパソコンで表示、スマホの時は「50px、75px、90px」でそれぞれ小さく表示したいのですが、実際は画像の数が多く一つ一つ計算してpxで指定するのが大変なので、まとめて同じ縮小率で表示する方法があれば教えていただけると嬉しいです 工数不得手もスマホにはスマホ用の画像用意した方がよさげ
特に横長の画像だとPCとスマホを共用ではスマホ側はどうしても小さくなる とりあえずってとこだと、メディアクエリとimg周りにtransform: scale(0.5);でどうにかなる？
ちょっと面倒だけど、綺麗に表示させたいならスマホ用に画像を一括変換で用意して
imgタグにsrcset属性を追加してレスポンシブ対応
レスポンシブの画像切り替えができるsrcset属性
ttps://www.site-convert.com/archives/1342 スマホ用に見やすくしたいだけなら、元画像を縮小という考え方は最適解ではないと思うけどなあ
クソデカい（小さい）画像が存在すると、縮小という方法では見易さという目的は達成できなくなるし
使用するスマホによっても見やすくならない
そもそもスマホ画面で表示された三種類の画像それぞれ、倍にすれば元サイズだと想像できたからといってどうなるの？と思う
スマホで見やすい固定サイズのサムネイル三種類表示して、タップしたら元サイズで表示するという挙動で十分では ×元画像を縮小という考え方
○元画像から割合で縮小という考え方 みなさんアドバイス有難うございます
そして後出しごめんなさい！大事なことを伝え忘れてました
SVG形式の画像なのでできれば一つの画像で済ませたかったのです…
>>550の方法で一度試してみます transform: scale() で縮小すると元サイズ分の余白出来ちゃって結局元サイズが分からないと位置調整しづらい
zoom: 0.5; なら余白出来ないけどFirefoxが未対応
自分ならスクリプトでやるかな svg画像といっても色んな表示方法があるしなぁ
条件が変われば回答も変わるのよね >>556
これもそうだけどdisplay: contents;なんてのも知らんかった
こういうスレやtwitter見てないとどんどん知らないの出てくるわ この世界は流れ速いから常にアンテナ張って情報収集してないと置いてかれる ちょっと聞きたいんやが、
UTF-8とUTF1６LEとUTF16BEって、何を基準に使い分けたらいいんや？？
それぞれの構造というか情報が送られる仕組みの違いはなんとなくわかったんやが、
どういうサイトにどういうことに適しているのかってのが色々みてもあんまわからん。。。
急いではないから誰か教えてくれると嬉しい ↓読めば分かると思うが、webサイト制作においてはutf-8の一択で
文字化けのリスク等を考えたら、使い分ける余地は無いような
HTML Standard 日本語訳
https://momdo.github.io/html/semantics.html#charset >>560
確かにそうみたいですな…
ありがとうございます(_ _)
ちなみにそうなると他の16とかの存在意義はなんなんでしょうか… >>561
このスレ的には存在意義は無いし、考える必要も無いが
用途なんてググればすぐ分かる
UTF-16 - Wikipedia
https://ja.wikipedia.org/wiki/UTF-16
UTF-32 - Wikipedia
https://ja.wikipedia.org/wiki/UTF-32 >>563
なるほど、だいたい理解できましたわ
勉強になりました(_ _)))
ありがとうございました bootstrapやらtailwind CSSはフロントエンドエンジニアの方が詳しい 会社のホームページ作りたいんですが
一般的なweb制作でもlaravelなどのフレームワークは使ったりするんでしょうか？
それともhtmlとcss（とbootstrap等？）のみで作ったりするんでしょうか？ メールフォームなんかを自分で実装するならPHPも使う
最近はnext.jsやらnuxt.js使う所もあると思うけど
単純な静的サイトならHTML/CSS/js位しか使わないよ ツイッターにおいて
「おすすめツイート」および「いまどうしてる？」の[さらに表示]についているpaddingを調整すると、バックグラウンドのサイズを残したまま行幅のみが短縮されます
twitter.com##main>div>div>div>div:nth-of-type(2)>div>div>div>div>div>div>aside>aに付与されているpaddingです
twitter.com##main>div>div>div>div:nth-of-type(2)>div>div>div>div>div>divにてサイズを強制伸縮している様子なのですが、flex-grow:0!important;をそこへ投じても伸縮が解除されません
この場合、他にどこを疑えばよろしいでしょうか そりゃまぁflex-grow: 0; は初期値だから追加したところで無駄だわな
というか、結果的にどういう表示にしたいのかが、よく分からない Googleタグマネージャーなどの計測タグのソースを外部ファイル化してSSIで読み込むのって特に問題ないですか？ グラフィックデザイン中心に仕事してるWEB初心者だけど、Dreamweaver頼みのコーディングって世間的にはダメなの？ DWは昔使ってたけど、コーディングに慣れてない初心者なら、入口としては別にいいんじゃない？
ただ、DWがダメって事は無いけど、世間的にはVisual Studio Code（VSCode）が主流になってる
使い勝手も機能拡張でカスタマイズできるし、動作も軽くて人気だからネットにも情報が多い
無料だし、試しにインストールしていじってみたら？ >>575
趣味なら自由にしたらええけど
現場では今や遺物だし手書きコーディングが基本だから
DWじゃないとわからないって人は現場ではいらないかな DWはどうやったって重すぎるから最初からやらないほうがいいと思う >>575
まったくもってそんなことはない
ここでDWがダメとか言ってる奴らは要するに自分らが使い慣れたツールにしか目が行ってないだけで
それ以外はダメだと先入観で語ってるに過ぎないよ。DWの仕様を昔の記憶のままでアップデートしてない >>576
VSCodeも環境によっては突然重くなることもあるけどね
大抵はアドオンの入れすぎやそれぞれの相性問題だけど
本体そのものをアップデートしないとCPU使用率を100％ちかく喰うような挙動もある >>578
今時のPCでDWが重すぎるとか無いわｗ 単にPCがボロいだけじゃない？
VSCodeほど軽くないけどDWは最初からやらない方がいいとか
こんなのは仕事で使えないような挙動とかこういうのは大嘘だから プロの人にDW小馬鹿にされるのは知ってるけどいいんだー
初めて触ったソフトだからひよこの刷り込み的なやつ
vscodeも使うけど おま環持ち出したら何でも重くなるし軽くもなるだろｗ
低スペックPCでも、ある程度軽快に動作するってのは大事だと思うが
ところでDWって糞コード吐かなくなったん？ コーディングの補完とファイル管理として使うならアリだけど
それ以外は使い物にならんだろ面倒すぎるわ
普通にコード書いた方が早い このスレにDW慣れしてる化石みたいな奴がいるけどこいつはVScodeが桁違いに使いやすいのを知らないらしい
ポケベルとスマホぐらいの差がある vscodeはなんやかんや便利
だが、dwに突っ込んだスニペットから離れられなくて
自宅コーディングはdwから離れられない(´･ω･`)
出向先に無ければ無いで諦めつくけど > だが、dwに突っ込んだスニペットから離れられなくて
> 自宅コーディングはdwから離れられない(´･ω･`)
VS CodeがDWくらい使いやすいスニペットが実装されてればいいのにな あと、もしかしたらvscodeにも適切なプラグインがあるかもだけど
dwは適当なところでコード画面を折り畳めるのが良い
vscodeで折り畳めるプラグイン試したけど、何かしらの始まりから終わりまでを畳むので
ヘッダ内のcssの下からbody内の特定箇所までをガッツリ畳みたい時とか
泣きたくなる
似たような理由で適当なとこを畳みたい時も。 >>585
DWの仕様も時代とともにアプデされてるのを知らずに
昔のままだと思い込んでるお前さんみたいなのもなｗ >>581
オンボロPCでもサクサク動く有能VSコードと違ってスペックを選ぶクソDWって認めてるレスだな >>592
仕様が変わったつったって天下のVSコードと比べると微々たるもん
鈍足成長を続けてきたクソDWを過大評価してるお前のオツムは相当やばい DWで制作中のサイトにSNSリンク貼ったんだけど
リアルタイムプレビューで試しても
「◯◯◯◯◯（SNSサイト）で接続が拒否されました」
て弾かれるんだけど
普通に<a href="（SNSサイトアドレス）">ではだめなん？ 流し読みしてていつからDWスレになったんだよVScodeスレだろと思ったらどっちでもなかった >>593
オンボロPCでもサクサクとかまずそういう貧相な環境で仕事してますというの突っ込まないとなｗ >>594
天下のとか言うが頻繁にアプデしないといきなりCPU使用率100パーとかザラだし
アドオン側もアプデや～めたの放置で責任を負わないのもフリーゆえよな >>598
もうお前限界越えて何言ってるのかわかんねえよ vscodeのアプデなんてデフォで自動更新ONじゃなかったか？
CPU使用率100%なんてなったこと無いわ
このスレに来る初心者なんかが必要そうな、利用者の多い有名な機能拡張なら
大して重くもならない
機能拡張云々はブラウザでも一緒だろ
利用者が多ければ代替や後継が開発され易い利点もあるんだし
変に偏った擁護なんてせずに、それぞれメリット・デメリットで語ればいいのに >>597
ビルダーの話題が出ないだけマシだろｗ
>>601
vscode関連のCPU使用率に関しては検索すれば事例は出てくるからそちらを参照
5ちゃんという場はとかく敵を設定して一方を罵ることで話が進むゲハ傾向だしな
あとAdobeのサブスクをアドビ税と罵るようにシェアが大きいとこを叩く 大事なのは成果物の方だから
自分が使いやすいもの使えばいいだけですしー
ツールの信者になるのが一番あほらしす >>602
Adobeが悪いなんて一言も誰も書いてない
Vscodeと比べてDWがクソと言うことを頑なに認めないお前が1番アホ >>604
昨今はこういう風にクソか神か両極端な発想しかできないバカも増えたｗ >>603
まったくその通り
方程式よりも答えが合ってるかどうかが重要なのだ >>605
お前の悪いところはクソのDWを事もあろうにVscode様より上だと思い込んで、なおかつ嘘情報を発信しているところ
ゴミがゴミをゴミじゃないと言えば害悪だろ 使えるツールは多い方が良いかもしれない
サクラエディタで書けないやつはバカ
てことでよくね？ Bracketsは結構好きだったなぁ
DWにも組み込まれたりしたのに、さっさとサポート終了しちゃって
その際にVSCodeに移行しろってadobeが呼びかけてたのは笑ったな
ユーザー層が違うってのはあるにしても、DWの方じゃないんかい！っていうね VSCodeはDwより簡単にローカルサーバー立てられるのが強いわ htmlやJSよりもCSSの方が大変そうだな、CSSってちゃんと知識ないとちゃんと装飾できなそうだし > CSSってちゃんと知識ないとちゃんと装飾できなそうだし
そんなレベルからの話？ｗ 質問です！
https://coco-factory.jp/ugokuweb/move01/5-1-15/
レスポンシブでこのハンバーガーボタンを導入したんですけど画面幅に若干収まらず画面が
ガタガタしてしまいます。原因教えてくださいよろしくお願いします。
このようなケースになったのは今回が初めてです。。 #g-navって要素が画面をはみ出しちゃってるみたいなんですけど、、 それだけじゃ分からんですよ？
コード書いたjsfiddle張ってください jsfiddleの貼り方わからないので調べます！
ちなみにですがスライドショーのｊｓのプラグイン導入するとなります！！ >>618
右上にsaveクリックするとURL変わるからそのURLをここに張ってください 質問です。
<hr>をインラインにしてテキストの余白を埋めたいのですが、簡単なよい方法がありますか？
<table style="text-align:center"><tbody>
<tr><th>colA</th><th>colB</th><th>colC</th><th>colD</th><th>colE</th><th>colF</th></tr>
<tr><td><hr></td><td colspan="4">説明</td><td><hr></td></tr>
<tr><td><hr></td><td colspan="4"><hr style="display:inline-block">説明<hr style="display:inline-block"></td><td><hr></td></tr>
</tbody></table>
と説明の両端に<hr>を配置し、 (上記2行目)
--------説明--------
のような見た目にしたいのですが、実際は説明が4カラム幅に足りない部分は空白になり、
------ 説明 ------
となってしまうのがカッコ悪いので何とかしようとしています。
ここで<td>内にinline-blockで<hr>を突っ込み、上記3行目のようにすると、
インラインにはなりますが、<hr>の幅が広がらない為、表示されません。(幅0pxになる)
(width:30%とか明示的に指定すれば当然表示されますが、文字の余白を自動的に埋めて欲しいのです) これについて、<hr>を適切に自動的に広げる方法はありますか？
広げるにはflex-box使わないと駄目ですか？(使っても今回は駄目そうですが)
なお下記URL等で為されている、文字を<hr>の上にrelative等で重ねる手法は、
文字の背景を固定的に塗りつぶしているのが駄目です。
親の背景色が変わることがあるため、文字の背景色は親と同じでなければなりません。
これについてはテキストを<span style="background-color:inherit">内に入れても効きませんでした。
(多分直の親はtransparentだから。CSSで具体的な色を持った親と同じ背景色をクラスで当てて対処すべき案件？)
https://codepen.io/scottzirkel/pen/yNxNME
https://switch-box.net/css-hr-decorations.html の11
やろうとしてる事自体は普通に需要があると思うので、簡単に出来ないのはちょっと疑問なので質問です。
こちらはWeb系ではないのでこの辺の塩梅がよく分かっておりません。
ただ、インライン要素（幅は最小）に対して幅を適切に広げるのはそもそも無理筋なのかとも思ったり。 display:flexとflex-growで設定できるけど
hrタグを装飾として使うのは推奨された使い方じゃないよ >>623
ちなみに予想に反してflex-boxであっさり出来ました。
flex-baseの初期値がautoなので無限に伸びるんですね。
(ここは固定長だと思っていたので、無限に伸びるのは予想外だった)
> hrタグを装飾として使うのは推奨された使い方じゃないよ
実は調べてるうちにそれっぽい事は書いてあったのですが、
では本来はこれはどうすべきですか？
<td>の全幅を埋めてくれる水平線が欲しいのですが、
<td><div style="border: solid gray 1px"></div></td>
でも見た目はほぼ同じですが、これの方が<hr>よりは適切ですか？ >>623
お早い回答ありがとう御座いました。
互換性にも問題がないようなので、多分これで行きます。
ちなみに本件、<hr>説明</hr>で出来る仕様であるべきだと思うんですけどね。
普通に使う機能だと思うので、一々flex-boxの小細工が必要な意味が分かりません。
なお<hr>については意味論で使えとの事なので、多分<div>にします。
これも、
> 以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、
> この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、
> 水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。
> https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
と書くのなら、駄目な使い方と正しい使い方のサンプルへのリンクを貼ってくれ、と思うところです。
いずれにしても、こんなに早く回答来るとは思ってなかったので、助かりました。
とりあえず後1週間位はここを見てますので、何かあればよろしくお願いします。 読み上げるべきかそうでないかで見解分かれそうな気もする 意味があるかはさておき、無コストで可能なら対応してる方がマシかと。
あと、変に嵌りたくなければ想定通りの使い方に徹した方が無難ですし。
ただHTML5で装飾系排除の動きがあったのは初めて知りました。
元々<strong>や<i>や<s>とかデタラメすぎたので、順当だとは思いますが。
ただこれだとMDNのhrのページにある例、<p>間に<hr>を挿入するのも間違いで、
正しくは<p>のlast-child以外にborder-bottom, margin-bottom. padding-bottomで罫線にすべきだと思いますが。 ページ全文読み直そうか
一番上の例で水平線を書きたい場合は「適切なCSS」を使えとも書かれてる
水平線なんて設定したデザインによって多種多様に回答はあるからCSS指定する必要はないと思う
一番最後の例文は雑だけど意味がある区切りにしてるように見えるよ <p></p><p></p>で既に別段落である事を明示的に記述済みなのだから、
そこにわざわざ<hr>を入れるのは装飾の意味でしかないんですよ。これは両方の例でです。
ただ見落としてましたが、上の例では私がやりたい====$====をモロにやってて、しかも622と同じ手法ですね。
わざわざ探した私もマヌケでしたが、やはりこの形式(水平線の上に文字を書く）のは基本だって事ですよ。
折り紙文化のない欧米デハー、
----キリトリセン----や----山折り----、----谷折り----が無いので仕方ないのか？と思ってましたが、
やっぱこれは仕様から抜けてるだけですね。（仕様を考えた奴が馬鹿）
折角エディタが付いているのだから p:after で同じ事が出来るかと試してみましたが、
こちらの環境では2度目の変更以降はまともに動作しないので諦めました。
ただ、同じ事は出来るはずで、</p><hr><p>での<hr>の存在意義は無いはずです。
（意味論的にも、表示論的にも） pタグ内にhrタグはNGだし、hrタグってもう使わないほうがいいのかなー 装飾としてよくあるデザインではあるけど、HTMLの起源が論文の記述用と考えるとそういう装飾はいらんかったのかもしれんな
まあこんなんでいいんじゃね？
https://design-levelup.com/webdesign/html_css_making_2/amp/ >>630
意味論で<p>区切り限定で使えという現行の規定を遵守するなら、
もう既に使いどころがないですし、廃止の方向かと。
>>632
同じ事を私は<div>でやってるのですが、::beforeと::afterの方がいいんですかね？
意味論的には疑似要素の方が妥当な気がしますが、(感覚的に)重くなりそうなので嫌ってきてます。
あと、JSを書く側からすると、JSで触れないのが気持ち悪いというのもあります。
ちなみにMDNのhrの記述は極めて充当ですね。私の疑問、
・私が知らないだけで、実は簡単に書けるのか
・仕様がゴミで、頻出ケースでも技巧を凝らす必要があるのか
について、第一の例で挙げる ----$---- で後者である事を明確に示しているので、
私が見落とさなければここで皆様を煩わせる必要もありませんでした。すいません。
正しい使い方の例が書けないのも、そもそも存在しないからですね。 ちなみに::afterにしてみたのですが、内容の有無によって表示高さが1pxずれるのはどういう理屈ですかね？
具体的には、
<tr>
<th><div class="hr_text"></div></th>
<th><div class="hr_text">AAA</div></th>
</tr>
..hr_text {display:flex; align-items:center}
..hr_text::after {content:""; border-top:solid gray 1px; flex-grow:1}
で第1カラム(内容無し）の方が第2カラム(内容AAA)よりも1px上に線が引かれます。
何か設定不足有りますかね？
第1カラムのheightを16px以上にすると同じ高さに引かれるので、align-itemsの際の四捨五入とかですかね？
ちなみにこれは空<div>でやってたときは問題なしでした。 636訂正。
空<div>でやっても私の環境だとズレます。どうやら単に私が気づかなかっただけっぽいです。
どのみちブラウザの問題なので放置で構いません。 下の様に年号を含めた日付をコーディングするならどんあ方法がスマートですか？
2022年1月1日（水）
2月3日（金）
5月3日（金）
↑「2022年」の幅で月日の部分の左側にスペースを空けたい >>640
遅くなりましたがありがとうございます。 どうかんがえてもXDの邪魔だものな
DWやFWと同じ運命 サムネに合った幅のキャプションを付けたいのだが、display:table以外の直接的な方法はないかな？
<div class="container">
<div class="caption">横に長いキャプション</div>
<a>サムネ</a>
</div>
で、ググれば
.container{display:table}
.caption{display:table-caption}
が出てきて確かに動作するのだが、
tableを作る気がない場所でこれはちとトリッキーなので可能であれば避けたい。
「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？
ちなみに既存他サイトはコンテナにwidthを逐一指定しているのも気になってる。
このtable指定でレンダリングが酷く遅くなる事は無いはずだが、width指定よりは遅いのも確実なので、それかね？ >>644
.contanerにwidth: min-content; >>645
ありがとう。動作しました。
MDNをググってその項目があるのは分かってたのですが、違う意味だと勝手に決めつけてました。
とりあえず一通り全部試すべきでした。お手数をお掛けいたしました。 >>646
ちゅーても、この場合「兄弟要素の幅に合わせる」って意味の使い方じゃないから注意な >>647
しかし意味は合ってると思うんだけども。少なくともtableよりは断然いい。
意味は「中身の最小幅」で、出来る限り縦に細長くなる。
英文テキストはスペースで折り返すから結果的に最長単語、
日本語は任意の所で折り返されるので問題なし、
サムネは折り返されない、
よって結果的にサムネ幅になる。
多分この使い方を想定している気がするが。
(サムネが小さすぎる時にテキスト幅になるのはそれでいいし、それの方がいい)
なお他サイトでwidth逐一指定なのは多分ブラウザ対応だ。
chromeならmin-contentは46以降なので、おおよそ2016頃以前は使えなかった。
この辺も気にするならtableの方がいいのかもしれないが、
今回に関しては対応してないと多少見栄えが悪くなる(スカスカになる)だけなので、今のところmin-contentで行く予定。
そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
出来るのなら勿論ビンゴだが、
元々それを探してinheritだ100%だ色々こねくり回して駄目だったんだけども。
ちなブラウザ対応はchrome49以降(≒WindowsXP以降)、IEは不要。 >>648
> そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
いや、元々のオーダーがそうだったからｗ
→ > 「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？
でも今回のはどちらかというと「コンテナの横幅をサムネ合わせる」という代替案だから
それを考慮しないで変にいじるとレイアウトが崩れる場合があるから注意してねって話>>647 >>649
了解だ。
当初の要求と適切な実装が異なるのは、CSS流の思考がまだ出来てない俺の問題だ。
初心者が間違った実装を目指して空回りするのと同じ。 質問させてください
<！-- saver from url=(0039)https://abehiroshi.la.coocan.jp/menu.htm -->
例として阿部寛さんのページをださせていただきましたが、この文はどういう意味ですか？ >>651
saver？savedじゃなくて？
savedなら"saved from url="でググってみると話が早い >>653
savedでした
ありがとうございます
savedで調べてみましたがこれって普段は表示されないってことですか？ >>654
そりゃコメントアウトされてるからね
>>651みたいにエクスクラメーションが全角じゃダメだけど
Comment - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Comment >>655
ありがとうございます
!は間違えて入力してしまいました ┌───────┬────────┐
└───────┴────────┘
みたいな枠を作りたいのですが、どうすれば枠の大きさを調整できますか？ >>657-658
どういうタグで枠を作ってますか？
色々な方法があるので、枠部分のHTMLとCSSのサンプルをここに書き込んでもらうか
https://jsfiddle.net/
などにコードを貼り付けて、saveして得られたURLをここに貼って貰えるとアドバイスしやすいです >>659
部分的でいいですか？
<table width="600" align="center" border="1">
<tbody>
<tr>
<td><img src="◯◯◯.files/△△△.jpg"></td></tr>
<tr>
<td>あいうえお</td>
<td>かきくけこ</td></tr>
といった感じです >>660
だったら、例えばtdの幅を
td { width: 50%; }
で一括指定するとか、それぞれ別の幅で指定したい場合は
tdにのclassを割り当てるかnth-child()等の疑似クラスで
個別にwidthを指定するとか色んな方法がある
あと、そのtableの属性値でスタイルを指定する方法は古いので
CSSで書き換えた方がいいかも >>661
<td { width: 50%; }>あいうえお</td>
といった感じですか？
CSS使いたいのですが全くわからないです… >>662
そのレベルで知らないのならまずは参考にするサイトを探すべきだよ。
例えばこのスレを普通のブラウザで見れば、すぐ下にmenubottomnavで枠付きボタンを等幅で並べてるし、
DevToolでCSSとHTML見比べてたら書き方は見当が付くだろう。
当初は見様見真似からだと思うよ。
最終的にはMDN等読んで優先順位判定を理解しないと駄目だが、
そもそも静的な部分(多分660はそう)はclass一発で当たるように作るべきだから優先順位は関係ないし。
ついでに言うとそれは多分tableの使い方を間違ってる。
tableは表が欲しいときに使うものであって、レイアウトを手動で固定化したいときに使うものではない。
外枠線が欲しいのならborderでやれば良いだけ。
このスレだとmenuitemに外枠線付けてるけど、これが普通のやり方だと思う。
(ただしその外側がliなのはどうかね？と思うけど)
分からないと言ってても分かるようにはならないから、まずは見様見真似でいいからやってみるべきだよ。
そもそも難しいものではないし。 >>662
タグ内のスタイルの書き方はちょっと違うんだが･･･
色々と説明しようと思ったけど、ここで説明するよりも、とりあえずこういうの読んだ方が早い
CSS 入門 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
https://saruwakakun.com/html-css/basic/css
表（table）の作り方と装飾の変え方【HTML＆CSS】
https://saruwakakun.com/html-css/basic/table
あと、呪文だらけで何言ってるか分からないかもしれないが、>>663が書いてるように
先ずは自分に合った上記のようなサイトを探して、参考にしてみるといいと思うよ >>662
さらについで。
多分その方法は「テーブルレイアウト」と呼ばれていた物で、ググると大体今は止めとけと出てくるはず。
https://allabout.co.jp/gm/gc/456372/
だから今更テーブルレイアウトしようとしてる事がそもそも間違ってて、
参考にしてる本が異常に古いとかじゃないとそうはならないはずなのだけど。
（テーブルレイアウトの入門サイトは多分撲滅されてる）
660の場合は多分inline-blockでwidth:50%で並べればいいだけのはず。
ただもし参考にしてるサイトがテーブルレイアウトの場合はどうするか微妙だが、
662見る限り君は他サイトを参考にした事もなくて勝手にデタラメに書いてるだけでしょ。
他サイト見てればそうはならんし、そもそもテーブルレイアウトのサイトを探す方が今は難しいし。
だから可能性として一番高いのは古い本を見ながら書いてるパターンだけど、
それ自体が今のWeb開発としては間違ってる事を認識した方がいいよ。
どうしても本にこだわる奴も一部居るけど、それはもう無理なんだよ。
所詮は慣れの問題だから、画面で学ぶのに慣れるしかない。 >>661
実際は文章の長さがそれぞれ違うから個別にするつもりです
<td width="50">あいうえお"</td> 悪いことは言わないから
インラインにスタイルつける手法は非推奨なので
それから離れてCSSを覚えた方がいいよ 初手から勉強しなおしてきます…
あと自分は>>660さんと同じ質問がしたかった別人ですので… >>666
その指定だとwidthは50pxになって、例に書いた50%にはならないから注意な
ちなみにCSSのプロパティは使わずに、HTML5では廃止されてる非推奨属性で
widthを指定しようとしてるのは何か理由があるの？
<td>: 表データセル要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td
>>669
他人の質問に割り込むなら「横からですが」とか、別人と分かるように書こう >>666
それはみんな分かってる。
tableは「中身が全部表示される大きさになる」ので、
同じ大きさの中身なら各カラムも同じ大きさに必ず『自動的に』なるから。
だから「中身が全部表示されて超巨大なtableになって困ってます」なら分かるが、
660はフローレイアウトを止めようとしてるだけなので、
それはテーブルレイアウトと呼ばれた10年以上前の手法であり、使い方を間違っているというわけ。
動かないわけではないが、今新しく始める人がやるのは完全に間違ってる。
フローレイアウトは慣れないと何がどこに表示されるかさっぱり分からないので、
全く知らない初心者が感覚的に分かりやすいテーブルレイアウトに引かれるのも道理ではあるが、
フローレイアウトの方が圧倒的に便利だからみんな使っているわけで、
理解して慣れるしかない。
やってみれば、単によさげに上左から埋めてるだけであり、ほぼ全自動だから超便利だよ。
それで自動的なレイアウトから変更したければ個別にCSSを当てるだけ。 >>669
全部勉強してからやろう、と考えてるのならそれも間違い。
CSSは浅いがかなり広大なので、最初に全部学ぶのには向いてない。
664のサイトは分かりやすいから、それ系を10～20ページ、4～8時間かけて基本を抑えて、さっさと使うべき。
ただまあ、初手で勉強するほどの内容はそもそも無い。
666なら、
<td class="myColumn">あいうえお"</td>
.myColumn{width:50%}
とクラスを介して分離するだけだから、見れば分かる程度だろ。
なお661の
> td { width: 50%; }
は分かりやすさ優先でそう書いてくれてるはずだが、実際はこういうタグに当てるのは止めとけ。
グローバルスタイルになるので、サイト全体でそうしたい場合以外は余計に面倒になる。
HTMLをマークダウン等で手書きしてるのなら面倒だろうが、
一々クラスを当てるのが基本だし、そうした方が後々上手く行く。 ありがとうございます
%抜けてました
特に理由はないですがとりあえずHTMLのみで書いてみようと思ってCSSをつかってません
CSSを使いこなせないってのもあります 左上から適宜埋めたいが、埋まらないのなら真ん中に表示する方法ってある？
<a class="container">
<img>
<img>
<img>
</a>
のようにサムネを纏めて表示し、枚数も大きさもそれぞれの時に、
.container {text-align:center}
.container img{float:left}
.container img:only-child{float:none}
として1枚だけのときは問題なく真ん中に表示される。
複数枚のときも左上から埋めてくれるのはいいが、
埋まらないとき、(＝右に入らず下に表示されるときとか）
当然だが右側に空白が集められてしまう。
この場合に、真ん中(中央揃え)に表示する方法ってある？ （続き）
サムネは1枚目は大きく、2枚目以降は小さく、1枚目の隙間を埋めるように表示したい。
以下１は全部でサムネ１として、（以下同様）
１が縦長なら、
１１１１２２（空白）
１１１１２２
１１１１３３
１１１１３３
１１１１４４
１１１１４４
１１１１
１１１１
１が横長なら、
１１１１１１１１（空白）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２３３４４（空白）
２２３３４４
みたいに。この場合の（空白）を左右均等にしたい。 すまぬ、色々やってたら多少進んだので自己レスで補足。
.conteiner{display:inline-block}
で上辺を埋めきれていない場合は container幅が中身と同じになるらしく、結果的に中央揃えされる。
上辺を埋めきって、或いは入らなくて下側に折り返した場合、
右側は空白になるが、その部分も含めてcontainer幅になるらしく、中央揃えはされない。
分かりにくいのでもう一度書くと、以下。
上辺を埋めきってない場合、下記左右の空白Ａは同じ幅となり、希望通りになる。
（空白Ａ)１１１１２２（空白Ａ）
（空白Ａ)１１１１２２
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１ （続き)
上辺を埋めきって下に折り返した場合、左詰となるが、これを出来れば中央揃えにしたい。
１１１１２２（空白Ｂ）
１１１１２２
１１１１３３
１１１１３３
１１１１
１１１１
１１１１
１１１１
１が横長の場合、元々下に折り返されてるので、左詰になる。これも出来れば中央揃えにしたい。
１１１１１１１１（空白Ｃ）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２（空白Ｄ）
２２
今のところの解釈だと、float指定されたときに「実際の幅」でwidthを計算するようにさせられれば空白ＢＣはいけそうなのだが、どうか？
(可能であれば空白Ｄも中央揃えで均等にしたいが） >>678
駄目ではないけど、使っても無理じゃね？
なおブラウザはchorome49以降(WindowsXP以降）、IEは不要。
よってgridはNG。
ただflexは一次元用で、縦詰めと横詰め(677の2例）がそもそも無理臭いと見たが。
使うなら二次元用のgridだが、見る限り違うっぽいと思ってる。
が、まあ、flexやこの際HTML構造も多少は変更していい(div追加とか）から割と単純な解があれば募集する。
それを実際に使うかはまた別になるが。 XPは2014年4月9日にサポート終了してるのに
まだ対応必要なの？ >>680
それ以前に、最新ブラウザやgridなら出来るとかでもないのだから、外す意味がないだろ。 ちなみにもうちょっと補足すると、大量にサムネが用意されたときに、
敷き詰めて、可能であればそれを中央揃えで表示したいと思ってる。
（余白）１１１１１１２２（余白）
（余白）１１１１１１２２（余白）
（余白）１１１１１１３３（余白）
（余白）１１１１１１３３（余白）
（余白）４４５５６６７７（余白）
（余白）４４５５６６７７（余白）
まあよくある状況だと思うけど、
サムネの大きさはバラバラなので、上記のように綺麗に敷き詰められる場合ばかりではないが、
その場合はそれなりに敷き詰めてくれ、という事。
今のところfloatの問題は左詰になる事だけで、敷き詰め自体は上手く行ってる。（というかそれが仕様だが）
gridは多分、敷き詰めではなくフレームレイアウト向けなので、（なお使った事は無い）
敷き詰める事も出来なくはなさそうだが、色々余計な小細工が必要な気がする。
なお敷き詰め後にcontainerのwidthを手動で与えてしまえば、中央揃えにはなるが、
window.getComputedStyleで得られる値は空白込みなので、
やるにしてもJS側で幅をちゃんと計算しないといけない。（と言うほど難しくもないが）
今のところこれは面倒なのでやらないつもり。(左詰で妥協) flexで中央寄せした要素の中にfloatで詰めていけばいいんじゃないの、しらんけど 今あるコンテナの内か外にコンテナ追加して寄せれば？
･･･と思ったけど条件大杉で無理って言われそう >>683
やってみたが同様に駄目だ。
おそらく原因は同じで、floatで詰めたときのコンテナ幅が『右側の空白を含んだ状態で』親と同じ幅になるからだ。
だからブラウザからすると、ちゃんと「右側に空白があるblockを中央寄せ」している事になってしまう。
試した内容は以下。
.containerの親 {
display:flex;
flex-direction: column;
align-items: center;
}
>>684
外側は元々階層があるからコンテナモドキになってるが、flexで試したら上記の通り。
他に案がある？
あと、内側ってのの具体案は？ ちなみにただのinlineだと中央揃えにはなるが右下を埋めてくれない。
具体的には以下。
欲しいもの
(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１３３(余白)
(余白)１１１１３３(余白)
実際(display:inline;vertical-align:topだと)
(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１
(余白)１１１１
(余白D)３３(余白D)
(余白D)３３(余白D) その手のはgridが一番楽なんじゃないの
その次にflexで都度divか何かで囲っていく 文字で書かれると目が滑るし数字の意味が分からん
図で書こうや >>687
使った事無いが、MDN読む限り、gridは基本的にgrid上に配置したい場合で、
大きさがデタラメな物を左上から埋める用途ではない気がするけど。
（gridは自分でレイアウトを細かく指定したい場合向け）
例では分かりやすいように大きさを固定倍にしてるが、
実際はバラバラの大きさのサムネイルを、出来るだけ余白無しで固めて表示して欲しくて （←ここまでは出来てる）
ただ場合によっては右側に大きな余白が残るのが見た目気に入らないだけ。
grid使えば楽勝で出来る！とかなら対象ブラウザを変更する事も検討するけど、実際、grid使っても無理でしょ。
>>688
基本的にはそれ。
ただし、サムネの大きさはデタラメで、綺麗にgridには載らない。
まあ今一応gridも試してるが、やっぱりgridは「グリッドに載せる用」に見える。
（初めてなので使い方間違ってるかもだし、もうちょっとあれこれ試してみるけど） js使わないと無理ゲーじゃないかな
jqueryだけどこういうのとも違う？
https://masonry.desandro.com/ >>689
5chだと無理だろ。罫線書いてもずれるし。
同じ数字は同じサムネイルだと思えば分かりやすいと思うが。
１１１１１１１１
１１１１１１１１
は横長の１枚のサムネイル。
１１
１１
１１
１１
は縦に細長い１枚のサムネイル。 >>687
ちなみにgrid試したが、
auto-fillでもサムネ幅で勝手に埋めてくれるのではなく、
あくまでこちらが指定した幅のgridに載るだけのように見える。
（まだgrid初心者なので根本的に間違ってるかもだが）
>>688
ちなみにそのサイト確認したが、全部flexで、しかも子にもflex指定で、単なるblock扱いで埋めてるだけだな。
最初からcolspanやrowspanが分かっててそれ専用のHTMLを生成しているように見える。
何か知らんがおそらくフレームワークで吐き出してる感じ。
今回の俺の件にはこの手法は無理だ。 >>691
基本的にそんな感じ。
ただ、その例は4列に綺麗に入る（ように調整されている）が、こちらはデタラメな大きさなのが違う。
実際はニュースリーダーみたいな物を作っていて、
各ニュース記事では写真の枚数も大きさも不定で、
それらを表示する際、原寸だと邪魔なので小型化してサムネとして表示している。
だからサムネの縦横のどちらかはこちらが指定した大きさ(例150px）と一致するが、
もう片方はデタラメになってしまうし、順番もソースが載せてる順なので綺麗に埋まるとは限らない。
そして目標サムネサイズよりも小さい物は拡大しない為、上記「どちらかは150px」も常に成り立つわけではない。
ただ、記事にはこういう写真が付いてますよ、と分かればいいので、
出来るだけ余白を詰めてぐちゃっと表示されてくれて問題ない。
(というか文字を表示する場所を確保する為、出来るだけ余白無しで表示したい)
ただまあ、その例もgrid使いながらJS併用なら、CSSだけではきついのかな？
まあgridがどこまで出来るものか知らないから、
その例見てもどの部分をJSで補完してるのかピンと来ないのだけども、
微妙にrowがズレてるのも綺麗に埋めてるよ！という意味なら、それで当たりだ。 >>691
>>695
つかこれって名前が付くほどの超定番レイアウトなのか？
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
ただこれ(MDN)見る限り、行内で一番大きい物に合わせてるだけで、縦には詰め込んでないので、
{display:inline; vertical-align:top}
で同じ事が出来るはずだけど、何が違うのかよく分からん。
(691のサイトはそれ以上に詰め込んでいるので、違いは分かるが)
俺自身は普通に見かける、例えばtwitter等でも複数のファイルを添付した際、
１１１１１１１２２
１１１１１１１２２
１１１１１１１３３
１１１１１１１３３
１１１１１１１４４
１１１１１１１４４
みたいに表示されるのと同じ事をやろうとしてるだけ。
（ただし大きさはデタラメなので綺麗には埋まらないが、それは仕方ない) すいません696のこの部分撤回します。
> {display:inline; vertical-align:top}
> で同じ事が出来るはずだけど、何が違うのかよく分からん。
こちらの環境の問題のようで、MDNに書いてるとおり、configして見直します。 >>691は配布サイトだよ
配布されてるjsを使ってサイズ違いのものを
感覚的にタイル上に縦横の余白調整してくれるの すいません
スレ違いかもしれませんが…
「CGIの動作が可能なHTTPD」ってどういうことですか？ >>698
それは理解している。
ただそういう場合は大体「これを使ったらこんな事が出来ますよ！」と分かるようにしていて、
実際そのページトップのデザインがそうなってる。
masonryレイアウトも確認した。確かに691と同じような事をCSSで出来るようになってた。
出来るだけ詰め込め、というノリは俺が欲しい物と同じ。
ただ、今回はgridに載る必要はなく、詰め込めればいいだけなので、これではない。
gridも再度確認したが、基本的にgridに強制的に載せる為の物で、
逆に、grid関係なくとにかく詰め込めなら、通常のフローレイアウトの方が当たってるように見える。
実際は確かにmasonryレイアウトの方が綺麗に見えるのは分かるが、
今回は単にサムネを出来るだけ固めたいだけだから、やはりfloatが正しいように見える。
ただ、floatの場合は「入るのなら横に、駄目なら下に」でしかないから、
節操なくデタラメに詰め込まれ、綺麗なラインなんて出来ず、
場合によってはおかしな改行や空白が入ったトンデモ配置になるので、嫌われるのも分かる。
しかもfloatでは何も制御出来ない。
この辺考えてmasonryレイアウトなのだろうし、今回それを採用すべきなのかもしれないが。
今目指しているもので、最高に上手く詰め込めた状態なら、688になる。
ただしfloatの場合は688の"GOOSE"のような縦長ブロックが途中で差し込まれたら悲惨な事になるが。
masonryの場合は一応そういう事が発生しにくい分は優れてる。
今のところfloatで左詰のまま妥協するか、
或いはfloatだと実際の所綺麗には埋まらないので、
それがあまりに見にくければ、どうにかしてmasonry的にするか、という感じ。
（とはいえサムネが2枚以下の場合はfloatでもおかしくなりようもなく、大半の記事はそうなので、そんなに目立たない)
皆さん色々ありがとう。 こう書くのが正しいっつってコードの書き方に拘ったところで、見る人からすると
「あぁ、サムネ左に寄ってんな」で終了だけどな >>701
まあ気にしない人はそうね。
俺もそうだが、気にする人は気にするんだよ。
ただ、このスレの連中は気にするべきでは？
なおジョブスは色々と美的にうるさかったらしく、「フォントの話は…」てな事を言った奴は即首にしたらしいが。
https://www.youtube.com/watch?v=cNPZzNHHmkY
682のとおり、JSでの対応は面倒なだけで難しくはないので、
俺もこんなノリだと首にされるのだろうなと思いつつ、どうするかなという感じ。
ただ、全体が中央揃えで、一個だけ左詰めだと、何これ？とはなるんだよね。
それでいちいち「バグですか？」と聞かれてもウザイし。 ごめん、702は書き方が曖昧だった。俺は気にしない派ね。
まあどうでもいい話だとも思うが。 サムネのサイズをcssなり書き出しサイズなりで統一するのが
ソースも視覚的な見栄えも良くなりそうって思いましたこなみかん >>704
その通りだけど、外部ソースを読むのでそこはどうにもならん。
>>684
内部コンテナって、もしかして個別サムネサイズに合わせて<div>で688みたいに段組しろって事か？
それはさすがにHTMLを見た目全振りにしすぎてるし、
今のところ682方式の方がJSも楽なので、やるとしたら682になる。
ちなみによくよく考えれば2枚の時はデフォのinlineで結果的にも全く問題なかったので、
floatじゃないと埋まらないのは3枚以上の時であり、674で :only-child 使ってるのも間違いだったわ。 >>699
CGIが動作可能な状態に設定されたWebサーバ >>707
coverは切り取られるので使い物にならない。
使うとしたらcontainかscale-downなのだけど、object-fitはそもそも外形を維持してしまうので、詰め込みは出来ない。 この板にカキコしていいかわからんけど、昔なつかしホームページを作りたい。
いまは、htmlを頑張って調べながら作っている状況だけど
90年代後半、2000年代前半のホームページあるあるを教えてください！
たとえば、アクセスカウンターみたいな・・・・。
できれば、昔なつかしデザインが残っている老舗ホームページのリンクもほしい。 >>709
ttp://abehiroshi.la.coocan.jp/ >>709
まんまググれば実例がたくさん出てくる
スレの主旨から外れてるので、作る段階での疑問が出てきてからまたどうぞ fieldset をMDNで見ると
＞フォーム内のコントロールをグループ化するために使用します。
とありますが、記事本文で吹き出しのような枠の使い方は本来の使い方と反れますか？
<fieldset>
<legend>タイトル</legend>
本文
</fieldset> それだとCSS1行で目的達成できるので
でももうdivにしました >>709
その時代だとフレームやテーブルでレイアウトは基本だなｗ
アクセスカウンターや掲示板とかMIDIのサウンド鳴らしてうざがられるとか こんなふうに、入力したら動いてくれるタグとかってないでしょうか。
うまく説明することができず、申し訳ないですがリンクのように予め入力した時間に
電車アイコンが動くようにしたいです。
速度がだんだん早くなるとかそういうのはいらないので駅についたら泊まる、駅間は動く
という感じだけで構わないですから、どういう言語またはどのようにググればいいのか教えて下さい
https://loo-ool.com/rail/SI/38/ >>716
アイコン要素にCSS transition仕込んどけば、飛び先の座標を指定すると勝手に動くよ
どの時間にどの座標に居るかはJavaScriptでよきにはからって
必要な知識はCSS Positioning, CSS Transition, JavaScriptでの要素取得かな >>718
こんなのあったのか
未確認だけどiOSの挙動にも対応してるのかな？
してたらいいな CSSについての質問です
例えば
p {
color: red;
}
というのがあったとしますが
p {color: red;}
これではダメなのですか？ >>721
すいません、そこについて詳しくお願いします
機能的には問題なく動作するということでok？ >>722
721ではないが、そう。文法的には問題ない。
ただ、ネット帯域をケチりたいのなら、適当にググって出てくるminifierを使って限界まで詰めたほうがいい。 >>720
ぜんぜん問題ないよー
記述属性多いとは探しにくくなるけど、行数は節約できて一覧性は上がるね 今の時代にCSSの記述で詰めて帯域ケチるとかあんの？ SCSS使ってるから可読性の為にわざわざ余白やコメント残す必要無いし
CSSにコンパイルする時に自動的に余白は削れるようにしてるわ >>725
地味に効くし、技術的にはやらない理由はないし、実際大きいところはほぼやってると思うよ。
自分が参考にしてるサイトを確認してみればいい。 >>727
レギュレーションで決まってたりするしね >>723-729
ありがとうございます
機能的には問題ないのですね。
記述属性が多いと探しにくいとはどんな場合ですか？ >>730
こんなん
.p01 { color: red; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 16px; line-height: 1.8; text-align: justify; font-weight: 500; text-decoration: underline; padding: 0 0.5em; margin: 0 0 2em; }
.p02 { position: absolute; left: 0; bottom: 2em; color: black; font-family: 'Noto Serif'', sans-serif; font-size: 14px; line-height: 1.6; text-align: left; font-weight: 600; padding: 0 2em; margin: 0 0 2em; }
.p03 { color: #0005; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 12px; line-height: 1.5; text-align: justify; font-weight: 300; padding: 0; margin: 1em 0; }
最終のミニファイはツールに任せればいいので、見やすさとメンテのしやすさ基準で使い分ければいいんでない <h1>あかさたなはま</h1>
これに外部CSSファイルの
{margin-bottom: 0px;}
を適用させたいのですがどうすればいいですか？ >>732
h1{
margin-bottom: 0px;
} >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 >>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。
※stylesheet01.cssにはh1以外にh2などへの記述もしてます。 <link rel="stylesheet href="(path to stylesheet)/stylesheet01.css" />
を<head>内に記述 "ページ全体に背景グラデーションを掛ける"方法が参考書に記載されていて
疑問があります(参考書には何故そうなのか理由がなかったので....)
<HTML>
<div class="content">
<h1>主題 主題 主題</h1>
<p>文章 文章 文章 文章 文章 文章</p>
<h2>副題 副題 副題</h2>
<h3>副副題 副副題 副副題</h3>
<ul>
<li>9:30〜</li>
<li>11:30〜</li>
<li>14:30〜</li>
<li>16:30〜</li>
</ul>
以下2回ループ
</div> <CSS>
html{
min-height: 100%;
}
body{
background: linear-gradient(#9ad4fc, #dcffb8);
}
.content{
max-width: 900px;
background: rgba(255, 255, 255, 0.7);
margin: 60px auto 0 auto;
padding: 30px;
border-radius: 15px;
}
ここで疑問です途中でグラデーションが途切れるので
"html"要素に対して高さを指定するのはわかります。
何故、最小値の高さ"min-height: 100%;"なのでしょうか?
"height: 100%;"でも同く途切れずグラデーションが適用されす。
その理由が参考書や調べてもわかりません。 >>739
早速のレス、ありがとうございます。
もう少し具体的に解説して頂けないでしょうか?
自分のブラウザ(chrome)だと、"min-height: 100%;"も"height: 100%;"も
同じ表示結果になります。 >>740
.contentにheight:150vh;を追加してみると違いが分かりやすいよ >>741
あっ!本当だ....
"height: 100%;"だと途切れ、"min-height: 100%;"だと途切れません。
これは何故、"height: 100%;"だと途切れるのでしょうか?
自分の見解ですと、"height: 100%;"だと画面(ブラウザ)の大きさに対して
100%の高さが表示されるからだと思いました。
ずっと考えて眠れず今の時間まで考えました。 「css height min-height 違い」で検索！ すごく正しいようで間違ってる答えが量産されるってのはこういうことか ここで聞いてよい内容なのか悩んだのですがHTMLの事なので質問させてください。
自分だけが利用する目的のページに天気予報を貼りたかったので
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg(NHKの天気予報)">
と入力しましたが表示されません。
これはimg srcおよびHTMLでは出来ないことなんでしょうか >>748
単なる画像表示をしたいのであれば、src内の最後にある
「(NHKの天気予報)」を削除して
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg";>
拡張子jpgで終わるURLに変更してみて下さい >>749
あ、(NHKの天気予報)の部分はここで説明するために付け加えたもので実際にはjpg">となってます 稀に外部ドメインからの参照を弾いてるところもあるけど
前提条件として
画像のurlは問題ない？
別窓で画像のurl叩いて表示される？ >>751
ちゃんと表示されてるのでURL自体に間違いはないと思います。 一応、外部からでもローカルでも読み込めるけど
https://jsfiddle.net/xr2vjd16/
adblock系の機能拡張とかで弾いてるとか？
自分だけが利用する目的のページってのが、どういうものか分からんから
何とも言えないとこあるけど >>748
> これはimg srcおよびHTMLでは出来ないことなんでしょうか
別人だが普通に出来るよ。
出来ないのならDevToolにエラーが出てるはずだからF12押して確認すればいいだけ。 >>753
拡張機能等はいれてません。
検索エンジン(search.yahooに接続するだけですが)のような感じです。
<html><head>
<meta charset="utf-8">
<title>search</title>
</head>
<body>
<form action="search.yahoo.co.jp/search">
<input size="30" name="p">
<input type="submit" value="検索">
<br>
<br>
<br>
<br>
<img src="～
以下終了タグのみなので略 >>755
2chの規制でURLを省いてしまい分かりにくくなってしまったので…
jsfiddle.net/zogmhs76/ >>755-756
閉じタグ無いけど、そのjsfiddleで問題なく表示されてるが
そっちで表示されてないなら、完全におま環
機能拡張だけじゃなくセキュリティソフト等でブロックされてる可能性は？
複数ブラウザやスマホ等でも表示されない？
デベロッパーツールで当該部分はどう表示される？ >>757
終了タグ省いてすいません。
jsfiddleをRunするのは表示されています。
そこまで厳しいセキュリティ入れてるつもりはないんですけどね…
確認しているブラウザはIE6、Mypal29(firefoxベースのブラウザ)です。
どちらも表示結果は同じでした。
また別のPCでも試しましたが同様でした。
デベロッパーツールは明日確認してみようと思います。 Mypal29はマイナーブラウザ？なのか初めて耳にしたけど
IEは流石に変えようや…… Mypalブラウザはfirefoxベースというかpale monnベースというか
xpでも動作するってのが売りのブラウザ…ってことは、まさかのxp使い？
Mypal - Official Website
https://www.mypal-browser.org/
試しにインスコしてみたけど、普通に表示されるのでブラウザの問題ではなさげ
よく分からんがインターネットオプションいじれば治るんじゃね？（適当） つかさっさとDevTool見ろって。F12押すだけだし。
というかそれは開発手順を間違えてるよ。
お試しならDevTool上でエレメント選択して右クリックかF2でhtmlを改変するのが一番早い。
そんなことせずとも動く自信があるのなら鯖上のhtmlを改変してリロードでいいけど、
実際動いてないんだし。
ちなCSPの場合はおまサイトが原因になる。 www3.nhk.or.jpはTLS1.2/1.3だから自前で処理するFirefox/Pelemoon系なら行けるだろうけど
OS依存のIE6はTLS処理用の串でも通さないと見られないはずだよね >>761
デベロッパー見ようと今日開いてみたら問題なく表示されてしまいました。
質問しといてですが、何が原因なのか分からずモヤモヤしています。 >>759
IE6がインストールできる最上のバージョンなんです。 >>760
作成しているパソコンはメイン利用の2000です。
不具合を確認する際に使った別のパソコンはXPを利用しました。
リンク先の画像が貼ってある
www3.nhk.or.jp/news/
では問題なく表示されてたんですよね >>762
そうですね。
ただMypalで確認した際に画像が読み込めないにしても四角の中に×みたいなのが表示されてもいいと思ってたのでIE6でも確認してみました。
(IE6でも四角の中に×みたいなのは表示されてませんでした) なんかよく分からんが、キャッシュ関係とか再起動すりゃどうにかなる系の不具合だったのかね
今となっては検証のしようもないけども >>767
昨日はどうやっても表示されなかったので不思議です。
沢山のアドバイスをして頂いたのに検証ができずすいません。 >>765
身も蓋もないが環境が古すぎる…
自力でなんとかできないのに使い続けるのはちょっと厳しいよ >>769
まだまだ使えますから^ ^
PCの方は自力で何とかできているので使ってます XPも2000もOSのサポートが切れて10年弱だし使えるとは言い難いね
現におま環の誤動作出てるしここに質問にも来てるし
無理して使ってるだけじゃん >>770
スタンドアロンならともかく、サポート切れたOSをネットに繋ぐのは皆に迷惑かけることもあるからなあ
踏み台にならないよう念入りに警戒しておいてな >>770
使えてもIEは既に多くのサイトサポート対象外ですよ
セキュリティの面でも更新が続いているOS、ブラウザ環境でネットに繋いで頂きたい 特にこのスレには、使えるからといって化石を使い続ける残党のせいで
苦しめられてきた人が多いしなぁ
やっとIEのサポート切れて、たいぶ解放された感あるけど >>770
自分もまだ2000使ってる
8以降のOS嫌いなんだよね こりゃまたとんでもない糞爺が出てきたな。
勝手にしろとしか言えない HTMLの話と言いますかテキストエディタの話といいますか
スレチでしたらスレチとお願いします
便利と言われているVSCODEを使っています
https://i.imgur.com/TRcxf3L.jpg
今回事前にメモに書いてそれをテキストエディタに貼り付けて清書しているのですが、段落の<P>を初めとしたコードの入力が不便すぎて解決方法を知っていたら教えていただきたいです。
１ 既存文の行頭や文章間でコードを入れても判断してもらえない
２ コードが勝手に閉じる（任意でオンオフしたい）
という感じです。
ブログサイトの自動変換では余計なコードが多く文字数が超過してしてしまい投稿できないので自分で打つようにしました ショートカットを覚えて駆使してけば良さそうに見えるけど
vscodeの使い方ならvscodeのスレあるよ ショートカットでやってみます
ありがとうございました 【emmetのラップ変換】
タグで囲みたい文字列を選択
→ショートカット「Ctrl + Alt + ,（カンマ）」
→タグ入力（括弧無しで）
※複数行の場合、入力タグの末尾に*アスタリスク付けると各行がタグで囲まれる >>777
Markdown記法覚えてメモの段階から使うようにすると効率いいかもね >>781
特に飾るわけでもないのでこれいいですね 疑問があるのですが、拡張子が.htmlだと何も指定しないと文字化けするんですが、
.phpにすると文字化けしません。なぜなんでしょうか？
どうでもいいことなんですが気になって夜寝むれません。昼寝ています。 iframeをいくつか並べて内部に３ｄモデルを埋め込んだサイトを作ってます
iframeの表示領域をクリックして別の場所へ飛ぶ処理をしたいのですが
iframeに対してa hrefの指定ができません
クリックリスナーで何とかならないかと試行錯誤中ですがifame部分だけリスナーを取得できないです
iframeの表示領域に対してリンクを設定する方法教えてください >>786
iframeにnameつけといてaのtargetで指定すればいけるんでない？
子フレームのイベントはframesかcontentWindow使えば拾える
子フレームから子フレームはめんどいのでググってね 子フレームのイベントは拾おうと思えば拾えます
あくまで表示領域の部分だけ親フレームから親フレームとしてクリックリスナーを拾いたいだけです
自己解決ですが、単数のフレームの場合なんとか取得できましたが
複数のフレーム領域の取得はHTMLの仕様上無理らしいので諦めます >>789
フレーム内でのインタラクションが必要ないなら、フレームのcontentWindowにリスナー設定して遷移すれば複数だろうが単数だろうがいける
透明のボタンレイヤーを上に置くっていう単純な解決法もあるけど その場合ですとフレームの指定にタグ名であるframeを指定する必要があるので
最初の一つしかできません
座標指定系は調整が面倒なのですでに却下しました 全iframe の contentWindow にアクセスしたいなら window.frames でいいんじゃないの
https://developer.mozilla.org/ja/docs/Web/API/Window/frames なるほど
ここの人は根本的に日本語の問題解決が必要ですね > その場合ですとフレームの指定にタグ名であるframeを指定する必要があるので
> 最初の一つしかできません
これがよくわからなかったんだけど、
https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement/contentWindow
このページの例にある
> document.querySelector("iframe").contentWindow;
みたいなことやってる？
querySelectorは最初に見つかった要素しか返さない
複数が必要なら querySelectorAll があるが
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll すみません初心者ですが質問お願いします
文字を上下の中央に配置したいのですが
写真のコマンドだと何が間違っているんでしょうか？
少し上になってしまいます
教えてほしいです
よろしくお願いします
https://i.imgur.com/qpS4s3F.jpg >これがよくわからなかったんだけど、
あなたの日本語の方がよっぽど意味不明です >>799
top-wrapperの上下左右中央にレイアウトしたい場合は
display:flex;
justify-content:center;
align-items:center;
を追加してみてね >>800
横だが>>798が>>786が何をどう勘違いしてると仮定してどう修正しようとしてるかが分からないのはお前の日本語の問題。
まあこの文もががががなのでお前には読めなさそうだが。
(そして798の指摘が当たってるかどうかは別の問題)
あと多分、
> 自己解決ですが、単数のフレームの場合なんとか取得できましたが
> 複数のフレーム領域の取得はHTMLの仕様上無理らしいので諦めます
これも勘違いしてると思うぜ。まあご自由にではあるが。 >>801
ありがとうございます
一応画像のコマンドでも中央にくるはずだと思うんですが、何が理由で駄目なのか教えてもらえると助かります 上下中央合わせのレイアウトのために
line-heightの値をボックスの高さにするのは
使わないほうが良い
テキストが複数行になった際に行間がバカみたいに広がってしまうので >>804
なるほど
確かにそうなるとめんどくさそうですね
801の人が書いてくれたやり方も含め他のやり方を覚えるようにします
ありがとうございます プロゲートやってるものなんですが今日でhtml.cssの講座は全て終わりvscodeというものをインストールし環境構築まで終わりました
明日からは移動中は入門書を読み、家ではどんどんコードを書いていくこと（webサイトを作っていく事）をしたいんですが何かおすすめのアドバイスなどありましたらお願いします
ゆくゆくは違うプログラミング言語の勉強もやりたいんですが、とりあえずまだhtmlとcssの勉強をしようと思っています
今はドットインストールというものをやろうか考えています
お願いします 自分で考えた物でもどこかのサイトと同じようなデザインや機能を調べながらでも書くのが一番早いと思う
多分JavaScriptが必要になる場面に出くわすとおもう >>807
ありがとうございます
それはあるサイトを見て同じように作ってみる模写ってやつでしょうか？
多分やってみてもかなり詰まりまくると思うのですがその都度調べながらやってみるって感じですかね？
javascriptは必要になってくるんですね
どこかのタイミングで並行してprogateで講座やってみます >>806
そのレベルなら何をやってもいいから、問題は続くかどうかだけだよ。
ただ、ドットインストールにしてもプロゲートにしても、実際に働いてる奴は誰も相手にしてないから、過度な期待はしない事だ。
(誰でも○○を2週間やりさえすれば起業出来てウハウハ！なんて事を信じる事自体、ブラックバイトでカモられてる連中と同程度の阿呆。
この意味ではトップページで堂々とこれをやってるプロゲートの方が詐欺っぽいが、中身は見てないし見る気もないので知らん。
ただ、現実を言えば、「ドットインストール」を完了しました！→なら是非うちに入社してくれ！なんて企業は一つもないし、
「プロゲート」さえやれば即戦力！→なら誰でもいいから入社させて
2週間程度研修で朝から晩まで「プロゲート」漬けにすれば済むのだが、勿論こんな企業も一つもない)
とはいえ、やる気が続く何かを散りばめてるのだろうから、そういうのが必要ならありだと思うが。
ただ、やると決めてるのなら、今時は大学も講義資料公開しまくりだから、
大学生に準じる程度の能力があるつもりなら、本来は大学講義の方を参考にした方が効率はいい。
こっちは中身の確認も手伝ってもいい。
(初心者では無理だし。逆に言えばドットインストールやプロゲートは中身を確認するまでもなくゴミだと断定してるわけだが)
で、一応さらっとググって見たが、まあJavaScriptでよさげなのはぱっと見、無いね。
ただ、CS50というのが引っかかった。こちらはハーバード大の人気講義の日本語訳らしい。
> Week0 Scratch
> Week1 C
> Week2 Arrays
> Week3 Algorithms
> Week4 Memory
> Week5 Data Structures
> Week6 Python
> Week7 SQL
> Week8 HTML, CSS, JavaScript
> https://cs50.jp/
あーなるほど、この順で構築するのか、とは思う。
ただこっちはプログラマを育てるのではなく、プログラミングとは何ぞや？という講義のようだが。 >>809
ありがとうございます
単純に前々からプログラミングに興味がありとりあえず入口としてhtmlとプロゲートを選びました
プロゲートはただの初学者向けのサイトなので過度な期待をしてる人は居ないと思います
プログラミングの勉強を始めるきっかけ作りみたいに捉えられてると思います
これからhtmlをもう少し深掘りしてみようかとも思いましたが自分はwebサイトを作りたいというよりプログラミングを勉強したいので、HTMLは入門書を読むだけに留めてjavascriptというのをこれからやることにしました
大学講義はまだ無理だと思うのでとりあえず今はプロゲートからやっていきます
ありがとうございます >>810
> 自分はwebサイトを作りたいというよりプログラミングを勉強したいので、HTMLは入門書を読むだけに留めてjavascriptというのをこれからやることにしました
この判断は正しい。HTML/CSSは所詮見た目であり、プログラミングではない。
CSSで何が出来るかを抑えたら、それで十分。
（後はCSSでなんとでもなる、という範囲を判断出来れば十分)
> 大学講義はまだ無理だと思うので
大学一年＝高卒でしかないので、言うほど難しくも無い。
ただまあ、Cなら以前東工大や長崎大はまあまあよかったと思ったが、
そもそもJavaScriptは簡単ではあるが初学者向きではないので大学講義にもろくなものがなさそうではある。
プロゲートもドットインストールも有名だからそれなりには整備しているのだろうし、そっちに賭けるのもありだろう。
ただ、
> 自分はwebサイトを作りたいというよりプログラミングを勉強したいので
この場合は通常はPython(或いはRuby)が適切だとされる。
JavaScriptはWebサイト特化に近いし、非同期は初学者にはそれなりのハードルになるし。
そしてガチのプログラマを目指すのなら早い段階でCをやったほうがいい。CS50でいきなりCなのもこれ。
(Cは「使いこなす」のが難しいのであって、「使う」だけ、つまり多少バグっててもいいのならどの言語よりも簡単だから) >>811
ありがとうございます
大学講義についても少し調べてみようと思います
どれから始めればいいのか調べても色々な意見があり正直よくわからなかったのでjavascriptはなんとなくで選びました
pythonから始めたほうがいいって意見もよく目にします
他の言語より少し簡単なんでしょうか？
一度決めて取り掛かったらしばらくはその言語の勉強を続けたいのですが、そういうのも踏まえてpythonの方がいいと思いますか？
cについても調べてみます
ありがとうございます >>812
少なくとも各大学がどの順で教えてるかは参考になる。
そしておそらくCS50も、scratch以前はPython->Cの順で教えてたはず。
Cは各種言語の下敷きになってて、動作上も見え隠れするから、
Cを知ってるのと知らないのとでは理解力が全く違ってしまう。
(つまり、その後の実力が伸びる速度が変わってきてしまう)
だからガチ系は今でも必ずCをやってる。
ただし、CはK&Rからして「他の言語を既に学んだ人が、Cやる用」でかなく、最初にCをやるとほぼ全員撃沈する。
だから最初にまず簡単な言語で「プログラミングとは何ぞや」を理解した後で、
早い段階でCをやるのが一般には最速上達法で、ガチ系は多分大体こうなってるはず。
scratchは最近の「小学生にもプログラミングを教えたい」という需要に応えるべく出来た言語で、
当然だが簡単だしパズル程度で行けるが、実用言語ではなくただのステップであり、長々とやる意味はない。
Pythonはおそらく一番簡単だとされている言語で、使用者も一番多い。
ただし言語としてはかなり糞。とはいえ使用者が多いから撲滅される事はない。
JavaScriptはWeb標準だし、実は実力もかなり高いのだが、それ故、初学者には難解な部分も多い。
まず引っかかるポイントは非同期とプロトタイプと動的なthisだが、
この辺はPythonにはないので、Pythonならこの苦労はせずに済む。
(だから全構築を目指すなら、当然Python->JavaScriptの順であって、逆はない)
あと、界隈がWebだというのもあって、馬鹿が情報発信しすぎてて、間違った情報が多すぎる。
「嘘コケ馬鹿タレ」と峻別するのは初心者には現実的に無理。
かといってほぼ信頼出来るMDNはリファレンスであり、初学者にはちと厳しい。
(MDNも頑張って初学者用のドキュメントを整備してはいるが)
この点素晴らしいのはPHPで、php.netという公式サイトのドキュメントがずば抜けて初学者向き。
ただし言語自体が超絶糞なのと、動作形態がまず鯖ありきなので、一般に初学者に勧められる事はない。
RubyはPythonと同様に簡単で、しかもドキュメントのマスタが日本語だという点がよかったが、
そろそろ死にそうなので、今から新しくやる意味はないかも？ というわけで、最初にどの言語を学ぶべきか、については多分、統一見解はない。(多数派はおそらくPython)
ただ、多分だが、ガチ系はかなり早い段階でCを組み込んできてるはず。
独学する気なら、この辺も自分で調べて正しいコースを構築しないといけない。
大学ならこの辺を先生連中がやってくれてる、というだけ。
だからプロゲートやドットインストールを信頼するのもありだが、
一般的にはそれよりいいと思ってるから各大学がそれぞれ「オレオレ最速上達コース」を学生に提供してるわけでね。
(逆に、大学入試はもう予備校の先生に問題作ってもらうか、程度には信頼されてきてるだろ。
プロゲートやドットインストールが本当によければ、
大学や企業からの新人研修依頼が舞い込みまくるはずだが、そんな話聞いた事無いしね。
《最近は知らんが昔の》LECやTACみたいにダブルスクールで、みたいな話も知らんし)
とはいえどの大学の講義がいいかを判断する能力なんて初学者にはないのだから、
割り切って「行きたい大学」の講義に賭けるのもありだと思うぜ。
少なくとも公開されている講義資料の課題をこなせば、同じ実力にはなれる。
「プロゲート」や「ドットインストール」に賭けるよりはましな気もする。
ただ、「プロゲート」や「ドットインストール」はあくまで客商売だから、食いつきよく作ってあるとは思う。
大学のは所詮教授連中だから、面白可笑しく、は期待出来ない。
(モチベーション維持は各学生の責任)
この辺も含めて総合判断でどうするか、だけど、
まあどうせ考えても分からないし、現状のプロゲートのJavaScriptで進んでみるのもありだとは思うよ。
ただJavaScriptを初手で選ぶ奴はかなり少数派で、ぶっちゃけWeb以外では皆無だろうから、
躓いたときにググッてもどうにもならない可能性もある。
この辺をプロゲートやドットインストールがカバーしてくれてればいいが、実際の所は知らんし。
この点については、Javaが一時期超お約束言語で、当然学校でも教えられまくってたから、蓄積はあるだろうよ。
まあ今更Javaか？というのが大問題ではあるが。
(なおCはネット以前の覇権言語であり、実はネット上にはあまり情報がない。
逆にJavaScriptは馬鹿がデタラメ書きまくってて、ネット上に情報はありまくるが、信頼できない) >>813
ありがとうございます
javascriptとpythonをプロゲートで序盤の方だけやってみましたがpythonの方がシンプルで少し分かりやすく感じたのでまずはpythonからやることにしました
プロゲートで全部python終わらせたら色々考えてみます
cは難しく最初にやっても挫折するとよく目にしていたのでとりあえず除外していましたが最初のうちにやった方がいいことも理解しました
とりあえずやってみます
ありがとうございました progateやドットインストールは一通りサラッとやってみたけど
これから学んでいく為の導入としてはアリこれらをずっとやり続けても上達はないから
さっとやってこんな感じかって受け入れられればいいと思う まぁ、初心者は何が分からないかが分からなくて、検索するにしても検索ワードに辿り着くのに一苦労だったりするしな
断片的にネットでつまみ食いするより、段階的に触りだけでもまとめて学べるってのは初心者には悪くないと思うわ
それだけじゃ足りなくて仕事にならないなんてのは、勉強してりゃ初心者でもすぐに気付くだろうし
課金までする価値があるかどうかは個人の価値観によるから、特にオススメはしないが すまん用語間違えてた、まあ分かる範囲だが >>809
× ブラックバイト
○ 闇バイト
>>815
ついでに言っておくと、Cは最近無駄にネガキャンされてる。
Cを学ぶ者(正確にはCが出来る者)が増えて欲しくない、といった感じだ。
ここら辺は例の「文系馬鹿」問題が絡んでくるので根が深いが、Pythonのwikiにも
> ただし、Pythonの言語は，言語自身に組み込まれている型とそれに付随するメソッドの多いことなどから，
> C言語に較べると遙かに多くの憶えなければならない事柄があることになる。
とあるように、Cの方が単純明快で、とっかかりは早い。
実際Pythonやった後にCやれば、あまりにも何も無さ過ぎて逆に驚くだろうよ。
ほぼ全部既に知ってる事柄だろうし。
ただそれだからこそ、計算機の本質が見え、何故JavaScript等がそういう挙動をするのか理解出来るようになる。
Cやってないと、最終的なところはずっとブラックボックスのままだ。
ただそれでも、実務に大して支障ないのも事実だが。 >>817
> それだけじゃ足りなくて仕事にならないなんてのは、勉強してりゃ初心者でもすぐに気付くだろうし
気づかない奴をカモろうとしてるから詐欺なんだよ。
つまりは「カモれる馬鹿が無限供給される」というネットの側面を悪用した詐欺であって、
本質的には、闇バイトや振り込め詐欺や迷惑メール送ってくる連中と変わらんよ。
初心者を手助けするところまでは「正義」、別に金取っても問題なし。
ただ、過剰に期待させたり誤認させるのなら「悪」。
トップページだけで判断するなら、俺はドットインストールは「正義」、プロゲートは「悪」だね。
ついでに言うと競プロも「悪」だ。
ただ初心者にも分かるように言うと、本質的な問題は時間にある。
ドットインストールもプロゲートも競プロも、5-15分で解けるような問題に終始してるはず。(多分)
競プロの場合はゲームとして成立させる為にこれが必要だし、
ドットインストールやプロゲートの場合は間断なく達成感を与える為にある程度は致し方ない。
これを「必要悪」と認識するかどうかの違いだろう。
本質的な方法、つまり大学がやってるように、
「次回までに完成させとけ」で基本的に猶予は1～2週間、
その間色々考え、締め切り前日辺りに数時間かけて実装、という方が実際のプログラミングだし、実力も上がる。
ただこれをやるには、教える側もそれなりに用意する事が必要で、
大学みたいに1コマ1,000円程度の課金が必要となり、現状のネットでは厳しいのは事実。
(年間60万円で30週、1週20コマなら1コマ1,000円)
広く薄く集金するには人数の多い初心者を狙うしかなく、
当然馬鹿げた簡単さで「出来た！俺スゲー」脳汁出させる物ばかりになってしまう。
まあ資本主義の悪い側面が出てる、というわけ。
だから一定水準以上(つまり人数が絞られてくるレベル以上)の難易度の物は、
本であれサイトであれ、成立させるのは難しい。だから本も初心者向けのゴミばかり溢れる事になる。
この辺を打開するには、何処かから別に金が出てる連中に便乗するのが一つの方策で、
今なら大学講義が一番マシに思える。
ドットインストールもプロゲートも競プロも「商業」としては正しいが、「教育」ではないというだけ。
「教育」に見せかけてるのなら詐欺だよ。 この訓垂れ長文はきっと触れちゃいけないあの人だから
あまり相手にしないように >>817
> 断片的にネットでつまみ食いするより、段階的に触りだけでもまとめて学べる
そういえば、MDNは最近？無駄に頑張ってるよ。
以下は全部つながってて相互に飛べるが、
JavaScript ガイド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
ウェブ入門
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web
JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript
網羅的に抑えたければこの辺を全部読んだ方がいいかと。
ドットインストール等でも所詮は断片的でしか無いだろうし。
ただ正直、HTML/CSS/JavaScriptだと初心者が全体像を抑えるには仕様が大きすぎる。 読んでおいて損は無いが、それを読む以前の話だわな
初心者に優しい（分かりやすい）かどうかは、また別問題 ウェブ開発とウェブ制作の2つがある
ウェブ制作は、HTML/CSS/JavaScript、
または、PHP のWordpress で、お小遣い稼ぎを目指す
ウェブ開発は、もっと本格的で、Ruby on Rails を使う。
Linux, Docker, AWS Solution Architect、データベース設計も含む
Python は唯一、人余りの言語で、
AI・機械学習だから、8年掛かる。
理系の大学院数学科か、AWS機械学習資格が必要。
文系は採用されない
文系は筑波大学でも使っている、Railsチュートリアルをやれば良い。
少し古いバージョンのRails 5 なら、サイトで無料で読める
KENTA, Runteq、デイトラなど、ほとんどのサロン・学校ではRailsを学ぶ。
すべてのウェブフレームワークの基礎となっている
TIOBE Index 2024/4 では、
PHPは、9位 → 17。
一方、Ruby は、18 → 13
たぶん、Rails の1強
KENTAは、PHPをオワコン認定した。
そして初心者のキャリアパスは、Rails → Go のみと言う WEBなんて言語の本読めばいいだけなのに
なにをそんなたいそうな事いってんだか
それで食ってくのは営業力だし技術関係ない所が重要 流行の言語や新しい言語でたらそれの本か
英語わかるなら言語の元サイトでテキストを読む
それ以上でもそれ以下でもないなんも難しくはない 823はプログラム板では有名なRubyキチガイだ
どこにでも現れ、常に何の関係もないRubyの話をするので無視されてる
内容も常に意味がなく、技術的な話は出来ないし、的外れ
気になるのならプログラム板を漁れば同様の書き込みが大量に見つかる 
