Q&A
2019/08/17 03:12
ul
前提・実現したいこと
borderを上下左右バラバラで設定したい
ここに質問の内容を詳しく書いてください。
html.cssのみを使って作りたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<ul class="sidemenu cleafix"> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_01.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_03.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_05.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_07.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_09.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_11.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_13.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_15.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_17.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_19.png> </li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_21.png></li> <li class="sidemenu-li"><img src=css/images/sidemenu/icon/spr_gnav_pc_23.png> </li> <li><img src="css/images/icon/twitter.png" alt="twitter" class="twitter"></li> <li><img src="css/images/icon/facebook.png" alt="facebook" class="facebook"></li> </ul> ```ここに言語名を入力 ソースコード .sidemenu { width: 235px; height: 300px; list-style: none; margin-top: 20px; margin-left: 250px; position: absolute; }.sidemenu-li {
float: left;
width: 75px;
height: 75px;
background-color: #F28A3C;
border: dotted 0.1px #FFFFFF;
}
### 試したこと! ここに問題に対して試したことを記載してください。  こちらの上記のイメージの物を作りたいのですが、 こちらの下記のように全てドットをつけるところまでいき、 やり方がわからず止まっています。 この大枠の部分だけをsolid1にしたいのですが。  宜しくお願い致します。 ### 補足情報（FW/ツールのバージョンなど） html5.css3
回答2件
0
ベストアンサー
下記のように記述すればきれいに表示できます。
0.1pxを使用するのは表示に問題が発生するのでやめたほうが良いです。
Twitterアイコンがulタグ内に入っていますが
構造上問題があるので分離して記述してください。
HTML
1<style> 2ul, li { 3 margin: 0; 4 padding: 0; 5} 6.sidemenu { 7 overflow: hidden; 8 width: 229px; 9 list-style: none; 10 margin-top: 20px; 11 border: solid 1px #FFF; 12 outline: solid 1px #F28A3C; 13 box-sizing: border-box; 14} 15.sidemenu-li { 16 float: left; 17 width: 75px; 18 height: 75px; 19 background: #F28A3C; 20 border: dotted 0.5px #FFF; 21} 22.sidemenu-li:nth-child(-n+3) { 23 border-top: none; 24} 25.sidemenu-li:nth-child(3n) { 26 border-right: none; 27} 28.sidemenu-li:nth-last-child(-n+3) { 29 border-bottom: none; 30} 31.sidemenu-li:nth-child(3n+1) { 32 border-left: none; 33} 34</style> 35<ul class="sidemenu"> 36 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 37 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 38 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 39 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 40 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 41 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 42 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 43 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 44 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 45 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 46 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 47 <li class="sidemenu-li"><img src="https://placehold.jp/F28A3C/FFFFFF/75x75.png"></li> 48</ul>
投稿2019/08/17 04:12
総合スコア2937
0
質問頂きありがとうございます。
全体をdivで囲って、親divに枠線をつけてはどうでしょうか？
投稿2019/08/17 03:06
総合スコア2050
ul
素早いご回答ありがとうございます！
このやり方だとドットと線が重なった状態になるのですが
大枠があって内側に白線があり、画像同士の中間だけドットにしたいのですが。
白線とドットを重ねるしか方法ないでしょうか。。。
全体をdivで囲う必要はないです。
質問の答えになってないのにこれがベストアンサーなのか。
回答に必要な事項を尋ねるのをマウント扱いし、媚びへつらって神様扱いしてくれて程度の低い回答を量産するようなのをベストアンサーに選ぶようなことをしてると、まともな回答者は答えなくなりますね。
誤解を招く行為を致しました、すみません！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/17 04:22