HTML5のvideoタグのプロパティ

HTML5で力が入っているのは、やはりメディアAPIではないでしょうか？ Ardor(@ArdorOnline)です。 その中でもvideoタグに注目しています。videoタグについて少し見て行きたいと思います。

CSS3の作るマルチカラムに区切り線を付ける方法

マルチカラムにした状態で、区切り線を付ける方法もあります。 Ardor(@ArdorOnline)です。 CSS3を調べていると、便利なプロパティがたくさん追加になっていることに気が付きます。 主力ブラウザでサポートされているので、区切り線を付けたい方は試してみてください。

CSS3でマルチカラムの間隔を指定する

マルチカラムの間隔を調節する方法をみつけました。 Ardor(@ArdorOnline)です。 マルチカラムが簡単にできるようになったのはいいですが、間隔などマージンのやり方がわからずにいました。 間隔を指定するプロパティが見つかったので、ご紹介します。

CSS3のcolumn-widthでマルチカラムレイアウトを実現する

column-widthでもマルチカラムレイアウトが作れます。 Ardor(@ArdorOnline)です。 マルチカラムレイアウトをCSS3で作るならcolumn-widthでも作れます。 前回、column-countでマルチカラムを作成しました。 column-countでは、段組み数を指定する方法なので、他の幅などを考慮して作成する必要があります。 何段で作成するかを明確に指定が可能な方法です。 では、幅に合わせて段組みを作りたい場合は、どうしたらいいでしょうか？ 幅で指定したい場合は、column-widthを利用します。

CSS3のcolumn-countを利用した段組みレイアウト

様々なサイトで段組みレイアウトが使われています。 Ardor(@ArdorOnline)です。 段組みレイアウトは、ブラウザによってレイアウトが崩れたり、なかなか思い通りのレイアウトにならなかったりと苦労が耐えないものです。 そんな段組みレイアウトの機能が、CSS3からサポートされました！簡単にご紹介します。

CSS3で要素に繰り返しスタイルを適用する方法

リストやテーブルの行に繰り返してスタイルを指定する方法があります。 Ardor(@ArdorOnline)です。 以前は、奇数に"odd"、偶数に"even"とクラスを指定して対応することが多かったです。 CSS3からは、構造擬似クラスを使って、もっと簡単に指定が行えます。簡単にご紹介します。

CSS3で使えるメディアクエリのタイプと特性の一覧

メディアクエリについて調べていました。 Ardor(@ArdorOnline)です。 CSS3から特性の指定ができるようになり細かく制御できるようになりました。 ここで一度整理しておきます。

構造擬似クラス(empty)を使って空要素にスタイルを適用する

テーブルで空の場所にスタイルを適用したいことがあります。 Ardor(@ArdorOnline)です。 テーブルのデータが空だったらスタイルクラスを指定することで解決していました。 CSS3からは、もっと簡単に一括して設定する方法がありました！emptyについてご紹介します。

CSS3の構造擬似クラスを比較する

構造擬似クラスは要素のカウント方法が違うものがあります。 Ardor(@ArdorOnline)です。 以前「CSS3で要素に繰り返しスタイルを適用する方法」で 繰り返しスタイルを適用する方法をご紹介しました。 ご紹介したのは「:nth-child」の使い方でした。 実は他にも繰り返しスタイルを適用する方法が、CSS3から追加されています。

Webで使える拡張色一覧【147色】

Webで使える基本色に加え、拡張色がW3Cで定義されています。 Ardor(@ArdorOnline)です。 皆さんは、スタイルで色を指定する時、カラーネームとカラーコードどちらで指定していますか？ カラーネームで指定するとOSやブラウザによって微妙に違った色合いになるみたいです。 今回は、いつでも変換できるように一覧表を作ってみました。

CSS3でチェックボックスやラジオボタンにスタイルを指定する

CSS3シリーズが続いています。 Ardor(@ArdorOnline)です。 今回は、フォームの中でもチェックボックスやラジオボタンの状態に応じてスタイルの指定を行う方法をご紹介します。

CSS3でフォームの有効・無効のスタイルを設定する

UI擬似クラスも追加されてます。 Ardor(@ArdorOnline)です。 Webアプリケーションを開発する際に、フォームを利用します。 フォームにもスタイルを色々と設定できるのですが、今回はUI擬似クラスを利用して有効・無効時のスタイルを指定してみます。

CSS3で該当するクラス名にスタイルを反映させる方法

CSS3ではクラス名の部分一致でスタイルを反映させることができるようになっていました！ Ardor(@ArdorOnline)です。 スタイルシートに記述するクラス名は、似たような意味を持つ場合は共通の単語を使ってコーディングすることが多いです。 共通の単語を使ったクラス名に、一括してスタイルを反映させる方法が、CSS3から可能になっていました。 簡単にご紹介します。

iOSやAndroidの向きに合わせてスタイルを変更する方法

スマートフォン（以下：スマホ）もメディアクエリでスタイルを変更できます。 Ardor(@ArdorOnline)です。 前回「ブラウザの幅に合わせてスタイルを変更する方法」で メディアクエリを利用してブラウザの幅に合わせたスタイルの指定を行いました。 同じことが、スマホでもできます！

ブラウザの幅に合わせてスタイルを変更する方法

メディアクエリを使ってみました。 Ardor(@ArdorOnline)です。 ブラウザの幅に合わせてスタイルを切り替えられませんか？ と、質問があって調べていたのですが、メディアクエリが使えそうです。 ブラウザの幅に合わせてスタイルを変更する方法をご紹介します。

FeedBurnerでRSS登録を簡単にする

たくさんのRSS登録ありがとうございます！ Ardor(@ArdorOnline)です。 RSSを購読する手続きはRSSリーダーによって異なるので苦労してました。 でもFeedBurnerを利用すると多くのRSSリーダーに対応できますよ！

Navbarを非表示に変更する方法

使っている方がいるのか気になってました。 Ardor(@ArdorOnline)です。 Blogger上部に標準で表示されているNavbarですが、必要性があるのかずっと気になっていました。 操作している方がいるのか調べたのですが、全然使われていない。 必要なさそうなので、思い切って非表示にしようと思います。

SyntaxHighlighterのデフォルト値変更 Ver 3.0

SyntaxHighlighterの使い方も概ね調べ終わりました。 Ardor(@ArdorOnline)です。 SyntaxHighlighterのデフォルト値を一括して変更する方法もありましたので、簡単にご紹介します。

SyntaxHighlighterのconfig設定について Ver 3.0

SyntaxHighlighterを使いこなせてますか？ Ardor(@ArdorOnline)です。 SyntaxHighlighterには、ソース毎に指定できるオプションもありますが、 全体に共通して反映したい設定項目がまとめています。 今回は、configの設定について、ご紹介します。

SyntaxHighlighterのautoloaderの使い方 Ver 3.0

Ver 3.0からautoloaderが導入されてたんですね。 Ardor(@ArdorOnline)です。 SyntaxHighlighterは、綺麗に表示できるのですが、ページ表示の遅さが気になってました。 必要ないときは読み込まないで欲しいなと考えてたところです。 Ver 3.0を調べていたら動的に必要なファイルを読み込む方法が提供されてました。 今回はautoloaderの使い方をご紹介します。