ブログ

CSS

「display:inline-block」での隙間(余白)を消す方法

display:inline-block;を使用すると、余計な隙間ができます。これを取り除く方法を4つ紹介します。 改行しない display:inline-block;を適用させた要素をソース内で改…

はにわまん
CSS

PCサイトをレスポンシブ化する時の考え方と注意点

PCサイトをレスポンシブ化する際の流れと注意点を紹介します。シンプルなサイトであれば数時間で終わります。スマホ対応していないサイトは淘汰されていく時代ですので、ぜひレスポンシブ化をご検討ください! ビ…

はにわまん
WordPress

WordPressの編集画面にメタボックスを追加する方法

WordPressの編集画面に独自のメタボックスを追加する方法を紹介します。 メタボックスとは、タグを設定するエリアのような閉じたり移動できたりする箱です。 自分の場合は自分用のメモを常に表示させてお…

はにわまん
JavaScript

疑似要素のCSSの値(content)をJavaScriptで制御する4パターン

::afterや::beforeなどの疑似要素はDOMではないため、jQueryで制御できません。 しかし、無理やり変換する方法はあるので、その方法をまとめておきます。 プロパティを取得して変換するパ…

はにわまん
JavaScript

jQuery不要の軽量コードハイライト!「highlight.js」の解説

jQuery不要、軽量で使いやすいコードハイライト!「highlight.js」を紹介します。 この記事内でも、いたるとこでhighlight.jsが動いています。 ダウンロード ※ ver 9.12…

はにわまん
JavaScript

色の指定が自由自在!カラーピッカーを出現させるjQueryプラグイン「Bootstrap Color Picker Sliders」

Bootstrapを拡張するjQueryプラグイン「Bootstrap Color Picker Sliders」の紹介です。 読み込むライブラリが多いのが難点ですが、スタイリッシュなカラーピッカーを…

はにわまん
JavaScript

テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」

テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を紹介します。 実装すると以下のような処理ができるようになります! DEMO(デモ) ここの文字がコピーされます…

はにわまん
CSS

PCサイトのレスポンシブ化で横揺れさせない3つのポイント

PCサイトのレスポンシブ化で横揺れ(水平スクロール)させないポイントを3つ紹介します。 幅をガチガチに指定するPC脳は捨てて、レスポンシブ脳に切り替えましょう! レスポンシブ化のチェックリスト 要素の…

はにわまん
WordPress

コーダー歓喜!WordPressのエディタ編集が便利になるプラグイン「HTML Editor Syntax Highlighter」を紹介

WordPressのテキスト編集を、Sublime Textのようなテキストエディタでリッチに編集したい…。 そんな思いを実現してくれるプラグインがありました。プラグイン「HTML Edi…

はにわまん
環境

登録なし!「jsFiddle」でコードの動作確認とサイト埋め込みをサクッとやろう

コードの動作確認したいときに、ローカルサーバー立ち上げて、jQueryインストールして、コード書いて、、、なんて無駄なことしませんか? jsFiddleというWebサービスを使えば、サクッと簡単に確認…

はにわまん
1 25 26 27 33