HTML レスポンシブWebデザインを基本から！
今更ではありますが、2012年頃からWeb業界で話題になっているレスポンシブWebデザイン、スマートフォンの普及率が急速に拡大したこともあり、2014年現在では数多くのコーポレートサイトや個人サイトな...
WEB DESIGN
HTML 
CSS CSSで吹き出しを表現する
チャットやサイトのコメント欄で、閲覧者からのコメントを吹き出し状にしたい時など、今まではわざわざ背景画像などを用意して配置していたりしましたが、CSSだけで表現することが出来るようになりました。その方...
WordPress シンプルかつクールなデザインで魅せるWordPress無料テーマ「SIMPLE WP THEMES」がカッコイイ！
既に有名なんだと思いますが、WordPressのテーマデザインを考える上で参考にさせて頂いている「SIMPLE WP THEMES」というものがあります。過度な装飾や色使いを避け、シンプルな空気感がと...
CSS box-sizingプロパティで横幅指定の煩わしさを軽減する
CSS3から追加されたプロパティ「box-sizing」についてメモしておきます。ある要素の横幅や高さにおいて、今までは「要素自体の幅 + padding値 + border値」 を合わせた数値が、そ...
CSS counter-incrementプロパティを使って自動連番を実現する
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやol...
CSS 「before,after」擬似要素を使用してカウンター（自動連番）を挿入する
before/after擬似要素を利用して、ランキングなどのリストの先頭にカウンター（自動連番）を挿入してみます。
WordPress ローカル環境にWordPressをインストールする
前回の記事「WordPress用にXAMPPでローカル環境を構築する（Windows）」の続きになります。WordPressは、ローカル環境であっても、ほとんどすべての機能が問題なく利用できますので、...
WordPress WordPress用にXAMPPでローカル環境を構築する（Windows）
WordPressを使ってサイトを構築する際に、本番環境のサーバーにアップロードするのではなく、ローカル環境動作テストと安全性を確認しておいた方が良いでしょう。ローカル環境を構築する方法は、Windo...
CSS before, after 擬似要素でblockquoteを表現する
ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ！」と言った感じにわかり...
jQuery 横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」
スクロールすると、横方向に画像が移動しパララックスを表現をしてくれるjQueyプラグインの「jInvertScroll.js」をご紹介します。デモサンプル// // 1.jInvertScroll一式...
jQuery レスポンシブに対応した簡単メニュー
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまず...
CSS transformを使って回転するパネルを作ってみる
CSSのtransformを使用してクルっと回転するパネル風ボタンを作ってみます。
WordPress 投稿画面を「AddQuicktag」を利用して効率UP!
WordPressの投稿画面でテキストを入力していく際に、ある決まりのあるコードの記述をまとめておけば効率が良くなりますよね。例えば、簡単なところで言うと、テキストを赤色にしたいとか、背景色を付けたい...
WordPress Twitterボタンを表示する
Twitterのフォローを促す「Twitterボタン」を表示させたいと思います。まずは、下記の「Twitterボタン」にてソースコードを作成しましょう。Twitterボタン// // 1.コードを取得...