WEB DESIGN

HTML

レスポンシブWebデザインを基本から!

今更ではありますが、2012年頃からWeb業界で話題になっているレスポンシブWebデザイン、スマートフォンの普及率が急速に拡大したこともあり、2014年現在では数多くのコーポレートサイトや個人サイトな...
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.コードを取得...