リセットCSSをやめてみる

リセットCSSをやめてみる

ブラウザにはデフォルトのスタイルがあります。そのため、ブラウザごとに微妙に異なる表示となり意図したデザインが得られないことからリセットCSSやノーマライズCSSを適用してきました。 しかし、緻密なデザインであれば、これからしばらく必要になるのかもしれませんが、個人のブログが...

投稿日:

inputやtextareaにスタイルが適応されないとき

inputやtextareaにスタイルが適応されないとき

フォームのinputやtextareaにfontのスタイルを適応させようとしても適応されないことがあります。 どうやら、一部のブラウザは親要素から font-family や font-size を継承せずにシステムのデフォルトのスタイルが使用されるようです。 そんな場合...

投稿日:

CSS3の否定擬似クラス :not() を使ってみる

CSS3の否定擬似クラス :not() を使ってみる

CSS3で採用された否定擬似クラス :not() を使ってみました。 jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshowを書きましたが、その後暫くするとスライドショーが表示されなくなりました。 調べてみると、番号付き...

投稿日:

Font Awesomeを使ってみる

Font Awesomeを使ってみる

Webフォントにはまだ挑戦していないのですが、Webアイコンフォントのひとつである『Font Awesome』を試してみました。 1.読み込み方法 ダウンロードする方法もありますが、今回はCDNを使います。head要素内に次のコードで読み込ませます。 <link ...

番号付きリストをCSSとcounter()関数でデザインする

番号付きリストをCSSとcounter()関数でデザインする

番号付きリストをCSSとcounter()関数でデザインしてみます。 HTMLは次の通りです。 <ol> <li>ピリオドつき <ol> <li>括弧つき <ol>...

投稿日:

jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow

jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow

Image 01re·lax·a·tion Image 02qui·e·tude Image 03bal·ance Image 04e·qua·nim·i·ty Image 05com·po·sure Image 06se·ren·i·ty CSS...

投稿日:

重なり合うボックスのリンクやテキストが選択できない場合

重なり合うボックスのリンクやテキストが選択できない場合

重なり合うボックスのリンクやテキストが選択できないという事態が発生。 原因は、ネガティブマージン(marginにマイナス値を設定したり、positionプロパティでマイナス値を設定したりしてボックスを配置する手法)でした。 その場合は、リンクやテキストが選択できないボック...

投稿日:

Vegas2で背景画像のスライドアニメーション

Vegas2で背景画像のスライドアニメーション

背景画像のスライドアニメーションのため、Vegas2を導入してみました。 このブログではなく、富山市議会議員 しきだ博紀 公式ウェブサイトで導入しています。 必要なファイルは、次の通りです。 vegas.min.css vegas.min.js overlays...

fancyBox3に変更 - Lightbox系プラグイン比較

fancyBox3に変更 - Lightbox系プラグイン比較

Lightbox系プラグインについてはSlimbox2をBoxerに変更という記事を書きましたが、fancyBox3プラグインに再度変更しました。 特徴としては、モバイルファーストをうたっていて、スマートフォンでの戻る操作に対応しているので、うっかり戻る操作をしても、モーダ...

regex_replaceモディファイアで特定のタグで囲まれたテキストを消す

regex_replaceモディファイアで特定のタグで囲まれたテキストを消す

トップページで、いわゆるアイキャッチ画像と記事の概要を並べて表示させるには、MTAssetThumbnailURLタグで画像を。MTEntryExcerptタグで記事の概要を出力しますが、記事本文の中に <figure><a href="/img...