VuePress入門 | NxWorld
静的サイトジェネレータ「VuePress」の導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 Node.js（Ver 8以上）が必要になるので、使っている覚えのない方や使用しているバージョンが古い方は、Node.jsをインストールまたはアップデートをしてください。 コマンドで$ node -vを入力すれば、インストールの有無やバージョン確認ができます。 「Getting Started」ではYarnとnpmそれぞれのコマンドで紹介しますが、それ以降は基本的にYarnを用いた形で紹介しているので、npmを利用している場合は置き換えてください。 紹介している内容は、VuePress Ver 0.14.8を
サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ - NxWorld
ブラウザ毎に設定されているデフォルトスタイルの差異をなくし、サイト制作のスタイル設定を効率的に行うことができるリセットCSSやノーマライズCSSを紹介します。 すべてを完全にリセットしてしまうものもあれば、リセットは一部にして有用なスタイルは保持するものもあったりと様々なタイプがあるので、自分の癖やプロジェクトガイドラインに合わせて選ぶこともできると思います。 普段からweb制作に携わっているならご存知の方も多いように、webサイトを閲覧する際に使用されるブラウザは様々な種類がありますが、各種HTML要素にはブラウザによってそれぞれ異なるスタイルがデフォルトとして定義されています。 そういったブラウザ毎のスタイルの差異をなくしてサイト制作時のスタイル設定を効率的に行うのに便利なのがリセットCSSとノーマライズCSSで、個人的に以前（といってももう割と前ですが）はとにかく様々な要素のスタイル
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
WordPressの管理画面カスタマイズ時に使えるハック #5 - NxWorld
WordPressの管理画面カスタマイズ時に見るチートシート目的のメモ第4弾です。 紹介している内容は、基本的にWordPress Ver 4.4.2で実装・確認したものになります。 メディアアップローダのデフォルト表示を変更する 画像を追加したい時には投稿画面にある「メディアを追加」ボタンから行う人が多いと思いますが、その際にデフォルトのメディアアップローダでは「すべてのメディア」が初期選択された状態になっています。 例えば画像を多用しているサイトなどで不要な画像はできるだけ非表示にしたい時やロードさせたくない時などは、デフォルトで「すべてのメディア」となっているプルダウンを「この投稿へのアップロード」に変更することで表示されるメディアを絞り込んで表示させることができるのですが、これを毎回選択するのが面倒だとかデフォルトの初期選択を変えたいという場合はfunctions.phpへ下記のよ
WordPress：コメントフォームをカスタマイズする方法 - NxWorld
このブログでもコメント部分はプラグインを使用していたりと、WordPressのコメントフォームを触ったことがあまりないなとふと思って改めて見直したり試したりしたので、そのときの備忘録も兼ねてコメントフォームを自分好みにカスタマイズする方法などを紹介します。 カスタマイズといってもガッツリいじる感じとか難しいようなものではなく、文言やマークアップを少し変更するなど、デフォルトにちょっとだけ手を加えるような簡易的なものです。 最近だとJetpackやDisqusなどの手軽に実装できる便利なプラグインが沢山あることもあって、そういったものを取り入れているブログも多く見かけますが、以下はデフォルトのコメントフォームの使用方法やちょっとしたカスタマイズ方法になります。 ソーシャルアカウントと連携させたいとかになるとやはりプラグインを使った方が手っ取り早く実装できますが、デフォルトの機能で十分というこ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
WordPress：カテゴリー選択を1つしかできないように制限する方法 - NxWorld
WordPressのカテゴリー選択部分はチェックボックスで表示されており、もちろんチェックボックスなのでひとつの記事に対して複数のカテゴリーを選択することができます。 ただ、場合によって複数選択されてほしくないということがあるので、カテゴリーを1つしか選択できないように制限する方法を備忘録兼ねて紹介します。 同じことを実装しようとする際、1つに制限するからラジオボタンに変更するというのをよく見かけます。 たしかにその方がわかりやすいので自分もその方法を使おうかと思ったのですが、投稿画面ではラジオボタンで問題なく実装できても、記事一覧のクイック編集部分がラジオボタンだと自分の知識不足もあって上手く実装できませんでした...。（正確にはとりあえず実装はできるけど、挙動が非常に怪しい） 投稿画面はラジオボタンで実装して、クイック編集に関してはいっそのこと非表示にするのも考えましたが気持ち悪い感じ
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやSVGで実装するローディングアニメーション - NxWorld
CSS Snippets - NxWorld