# 日本国語大辞典 第二版 - 清洁CSS

**URL:** <https://forum.freemdict.com/t/topic/15451>\
**Category:** 词典装饰排版交流分享\
**Tags:** 日语\
**Created:** [2022 年9 月 18 日 06:55 UTC](https://forum.freemdict.com/t/topic/15451 "2022-09-18T06:55:16Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 18 日 06:55 UTC](https://forum.freemdict.com/t/topic/15451/1 "2022-09-18T06:55:16Z")

</div>

This dictionary looks extremely out of place placed along other dictionaries. For this reason I have created a custom css with the purpose of making the layout much cleaner.

Machine translation:  
这本词典和其他词典放在一起看起来极不合适。出于这个原因，我创建了一个自定义css，目的是使布局更清晰。

**Version 2.0:**  
I have optimized the css file by removing 4,064 lines that are not actually used in the dictionary (from 4,866 lines to 802 lines). This greatly improves the loading of the dictionary. I have checked if this doesn’t cause any issue and every thing seems to be working correctly.  
版本2.0：  
我已经优化了css文件，删除了字典中实际未使用的4064行（从4866行到802行）。这大大改进了字典的加载。我已经检查了这是否不会导致任何问题，并且每件事似乎都正常工作。

**Original/起初的** :

 ![original](https://forumcdn.freemdict.com/uploads/default/original/3X/7/b/7b419d186be3a5d72d0a36d0cd63d9d8abcddacb.png)

**Custom/风俗:**

 ![custom](https://forumcdn.freemdict.com/uploads/default/original/3X/b/9/b9db00fc7432fb2102ea9d15fbc1393ec1d55d6e.png)

> **[日本国語大辞典 第二版 - 清洁CSS](https://cloud.freemdict.com/index.php/s/73RiHWBdmtGCQdE)**
>
> FreeMdict Cloud - A FreeMdict Storage

---

<div class="post-metadata">

作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\
发布日期： [2022 年9 月 18 日 07:33 UTC](https://forum.freemdict.com/t/topic/15451/2 "2022-09-18T07:33:38Z")

</div>

Thanks for sharing. I like the compact style.

---

<div class="post-metadata">

作者： ![mrx](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/9de053/32.png) [@mrx](https://forum.freemdict.com/u/mrx)\
发布日期： [2022 年9 月 18 日 12:12 UTC](https://forum.freemdict.com/t/topic/15451/3 "2022-09-18T12:12:42Z")

</div>

![Screenshot_2022-09-18-20-10-21-99_32d76ed0cd82b305668f31fe52107a47](https://forumcdn.freemdict.com/uploads/default/original/3X/2/1/2153027840ce9d186f68a419745b4cd6741e4004.jpeg)  
This css is easy to use, here is a bug to report, in the mobile phone browsing, the right side of the display will be too narrow, hope can fix it.

---

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 18 日 12:33 UTC](https://forum.freemdict.com/t/topic/15451/4 "2022-09-18T12:33:55Z")

</div>

I’m sorry I don’t understand what the issue is.

---

<div class="post-metadata">

作者： ![lisansas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/lisansas/32/28149_2.png) [@lisansas](https://forum.freemdict.com/u/lisansas)\
发布日期： [2022 年9 月 18 日 13:41 UTC](https://forum.freemdict.com/t/topic/15451/5 "2022-09-18T13:41:36Z")

</div>

![Clip_20220918_214049](https://forumcdn.freemdict.com/uploads/default/original/3X/5/a/5a84c78159ef3830c96639b129c935671825668d.jpeg)  
A little strange

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年9 月 18 日 13:43 UTC](https://forum.freemdict.com/t/topic/15451/6 "2022-09-18T13:43:07Z")

</div>

> [@mrx](#):
>
> the right side of the display will be too narrow, hope can fix it

啥意思啊，右侧太窄了什么啊看不懂

---

<div class="post-metadata">

作者： ![mrx](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/9de053/32.png) [@mrx](https://forum.freemdict.com/u/mrx)\
发布日期： [2022 年9 月 18 日 13:52 UTC](https://forum.freemdict.com/t/topic/15451/7 "2022-09-18T13:52:21Z")

</div>

In eudic app,here is original mode

 ![IMG_20220918_214043](https://forumcdn.freemdict.com/uploads/default/original/3X/a/2/a2a9e195e7189e4ef81045c04104512f411c657c.jpeg)  
It can display correct distance in right side .  
In custom mode  
 ![IMG_20220918_214153](https://forumcdn.freemdict.com/uploads/default/original/3X/2/d/2d8ec2b2ffc15ca1620f27ad0fcd89c8b5a9280b.jpeg)  
This distance disappears.

---

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 18 日 15:05 UTC](https://forum.freemdict.com/t/topic/15451/8 "2022-09-18T15:05:11Z")

</div>

Very strange, I do not have this issue.

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/b/9/b95db87c53cb02e3125b45b0294251ee3dda78fa.png)

---

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 18 日 15:08 UTC](https://forum.freemdict.com/t/topic/15451/9 "2022-09-18T15:08:19Z")

</div>

If you’re talking about the padding on the right then it is on purpose. The definitions are very long and I’m trying to have as much text as possible visible on screen. I have kept padding on the left because without it, it is harder to make out the different sections of the dictionary.

---

<div class="post-metadata">

作者： ![lisansas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/lisansas/32/28149_2.png) [@lisansas](https://forum.freemdict.com/u/lisansas)\
发布日期： [2022 年9 月 18 日 15:40 UTC](https://forum.freemdict.com/t/topic/15451/10 "2022-09-18T15:40:13Z")

</div>

Maybe the problem is the display resolution

 ![Clip_20220918_233819](https://forumcdn.freemdict.com/uploads/default/original/3X/3/5/351f16a203c23b6577d21bede2a67cebab158bcc.jpeg)

---

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 18 日 16:06 UTC](https://forum.freemdict.com/t/topic/15451/11 "2022-09-18T16:06:41Z")

</div>

Wow, I am not getting that at all. Do you use a custom goldendict style?

---

<div class="post-metadata">

作者： ![lisansas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/lisansas/32/28149_2.png) [@lisansas](https://forum.freemdict.com/u/lisansas)\
发布日期： [2022 年9 月 19 日 02:56 UTC](https://forum.freemdict.com/t/topic/15451/12 "2022-09-19T02:56:08Z")

</div>

![Clip_20220919_105304](https://forumcdn.freemdict.com/uploads/default/original/3X/5/3/53d59ef0882276e73cf2681d23fb284fd650de85.jpeg)

just dark mode,disable it also strange。

 ![Clip_20220919_105555](https://forumcdn.freemdict.com/uploads/default/original/3X/4/7/473d0e1093d80683009acfd18c22e576975286ba.jpeg)

---

<div class="post-metadata">

作者： ![epistularum](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/epistularum/32/31135_2.png) [@epistularum](https://forum.freemdict.com/u/epistularum)\
发布日期： [2022 年9 月 19 日 04:30 UTC](https://forum.freemdict.com/t/topic/15451/13 "2022-09-19T04:30:42Z")

</div>

If you right-click on the blank space then inspect element, what does it say?

---

<div class="post-metadata">

作者： ![lisansas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/lisansas/32/28149_2.png) [@lisansas](https://forum.freemdict.com/u/lisansas)\
发布日期： [2022 年9 月 19 日 05:06 UTC](https://forum.freemdict.com/t/topic/15451/14 "2022-09-19T05:06:12Z")

</div>

![Clip_20220919_130453](https://forumcdn.freemdict.com/uploads/default/original/3X/2/3/237924025aa45347d81083565fe09df159ade9e7.jpeg)  
 ![Clip_20220919_130505](https://forumcdn.freemdict.com/uploads/default/original/3X/e/6/e6362555d30190fb8cbbc7ffa07ebb3c064d5802.jpeg)

No error

---

<div class="post-metadata">

作者： ![Fince](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/fince/32/40566_2.png) [@Fince](https://forum.freemdict.com/u/Fince)\
发布日期： [2022 年12 月 30 日 07:06 UTC](https://forum.freemdict.com/t/topic/15451/15 "2022-12-30T07:06:27Z")

</div>

基于楼主的版本，我做了一个相对更精致一点的改版：  
I’ve made a new CSS based on your version:

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/d/7/d7007fb6b58dbde8356b68ef6d7d4b79f24340f1.jpeg)  
对比楼主的版本：  
 ![custom](https://forumcdn.freemdict.com/uploads/default/original/3X/b/9/b9db00fc7432fb2102ea9d15fbc1393ec1d55d6e.png)

> **[日国大CSS改.zip](https://cloud.freemdict.com/index.php/s/2fsSiFLesLgsGn2)**
>
> FreeMdict Cloud - A FreeMdict Storage

---

<div class="post-metadata">

作者： ![baihai57](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/b/7ab992/32.png) [@baihai57](https://forum.freemdict.com/u/baihai57)\
发布日期： [2022 年12 月 31 日 11:20 UTC](https://forum.freemdict.com/t/topic/15451/16 "2022-12-31T11:20:10Z")

</div>

不同颜色，十分美观。感谢制作，感谢分享。

---

<div class="post-metadata">

作者： ![Axx](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/34f0e0/32.png) [@Axx](https://forum.freemdict.com/u/Axx)\
发布日期： [2024 年10 月 17 日 05:50 UTC](https://forum.freemdict.com/t/topic/15451/18 "2024-10-17T05:50:42Z")

</div>

This can be fixed by deleting the `width: 100%` lines for the `hr` element in the css.

It would be a good idea to clean up the css a little bit cause there seems to be quite a few repetitive declarations.

---

<div class="post-metadata">

作者： ![dududkrn](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/d/dc4da7/32.png) [@dududkrn](https://forum.freemdict.com/u/dududkrn)\
发布日期： [2024 年11 月 15 日 04:48 UTC](https://forum.freemdict.com/t/topic/15451/19 "2024-11-15T04:48:50Z")

</div>

ありがとうございます。  
完璧な作品です。とても読みやすいです。

個人的に白くない背景が好きだから、いろいろcssに関する編集方法を探して、方法を見つけました。  
「background: #fff;」という部分を削除しました。 😄
