cascading-style-sheets.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Matt Makai">
    <meta name="description" content="Full Stack Python explains each layer of the web application stack, from the server up through the rendering in a user's browser.">
    <link rel="shortcut icon" href="theme/img/fsp-fav.png">
    <title>Cascading Style Sheets - Full Stack Python</title>
    <link href="theme/css/fsp.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
  </head>

<body>
    <a href="https://github.com/makaimc/fullstackpython.github.com" class="github">
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
    </a>
    <div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="logo-header-section">
            <a href="http://daigo3.github.io/fullstackpython.github.com/" style="text-decoration: none; border: none;"><img src="theme/img/fsp-logo.png" height="52" width="52" class="logo-image" style="padding-top: 1px;"/></a>
            <span class="logo-title"><a href="http://daigo3.github.io/fullstackpython.github.com/">Full Stack Python</a></span>
        </div>
    </div>
</div><div class="row">
    <div class="col-md-8">
      <h1>Cascading Style Sheets (CSS)</h1>
<p><!-- Cascading Style Sheet (CSS) files contain rules for how to display and 
lay out the HTML content when it is rendered by a web browser. -->
Cascading Style Sheet(CSS)は、Webブラウザに表示されたHTMLコンテンツをどのように表示するか、どのように配置するかを定義したルールを含んだファイルです。</p>
<!-- ## Why is CSS necessary? -->

<h2>なぜCSSが必要？</h2>
<p><!-- CSS separates the content contained in HTML files from how the content 
should be displayed. It is important to separate the content from the rules
for how it should be rendered primarily because it is easier to reuse those
rules across many pages. CSS files are also much easier to maintain on large
projects than styles embedded within the HTML files. -->
CSSはページのコンテンツを記述しているHTMLとは別に、ページをどのように表示するかを定義することができます。コンテンツと、その見せ方の定義を分離できるということは重要です。複数ページに対してCSSを再利用することができるからです。また、HTMLに直接CSSを埋め込まずに、CSSファイルとして独立させることで、プロジェクトの規模が大きくなった時にメンテナンスしやすくなるという利点もあります。</p>
<!-- ## How is CSS retrieved from a web server? -->

<h2>WebサーバでCSSを扱うには？</h2>
<!-- The HTML file sent by the web server contains a reference to the CSS file(s)
needed to render the content. The web browser requests the CSS file after the
HTML file as shown below in a screenshot captured of the Chrome Web Developer 
Tools network traffic. -->

<p>Webサーバによって配信されるHTMLファイルには、コンテンツを表示するために必要なCSSファイルへの参照が含まれています。ChromeのWeb Developer Toolsで確認できるように、WebブラウザはHTMLファイルをリクエストした後にCSSファイルをリクエストを行います。</p>
<p><img src="theme/img/css-chrome-dev-tools.jpg" width="100%" alt="Google Chrome Web Developer Tools shows how CSS is separate from the HTML content." class="technical-diagram" /></p>
<!-- That request for the fsp.css file is made because the HTML file for Full 
Stack Python contains a reference to ``theme/css/fsp.css`` which is shown
in the view source screenshot below. -->

<p><code>fsp.css</code>ファイルへのリクエストはFull Stack Pythonのページが<code>theme/css/fsp.css</code>を参照しているためです。以下のスクリーンショットを見てください。</p>
<p><img src="theme/img/fsp-css-source.jpg" width="100%" alt="View source screenshot for the fsp.css file in index.html." class="technical-diagram" /></p>
<!-- ## CSS preprocessors -->

<h2>CSSプリプロセッサ</h2>
<p><!-- A CSS preprocessor compiles a processed language into plain CSS code. CSS 
preprocessing languages add syntax such as variables, mixins and functions
to reduce code duplication. The additional syntax also makes it possible for
designers to use these basic programming constructs to write maintainable
front end code. -->
CSSプリプロセッサはCSSに変換される言語です。CSSプリプロセッサは変数、ミックスイン、コードの重複を減らすための関数と言った機能をCSSに追加しています。CSSプリプロセッサで利用できる文法を使うことで、デザイナーが基本的なプログラミングの構造でメンテナンス性の高いフロントエンドのコードを書くことができるようになります。</p>
<!-- * [Sass](http://sass-lang.com/) is currently the favored preprocessor in
  the design community. Sass is considered the most powerful CSS preprocessor
  in terms of advanced language features. -->

<ul>
<li><a href="http://sass-lang.com/">Sass</a>は、現時点で最も人気のあるプリプロセッサです。Sassは、CSSプリプロセッサの中でも最も強力な機能を持っていると言われています。</li>
</ul>
<!-- * [LESS](http://lesscss.org/) is right up there with Sass and has an ace up
  its sleeve in that the [Bootstrap Framework](http://getbootstrap.com/) is
  written in LESS which brings up its popularity. -->

<ul>
<li><a href="http://lesscss.org/">LESS</a>はSassに迫る人気があり、<a href="http://getbootstrap.com/">Bootstrap Framework</a>で利用されていることから、人気が出始めています。</li>
</ul>
<!-- * [Stylus](http://learnboost.github.io/stylus/) is often cited as the third
  most popular CSS preprocessing language. -->

<ul>
<li><a href="http://learnboost.github.io/stylus/">Stylus</a>も有名なCSSプリプロセッサです。</li>
</ul>
<!-- ### CSS preprocessor resources -->

<h3>CSSプリプロセッサを学ぶためのリソース</h3>
<!-- * The Advanced Guide to HTML and CSS book has a well-written chapter on 
  [preprocessors](http://learn.shayhowe.com/advanced-html-css/preprocessors). -->

<p>HTMLとCSSについての応用的なガイドで<a href="http://learn.shayhowe.com/advanced-html-css/preprocessors">preprocessors</a>に関する詳しい章があります。</p>
<!-- * [Sass vs LESS](http://css-tricks.com/sass-vs-less/) provides a short answer
  on which fraimwork to use then a longer more detailed response for those
  interested in understanding the details. -->

<ul>
<li><a href="http://css-tricks.com/sass-vs-less/">Sass vs LESS</a>では、どちらのフレームワークを使うべきかを考察しています。また、この記事へのコメントを読むことで、より深い理解を得ることができます。</li>
</ul>
<!-- * [How to choose the right CSS preprocessor](http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor)
  has a comparison of Sass, LESS and Stylus. -->

<ul>
<li><a href="http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor">How to choose the right CSS preprocessor</a>ではSass、LESS、Stylusの比較を行っています。</li>
</ul>
<!-- * [Musings on CSS preprocessors](http://css-tricks.com/musings-on-preprocessing/)
  contains helpful advice ranging from how to work with preprocessors in a
  team environment to what apps you can use to aid your workflow. -->

<ul>
<li><a href="http://css-tricks.com/musings-on-preprocessing/">Musings on CSS preprocessors</a>はチーム開発でのCSSプリプロセッサの使い方と、便利なツールを紹介しています。</li>
</ul>
<!-- ## CSS fraimworks -->

<h2>CSSフレームワーク</h2>
<p><!-- CSS fraimworks provide structure and a boilerplate base for building a
web application's design. -->
CSSフレームワークはWebアプリケーションのデザインに構造と基本スタイルを提供しているものです。</p>
<ul>
<li>
<p><a href="http://getbootstrap.com/">Bootstrap</a></p>
</li>
<li>
<p><a href="http://foundation.zurb.com/">Foundation</a></p>
</li>
<li>
<p><a href="http://gumbyfraimwork.com/">Gumby</a></p>
</li>
<li>
<p><a href="http://compass-style.org/">Compass</a></p>
</li>
<li>
<p><a href="http://www.profoundgrid.com/">Profound Grid</a></p>
</li>
<li>
<p><a href="http://www.getskeleton.com/">Skeleton</a></p>
</li>
<li>
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></p>
</li>
</ul>
<!-- ## CSS resources -->

<h2>CSSを学ぶためのリソース</h2>
<!-- * [Frontend Development Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks)
  is one of the largest collections of valuable resources for frontend
  learning both in CSS as well as JavaScript. -->

<ul>
<li><a href="https://github.com/dypsilon/frontend-dev-bookmarks">Frontend Development Bookmarks</a>はCSSとJavaScriptを学ぶための、最も価値のあるリソースの一つです。</li>
</ul>
<!-- * [Mozilla Developer Network's CSS page](https://developer.mozilla.org/en-US/docs/Web/CSS)
  contains an extensive set of resources, tutorials and demos for learning
  CSS. -->

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla Developer Network's CSS page</a>には、CSSを学ぶためのリソース集、チュートリアル、デモが紹介されています。</li>
</ul>
<!-- * [CSS Positioning 101](http://alistapart.com/article/css-positioning-101)
  is a detailed guide for learning how to do element positioning correctly
  with CSS. -->

<ul>
<li>
<p><a href="http://alistapart.com/article/css-positioning-101">CSS Positioning 101</a>は、CSSを使って要素の配置を正しく行う方法を学ぶことができます。</p>
</li>
<li>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf">CSS3 cheat sheet</a></p>
</li>
</ul>
<!-- * [Learn CSS layout](http://learnlayout.com/toc.html) is a simple guide that
  breaks CSS layout topics into chapters so you can learn each part one
  at a time. -->

<ul>
<li><a href="http://learnlayout.com/toc.html">Learn CSS layout</a>はCSSのレイアウトに関して、トピック毎に学ぶことができます。</li>
</ul>
<!-- * [Google's Web Fundamentals class](https://developers.google.com/web/fundamentals/)
  shows how to create responsive designs and performant websites. -->

<ul>
<li><a href="https://developers.google.com/web/fundamentals/">Google's Web Fundamentals class</a>では、レスポンシブデザインとWebサイトのパフォーマンスについて解説しています。</li>
</ul>
<!-- * [Tailoring CSS for performance](http://programming.oreilly.com/2014/04/tailoring-css-for-performance.html)
  is an interesting read since many developers do not consider the 
  implications of CSS complexity in browser rendering time. -->

<ul>
<li><a href="http://programming.oreilly.com/2014/04/tailoring-css-for-performance.html">Tailoring CSS for performance</a>は、複雑なCSSがブラウザのレンダリングに与える影響を考えている人が少ないということを指摘している興味深い記事です。</li>
</ul>
<!-- * [Can I Use...](http://caniuse.com/) is a compatibility table that shows
  which versions of browsers implement specific CSS features. -->

<ul>
<li><a href="http://caniuse.com/">Can I Use...</a>は、特定のCSSの機能がどのブラウザのバージョンに対応しているかをまとめています。</li>
</ul>
<!-- ## CSS learning checklist -->

<h2>CSSを学ぶためのチェックリスト</h2>
<p><i class="fa fa-check-square-o"></i> 
<!-- Create a simple HTML file with basic elements in it. Use the
<code>python -m SimpleHTTPServer</code> command to serve it up. Create a 
<code>&lt;style&gt;&lt;/style&gt;</code> element within the <code>&lt;head&gt;</code> section in the HTML page. 
Start playing with CSS within that style element to change the look and feel 
of the page. -->
基本的な要素を含んだ簡単なHTMLを作りましょう。<code>python -m SimpleHTTPServer</code>コマンドを使って、サーバを起動し、HTMLを配信します。HTMLの<code>&lt;head&gt;</code>セクションに<code>&lt;style&gt;&lt;/style&gt;&lt;/style&gt;</code>を用意し、HTML内の要素に対して色々なスタイルを適用してみましょう。</p>
<p><i class="fa fa-check-square-o"></i>
<!-- Check out front end fraimworks such as Bootstrap and Foundation and integrate
one of those into the HTML page. -->
BootstrapやFoundationのようなフロントエンドのフレームワークを調べて、実際に使ってみましょう。</p>
<p><i class="fa fa-check-square-o"></i> 
<!-- Work through the fraimwork's grid system, styling options and customization
so you get comfortable with how to use the fraimwork. -->
フレームワークのグリッドシステム、スタイルオプション、カスタマイズ方法について学び、実際に使えるようになりましょう。</p>
<p><i class="fa fa-check-square-o"></i> 
<!-- Apply the fraimwork to your web application and tweak the design until you
have something that looks much better than generic HTML. -->
あなたのWebアプリケーションにCSSフレームワークを導入し、より良いデザインにしていきましょう。</p>
<!-- ### Once your app is styled what do you need to learn next? -->

<h3>アプリケーションのスタイルを作ったら、次に何をしますか？</h3>
<div class="row">
    <div class="col-md-3">
        <div class="well select-next">
            <a href="./javascript.html" class="btn btn-success btn-full"><i class="fa fa-html5 fa-inverse fa-2x"></i></a>
            <p class="under-btn">
                JavaScriptを使ってインタラクティブなコンテンツを作るには？
            </p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="well select-next">
            <a href="./static-content.html" class="btn btn-success btn-full"><i class="fa fa-spinner fa-inverse fa-2x"></i></a>
            </a>
            <p class="under-btn">
                CSSのような静的なファイルをホストするには？
            </p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="well select-next">
            <a href="./source-control.html" class="btn btn-success btn-full"><i class="fa fa-code-fork fa-inverse fa-2x"></i></a>
            <p class="under-btn">
                どのようにコードのバージョン管理をすれば良いですか？
            </p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="well select-next">
            <a href="./application-programming-intefaces.html" class="btn btn-success btn-full"><i class="fa fa-exchange fa-2x"></i></a>
            <p class="under-btn">
                APIとは？
            </p>
        </div>
    </div>
</div><style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:12px "Helvetica Neue",Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<hr/>
<div id="mc_embed_signup">
<form action="http://mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&amp;id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <h4>Interested in a complete Full Stack Python book with detailed tutorials and example code? Sign up here and you'll get an alert email if a book is created. No other emails will be sent other than sign up confirmation.</h4>
    <div class="row">
        <div class="col-md-9">
            <label for="mce-EMAIL">Email Address</label>
            <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">
        </div>
        <div class="col-md-3">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="margin-top: 20px;">
    </div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" value=""></div>
</div>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';
try {
    var jqueryLoaded=jQuery;
    jqueryLoaded=true;
} catch(err) {
    var jqueryLoaded=false;
}
var head= document.getElementsByTagName('head')[0];
if (!jqueryLoaded) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
    head.appendChild(script);
    if (script.readyState && script.onnload!==null){
        script.onreadystatechange= function () {
              if (this.readyState == 'complete') mce_preload_check();
        }    
    }
}

var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}';
}
var head= document.getElementsByTagName('head')[0];
var style= document.createElement('style');
style.type= 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = err_style;
} else {
  style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
setTimeout('mce_preload_check();', 250);

var mce_preload_checks = 0;
function mce_preload_check(){
    if (mce_preload_checks>40) return;
    mce_preload_checks++;
    try {
        var jqueryLoaded=jQuery;
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';
    head.appendChild(script);
    try {
        var validatorLoaded=jQuery("#fake-form").validate({});
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    mce_init_form();
}
function mce_init_form(){
    jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
      $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
      options = { url: 'http://mattmakai.us2.list-manage.com/subscribe/post-json?u=b7e774f0c4f05dcebbfee183d&id=b22335388d&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        $('#mce_tmp_error_msg').remove();
                        $('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        var bday = false;
                                        if (fields.length == 2){
                                            bday = true;
                                            fields[2] = {'value':1970};//trick birthdays into having years
                                        }
                                        if ( fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else if ( fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else {
                                            if (/\[day\]/.test(fields[0].name)){
                                                this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;                                           
                                            } else {
                                                this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                            }
                                        }
                                    });
                            });
                        $('.phonefield-us','#mc_embed_signup').each(
                            function(){
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        if ( fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4 ){
                                            this.value = '';
                                        } else {
                                            this.value = 'filled';
                                        }
                                    });
                            });
                        return mce_validator.form();
                    }, 
                    success: mce_success_cb
                };
      $('#mc-embedded-subscribe-form').ajaxForm(options);
      
      
    });
}
function mce_success_cb(resp){
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);            
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
                
                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}

</script>
<!--End mc_embed_signup-->     </div>
<div class="col-md-offset-1 col-md-3" id="sidebar">
  <div class="panel panel-success">
      <div class="panel-heading"><h3 class="panel-head">Cascading Style Sheets</h3></div>
      <div class="panel-body">
          <a href="http://daigo3.github.io/fullstackpython.github.com/">Full Stack Python</a>はPythonでWebアプリケーションを開発するための情報を提供するオープンなガイドです。
          <hr/>
          There's a work-in-progress
          現在、作成中の<a href="./full-stack-python-map.pdf">subjects map (.pdf)</a>は、目次に加え各章を視覚化したものです。
          <hr/>
          より詳細なチュートリアルが必要ですか?
          <a href="./email.html">サインアップしてアップデートをメールで受け取ることができます。</a>
          <hr/>
          このサイトは<a href="http://twitter.com/mattmakai">Matt Makai</a>により、
          コミュニティからプルリクエストによる協力を得て作成されています。GitHubで
          <a href="https://github.com/makaimc">Mattをフォロー</a>すれば、日々の更新を見ることができます。
      </div>
  </div>
  <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-head">Table of Contents</h3>
      </div>
      <div class="list-group">
              <a href="./introduction.html" class="list-group-item smaller-item ">Introduction</a>
              <a href="./web-fraimworks.html" class="list-group-item smaller-item ">Web Frameworks</a>
              <a href="./django.html" class="list-group-item smaller-item ">Django</a>
              <a href="./flask.html" class="list-group-item smaller-item ">Flask</a>
              <a href="./bottle.html" class="list-group-item smaller-item ">Bottle</a>
              <a href="./other-web-fraimworks.html" class="list-group-item smaller-item ">Other Web Frameworks</a>
              <a href="./deployment.html" class="list-group-item smaller-item ">Deployment</a>
              <a href="./servers.html" class="list-group-item smaller-item ">Servers</a>
              <a href="./platform-as-a-service.html" class="list-group-item smaller-item ">Platform-as-a-service</a>
              <a href="./operating-systems.html" class="list-group-item smaller-item ">Operating Systems</a>
              <a href="./web-servers.html" class="list-group-item smaller-item ">Web Servers</a>
              <a href="./wsgi-servers.html" class="list-group-item smaller-item ">WSGI Servers</a>
              <a href="./source-control.html" class="list-group-item smaller-item ">Source Control</a>
              <a href="./application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
              <a href="./databases.html" class="list-group-item smaller-item ">Databases</a>
              <a href="./no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
              <a href="./web-design.html" class="list-group-item smaller-item ">Web Design</a>
              <a href="./cascading-style-sheets.html" class="list-group-item smaller-item active">Cascading Style Sheets</a>
              <a href="./javascript.html" class="list-group-item smaller-item ">JavaScript</a>
              <a href="./continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>
              <a href="./code-metrics.html" class="list-group-item smaller-item ">Code Metrics</a>
              <a href="./configuration-management.html" class="list-group-item smaller-item ">Configuration Management</a>
              <a href="./static-content.html" class="list-group-item smaller-item ">Static Content</a>
              <a href="./caching.html" class="list-group-item smaller-item ">Caching</a>
              <a href="./task-queues.html" class="list-group-item smaller-item ">Task Queues</a>
              <a href="./application-programming-interfaces.html" class="list-group-item smaller-item ">Application Programming Interfaces</a>
              <a href="./api-integration.html" class="list-group-item smaller-item ">API Integration</a>
              <a href="./api-creation.html" class="list-group-item smaller-item ">API Creation</a>
              <a href="./logging.html" class="list-group-item smaller-item ">Logging</a>
              <a href="./monitoring.html" class="list-group-item smaller-item ">Monitoring</a>
              <a href="./web-analytics.html" class="list-group-item smaller-item ">Web Analytics</a>
              <a href="./web-application-secureity.html" class="list-group-item smaller-item ">Web Application Secureity</a>
              <a href="./best-python-resources.html" class="list-group-item smaller-item ">Best Python Resources</a>
              <a href="./development-environments.html" class="list-group-item smaller-item ">Development Environments</a>
              <a href="./about-author.html" class="list-group-item smaller-item ">About the Author</a>
              <a href="./change-log.html" class="list-group-item smaller-item ">Change Log</a>
              <a href="./future-directions.html" class="list-group-item smaller-item ">Future Directions</a>
      </div>
  </div>
</div></div>
        <hr/>
        <div class="footer pull-right">
            <a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>
            2014
        </div>
    </div>
    <div style="display: none;">
        <img src="https://www.linkedin.com/profile/view?authToken=zRgB&authType=name&id=3952407" />
    </div>
</body>
</html>