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

タグ:HTML

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

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

前回の記事ではYoutubeの動画を再生する方法を扱ったので、今回はHTML5のvideoタグを使用してみよう。

前回記事
[HTML] PCサイトにYoutubeの動画を埋め込む

まずは単純なところから始めてみよう。

これだけで動画を再生することが出来る。
テクノロジーは私達の生活を楽にしてくれることが実感できる瞬間だ。

色々なブラウザに対応したい場合は3つのフォーマットの動画を用意する必要があるので注意が必要だ。
詳しくはここに書いてある。
HTML5 Video - w3schools.com

次は動画の終了イベントを拾って、複数の動画を連続再生してみよう。
 続きを読む

色んなサイトでYoutubeの動画を埋め込んでいるのを見かけるが、あれはどうやっているのだろう。
一番手っ取り早いのは、動画のページで「共有」→「埋め込みコード」と選択するとHTMLのコードが生成されるので、これを好きな場所にコピペすれば良い。
Youtube_ss1
では、ページが表示されたら自動再生したい場合はどうすればいいだろう。
そういう時は、Youtube公式のIFrame Player APIを使えばいい。
 続きを読む

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

シンプルなリンクリスト

まずはシンプルなリンクリストを作ってみよう。
最終形はこんな感じだ。
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擬似要素はクリアフィックスに(絶対ではないが、ほぼ)必要であるため、まずはここから考えてみよう。


続きを読む

このページのトップヘ