[Linuxmint-jp-devel:155] Re: ホームページ最終的な改善の提案

[AYANOKOUZI, Ryuunosuke]

綾小路です。

コメントありがとうございます。

> そしてトップのLinux Mintのロゴの画像と、ナビゲーションバー、スライドショーの横幅を画面の横幅に合わせるようにするとほとんど元のデザインに戻りますがどう思いますか？

元のデザインに戻す必要はないと思います。

私にはこの 3 点を元のデザインから継承する理由が理解できなかったので、
css を一つにまとめる際に外しました。元のデザインに合わせてこの 3 点を
CSS で表現する事も可能ですが、それを行わずとも、ナビゲーションリンクや
ロゴは表示されているわけで、同じ機能を備えているのであれば、デザインに
こだわるべきではないと考えたからです。

> 今思いましたが、昔の横幅可変のデザインで
>
> <div class="lof-slidecontent" id="lofslidecontent45">
>         <div class="preload">
>           <div></div>
>         </div>
>         <!-- MAIN CONTENT -->
>         <div class="lof-main-wapper">
>           <div class="lof-main-item">
>             <img width="950" src="topstories/cover_mint13.jpg"
> title="Newsflash 2" height="300"/>
>             <div class="lof-main-item-desc">
>               <h3>
>                 <a target="_parent" href="#" title="Newsflash 2">Linux
> Mint13 Maya</a>
>               </h3>
>               <p>Linux Mint は最新で、洗練されて、簡単に使える、
> 強力で使いやすいオペレーティングシステムです。</p>
>             </div>
>           </div>
>           <div class="lof-main-item">
>             <img width="950" src="topstories/cover_kde.jpg"
> title="Newsflash 1" height="300"/>
>             <div class="lof-main-item-desc">
>               <h3>
>                 <a target="_parent" href="#" title="Newsflash 1">Linux
> Mint 13 KDE</a>
>               </h3>
>               <p>Linux Mint を KDE の組み合わせで最高のデスクトップを!</p>
>             </div>
>           </div>
>           <div class="lof-main-item">
>             <img width="950" src="topstories/cover_xfce.jpg"
> title="Newsflash 3" height="300"/>
>             <div class="lof-main-item-desc">
>               <h3>
>                 <a target="_parent" href="#" title="Newsflash 3">Linux
> Mint 13 Xfce</a>
>               </h3>
>               <p>Xfce で快適で高速でエレガントなデスクトップを!</p>
>             </div>
>           </div>
>         </div>
>         <!-- END MAIN CONTENT -->
>         <!-- NAVIGATOR -->
>         <div class="lof-navigator-outer">
>           <ul class="lof-navigator">
>             <li>
>               <div>
>                 <img alt="Linux Mint" src="images/lofthumbs/linuxmint.jpeg"/>
>                 <h3>Linux Mint13 Maya</h3>
>               </div>
>             </li>
>             <li>
>               <div>
>                 <img alt="Ubiquity" src="images/lofthumbs/ubiquity.png"/>
>                 <h3>Linux Mint 13 KDE</h3>
>               </div>
>             </li>
>             <li>
>               <div>
>                 <img alt="LMDE" src="images/lofthumbs/lmde_logo.jpg"/>
>                 <h3>Linux Mint 13 Xfce</h3>
>               </div>
>             </li>
>           </ul>
>         </div>
>       </div>
>
>
> この部分を<div id="slideshow">のように囲み、さらにcssに
>         width:950px;
> 	margin-right: auto;
> 	margin-left: auto;
> などというふうにやれば中央に来るような気がしましたがどうでしょうか？

id="lofslidecontent45" で囲まれた要素をさらに id="slideshow" で囲む理由
がわかりません。以下のようにすることと同義です。また、この場合スライド
ショー部分の幅は親要素の継承から外れて 950px で固定されるため、ウィンド
ウの横幅が 950px よりも狭い場合、コンテンツの左右がウィンドウの外に表示
されます。

#lofslidecontent45 {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
}

さらに、メール送信時点の版では global.css で id の代わりに class を使っ
て以下のようにスタイルを定義しています。

.lof-slidecontent {
    width: 100%;
}

これは以下のとおり style.css で指定されている width を上書きしており、
コンテンツ幅を親要素幅 (div#lof-slidecontent < body < html) に追従させ
ています。この場合はウィンドウ幅に追従します。さらに margin-left、
margin-right は auto となっており、ご指摘された要素は中央に来ているはず
です。

.lof-slidecontent {
    background-color: #666666;
    border-style: none;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    overflow: hidden;
    padding-top: 0;
    position: relative;
    width: 950px;
}

綾小路龍之介
--
AYANOKOUZI, Ryuunosuke <i38w7i3 ＠ yahoo.co.jp>

-------------- next part --------------
テキスト形式以外の添付ファイルを保管しました...
ファイル名: 無し
型:         application/pgp-signature
サイズ:     836 バイト
説明:       無し
URL:        <http://linuxmint-jp.net/pipermail/linuxmint-jp-devel/attachments/20120929/e2047229/attachment.sig>