HTML/CSS のどんな質問にも優しく答えるスレ 44at HP
HTML/CSS のどんな質問にも優しく答えるスレ 44 - 暇つぶし2ch517: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