HTML/CSS のどんな質問にも優しく答えるスレ 44at HP
HTML/CSS のどんな質問にも優しく答えるスレ 44 - 暇つぶし2ch493:Name_Not_Found
20/08/17 02:54:07.66 .net
bodyにclassつけるのは珍しくない気が

494:Name_Not_Found
20/08/17 04:15:55.33 .net
ボディにクラスとかどういう要素を加えるんだ?

495:Name_Not_Found
20/08/17 05:24:45.64 .net
下層ページにunderとか

496:Name_Not_Found
20/08/17 08:13:41.27 pPLgnHQg.net
自分はhtml 要素の方によくやるな
クラスつけるの

497:Name_Not_Found
20/08/17 14:21:57.08 6UBKFdBO.net
URLリンク(codepen.io) すみません一番下のキャプションの末尾を…にしたいのですが、text-overflow: ellipsis; /* 末尾に「…」を付加する */
「-webkit-line-clamp: 何行まで表示するか」2行で省略したい場合は、「-webkit-line-clamp: 2」 どちらの方法でもダメでした、原因がわかりません。

498:Name_Not_Found
20/08/17 16:07:48.46 .net
質問する前にmdn読め

499:Name_Not_Found
20/08/17 20:34:34.02 Yy9pNfcb.net
>>498
読んでみたのですがどうしても分かりません…

500:Name_Not_Found
20/08/17 20:53:53.85 .net
どのページを読んでわからなかったの?

501:Name_Not_Found
20/08/17 21:03:27.11 .net
読めば簡単に分かるのに
実は読んでない疑惑

502:Name_Not_Found
20/08/17 21:24:20.43 Yy9pNfcb.net
>>500
text-overflow: ellipsis; について読みました…
まだまだ素人に毛が生えたようなものなので、どこが間違っているのか分かりません…
教えてくださいお願いします。

503:Name_Not_Found
20/08/17 21:32:31.03 .net
>>502
特に難しい説明はないはずだから
1. たぶんどこかで誤字してるか
2. 記号の類が過不足してるか
3. セレクタが間違ってるか
のどれかだよ
1と2はコード眺めてても見つからないからvalidatorにかけよう
linterのあるエディタを使うこともお勧めする
3はとりあえず
背景色とか罫線とかのスタイルを追加してみて、それが適用されるなら問題ない
されないなら間違ってる

504:Name_Not_Found
20/08/17 22:28:39.99 .net
こっちが想像してるページと同じかどうか怪しいが
本当に隅々まで読んで分からないなら
もう諦めた方がいいレベルの話だな

505:Name_Not_Found
20/08/18 10:15:07.51 FvIbKlnm.net
wordpressでコードを折りたたみたいのですが、アドオンを使わずに折りたたむ事はできるでしょうか?

506:Name_Not_Found
20/08/18 11:38:31.41 FvIbKlnm.net
↑上に関連してですが、wordpressなどでコードを表示するアドオンがありますが、ここにスクロールを設定するのが普通なんでしょうか?

507:Name_Not_Found
20/08/18 12:31:01.42 .net
質問する前にスレタイ読め

508:Name_Not_Found
20/08/18 12:41:33.96 .net
>>505-506
WordPress(ワードプレス)でWebProg 質疑応答スレ 01
スレリンク(php板)

509:Name_Not_Found
20/08/20 18:34:09 .net
タブレットの縦長、横長、スマホの横はpcの縮小版、スマホの縦はレスポンシブで表示させたい場合、
ブレイクポイントはどのあたりに設定すれば良いでしょうか?

510:Name_Not_Found
20/08/20 21:47:26.56 .net
その辺は現在色々出てる各フレームワークを見れば大体わかるんじゃないかな?

511:Name_Not_Found
20/08/20 22:18:09.15 .net
ちゃんとCSSフレームワークって言ってあげないと無駄にAngularとかのコード完全解析しそうな予感

512:Name_Not_Found
20/08/20 22:51:21.67 .net
786px以上でいけんちゃん

513:Name_Not_Found
20/08/20 23:50:49.19 .net
>>510-511
cssフレームワークは使わず、
自分でcssを書こうと思っています。
>>512
ありがとうございます。
そのあたりで試行錯誤したいと思います。

514:Name_Not_Found
20/08/21 03:21:29.59 .net
>>513
フレームワーク使わなくてもいいから平均値とかわからないなら
一度それらが使ってる数値を見て参考にしとけばってこと

515:Name_Not_Found
20/08/21 07:35:01.18 .net
role属性ってつけると、ブラウザが解釈して何かUIなどが変わったりするの?
検索エンジンのための意味付けのようなもの?

516:Name_Not_Found
20/08/21 10:34:02 .net
>>515
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
URLリンク(developer.mozilla.org)

> WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API(スクリーンリーダーはここから情報を取得する)によって提供される情報を除いて
> それらはウェブページに何の影響も与えないという点です。
> WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。

517:Name_Not_Found
20/08/21 16:49:37.03 .net
>>516
レスどうも、WAI-ARIA見てみました(全然わからん)
divやspanなど、そのものの意味が無いものに対して付加するのが始まりって感じ?
<header role="banner">とか
<nav role="navigation">とかソース見るとあるけど、「ある」と「無い」でどこに違いが出るの?
cssの要素選択ができるということはclassみたいな扱いができるってことかな。
header.bannerみたいな。
たくさんできた仕様で現在ではあまり使われていないものなのかな。

518:Name_Not_Found
20/08/21 17:43:44 .net
>>517
WAI-ARIAは「Web Accessibility Initiative - Accessible Rich Internet Applications」の略
Webアクセシビリティとかで調べてみるといい

あとは、こういうのとか

WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識 | CodeGrid
URLリンク(app.codegrid.net)

CSSの要素選択は、その例だとセレクタはheader[role="banner"]

519:Name_Not_Found
20/08/21 19:17:33.34 .net
アクセシビリティを外観にまつわる機能として判断してるようじゃ理解できないだろうな
むしろ目が見えない人などのために存在してるんだから

520:Name_Not_Found
20/08/21 23:18:35 .net
アクセシビリティといえば
日系企業ランキングを思い出す…

あの惨劇はもう10年以上前だったろうか

521:Name_Not_Found
20/08/22 12:15:02 .net
>>509
Bootstrap のブレイクポイントの変数定義では、

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;

522:Name_Not_Found
20/08/22 15:49:36 .net
>>521
今はもっと少なくても良さそうなもんだ

523:Name_Not_Found
20/08/22 16:07:41.99 UFsz4By5.net
URLリンク(www.hook-net.jp)
こちらのサイトのように画像と文字の境界線をなくすためにはjsが必要でしょうか?

524:Name_Not_Found
20/08/22 16:20:43.37 .net
ちょっと何言ってるか分かんない

525:Name_Not_Found
20/08/22 17:47:35 UFsz4By5.net
>>524
すみません画像と文字を一つのボックスに横並べして画像のふちを白でぼかしたいんですが
その場合グラデーションを使えばよいのでしようか?

526:Name_Not_Found
20/08/22 17:59:50.30 .net
手っ取り早いのが縁を白でぼかした画像を作成すること

527:Name_Not_Found
20/08/22 18:04:22.71 .net
だよな。レイアウトはもちろんテーブルタグだ

528:Name_Not_Found
20/08/22 19:46:47 .net
>>520
惨劇ってなんすか?

529:Name_Not_Found
20/08/22 21:30:44 UFsz4By5.net
URLリンク(codepen.io)

グラデーションをつけて片側をすけさせることまでできたのですが同時に画像をぼやけさせることができません。
URLリンク(cruw.co.jp) この場合+を使うと実装できますか?

530:Name_Not_Found
20/08/22 21:40:24 UFsz4By5.net
画像にfilter: blur(5px);を加えると境界線ができグラデーションの意味がなくなってしまいます
グラデーションと画像ぼかしを境界線が見えない形で実装できないのでしょうか…

531:Name_Not_Found
20/08/22 21:41:44 .net
またこのひとか

532:Name_Not_Found
20/08/22 23:00:59 .net
上に透明なdiv重ねてそのdivにbackdropfilter blurかけりゃいいじゃん

533:Name_Not_Found
20/08/22 23:53:26.90 0lfiVAzr.net
すみません、htmlとjava初心者です。
こちらの質問の
URLリンク(teratail.com)
背景の赤い枠を下まで伸ばすにはどうしたらいいか教えてください

534:Name_Not_Found
20/08/23 00:08:29 wdKbLCbE.net
>>533
100vhでどうよ

535:Name_Not_Found
20/08/23 00:10:12 .net
まったく関係ないいんだけど
529を見て知りたかったことあったので

URLリンク(cruw.co.jp)
このページみたいに
画像が出てから色が出てシュッとなるやつって
jQだと思うんだけど説明してるサイトとかってありますか?
これのネーミングなんて言えばいいのかわからなくて
ググってもイメージ通りものにたどり着かなくて

536:Name_Not_Found
20/08/23 00:11:13 .net

画像が先に出てからじゃないや
色がでて画像がでてくる

537:Name_Not_Found
20/08/23 00:13:05.42 1JN6CSRO.net
>>534
.item {
display: inline-block;
width: 30%;
height: 100vh;
margin: 10px;
font-size: 20px;
background: rgba(255, 0, 0, 0.4);
}
としてみたのですが変化なしですね・・

538:Name_Not_Found
20/08/23 00:50:36.54 .net
intersectionobserberで擬似要素と画像をコントロールしとんちゃうか

539:Name_Not_Found
20/08/23 01:56:32.50 .net
さよか

540:Name_Not_Found
20/08/23 05:04:32.52 .net
>>528
審査員のひとりに
富士通のアクセシビリティに一家言ある人がいて
数年後に控えたJIS X 8341-3を
勝手に前倒しで審査項目に導入したので
ほとんどのサイトのランクが
前年と比べて100、200以上変動した
上がったところはいいけど
下がったところは代理店も制作会社もそれなりに
上からお叱りやペナを受けることになって非難轟々
その年を最後に日経企業サイトランキングは消滅した
という昔話です

541:Name_Not_Found
20/08/23 07:45:31.76 .net
この世界じゃよくあることだ
すぐ収まるのもこの世界らしい

542:Name_Not_Found
20/08/23 09:36:05 obkittuk.net
Web系に転職したく勉強をしています
モバイル用にハンバーガーメニューを設置したいのですが、
HTMLにPC用とモバイル用で別のnavを2つ設置してメディアクエリで
それらの表示を切り替えるのはありでしょうか
それとも重複的な記述はHTML的にはよろしくないのでしょうか

543:Name_Not_Found
20/08/23 10:00:48 .net
HTMLとしてはわりとどうでもいいというか
そこまで気にするもんでもないと思うが
運用する上で同じものが二つあるのは厄介だな
片方忘れられたりするリスクがある

544:Name_Not_Found
20/08/23 11:59:10.13 .net
サーバサイドで書き換え


最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch