CSS counter-incrementプロパティを使って自動連番を実現する
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやol...
mororeco
CSS 
CSS 「before,after」擬似要素を使用してカウンター（自動連番）を挿入する
before/after擬似要素を利用して、ランキングなどのリストの先頭にカウンター（自動連番）を挿入してみます。
CSS before, after 擬似要素でblockquoteを表現する
ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ！」と言った感じにわかり...
jQuery 横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」
スクロールすると、横方向に画像が移動しパララックスを表現をしてくれるjQueyプラグインの「jInvertScroll.js」をご紹介します。デモサンプル// // 1.jInvertScroll一式...
jQuery レスポンシブに対応した簡単メニュー
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまず...
CSS transformを使って回転するパネルを作ってみる
CSSのtransformを使用してクルっと回転するパネル風ボタンを作ってみます。
Illustrator 手書き風文字で遊び心を演出してみよう！
タイトル文字やほんのちょっとした飾り文字として鉛筆やチョークで描いたような「手書き風文字」を使用してみると、簡単にオリジナリティー感アップで遊び心がちょこっとプラスされます！ということで、テキストを手...
WordPress 投稿画面を「AddQuicktag」を利用して効率UP!
WordPressの投稿画面でテキストを入力していく際に、ある決まりのあるコードの記述をまとめておけば効率が良くなりますよね。例えば、簡単なところで言うと、テキストを赤色にしたいとか、背景色を付けたい...
CSS CSS3アニメーションを実現する「transition」
transitonプロパティを使って、時間的な変化を付けることが出来ます。変化する変化速度や開始のタイミング、また要する時間などをCSSのみで実現が可能です。ただし、対応ブラウザの問題がありますので注...
WordPress カテゴリーごとに別々のアイコンを表示する
投稿記事の一覧を表示しているページなどで、すべての複数の投稿カテゴリーが羅列される際に、それぞれがどのカテゴリーに属する記事なのかがパッと見で視覚的にわかるようにしたいとき、該当するカテゴリーに応じて...
ブログ ウェブデザイン技能検定3級に合格しました！
普段、Webデザインを生業として生活をさせて頂いておりますが、時代の流れは早く、日々なんとか食らいついていくのが精一杯になってしまう時が少なからずあります。よくわからない技術や知識は忙しさにかまけて、...