こんにちは、@noboruです。宮﨑あおいが好きです。
昨日からブログのデザインを色々いじくりまわしております。
コードのシンタックスハイライトはどうすれば見やすいかなー、とか、広告の位置はどこにすればいいかなーとか、ゆるゆる試行錯誤を重ねております。
作業進捗で言えばまだ20%くらいなんですが、
Web界のサグラダファミリアとして、半永久的に改築を続けてやろうかと。
その前に飽きられるのがオチでありますが。
LESSですが、body領域に基本レイアウト・デザイン、下に汎用スタイルを記述する方式を取りました。
どうせコンパイルするのだから、別ソースにわけるなど、モアベターなソースの分割方法を模索すべきですね。
body{ #container{ width:980px; margin:0 auto; #container-inner{ margin: 0 15px; #blog-title{ #blog-title-inner{ #title{ a{ color:#666; text-decoration: none; text-shadow: 1px 1px 0px #9c9c9c; } } // end of title } // end of blog-title-inner } // end of #blog-title #top-editarea{ margin-bottom:40px; #top-ad-banner{ width:728px; height:90px; margin:0 auto; } #top-ad-linkunit{ width:728px; height:15px; margin:0 auto; } } // end of #top-editarea #content{ #content-inner{ margin: 0 0 0 0; #wrapper{ width:620px; float:left; #main{ #main-inner{ article.entry{ margin: 0 0 60px 0; .entry-inner{ .entry-header{ position:relative; .date{ a{ time{ .date-year{ } // end of .date-year .date-month{ } // end of .date-month .date-day{ } // end of .date-day .hyphen{ } // end of hyphen } } } // end of .date .entry-title{ .entry-title-link{ } // end of .entry-title-link } // end of .entry-title .categories{ a{ } } // end of .categories .entry-header-menu{ position:absolute; top:0; left: -40px; a{ } } // end of .entry-header-menu } // end of .entry-header } // end of .entry-inner } // end of article.entry .pager{ clear: both; padding: 0 0 80px 0; } } // end of #main-inner } // end of main #box1{ } // end of box1 } // end of #wrapper #box2{ width:300px; float:right; #box2-inner{ .hatena-module{ margin-bottom:20px; } // end of .hatena-module } // end of #box2-inner } // end of #box2 } // end of #content-inner } // end of #content #bottom-editarea{ #bottom-ad{ clear:both; width:728px; height:90px; margin:0 auto; } // end of #bottom-ad } // end of #bottom-editarea } // end of #container-inner } // end of #container #globalheader-container{ } // end of #globalheader-container #footer{ color:#666; clear: both; text-align: center; } // end of foooter } // -------------------------------------------------- // common css // -------------------------------------------------- pre.code{ background: #393939; border:1px solid #1d1d1d; color:#fff; margin:20px; padding:15px; }

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
- 作者: 赤間公太郎,原一宣。,こもりまさあき
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2013/09/20
- メディア: 単行本
- この商品を含むブログ (1件) を見る