雑食プログラミング備忘録

タグ:CSS

Webサイトを作る上でフォントは重要だ。
フォントが変わるとサイトの印象はガラリと変わる。
しかし、環境によってはあまり良いフォントが使えないかもしれない。

そこで便利なのがGoogle Fontsだ。
今回はGoogle Fontsを使うまでの手順を追ってみる。
 続きを読む

スマホサイトでよく見られるリンクリスト。
シンプルなものから複雑なものまであるが、まずはシンプルなものを作り、少しずつステップアップしてみよう。

シンプルなリンクリスト

まずはシンプルなリンクリストを作ってみよう。
最終形はこんな感じだ。
link-list_ss01
最初に用意するHTMLとCSSはこのようになる。
<ul>
    <li>
        <a href="">Docomo</a>
    </li>
    <li>
        <a href="">KDDI</a>
    </li>
    <li>
        <a href="">Softbank</a>
    </li>
</ul>
ul, li {
    list-style: none;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
}

続きを読む

私がCSSを学び始めたのは比較的最近であり、同時にjQueryの学習も行っていた。
CSSもjQueryも似たようなセレクタを使えるため、この2つを同時に学習することはとても効率的だと思っていたし、それは今でも変わらない。
しかし、この二つにはやはり細かな違いがあり、それに気づかずに頭を悩ませてしまったことがあった。

それはCSSにおけるafter擬似要素だ。
この機能について大きな勘違いをしていたせいで、CSSにおけるとても重要なテクニックであるクリアフィックスを正しく理解するのに多少の時間を要してしまった。
after擬似要素はクリアフィックスに(絶対ではないが、ほぼ)必要であるため、まずはここから考えてみよう。


続きを読む

このページのトップヘ