Effect」CodePenにCSSのみで実装できる、ホバーエフェクトがかっこいいナビメニューが紹介されていました。端のボーダーが色を引き締めて、アニメーションのアクセントになっています。http://codepen.io/tdevine33/pen/CnDyv/cssのみですぐに実装できるので、とても簡単。使い方をご紹介します。1.HTMLでリストを作成メニューをulで作成します。TwitterGoogle+GitHubCodePen2.サンプルのscssをコンパイルコンパイルには、koalaを使用しました。koalaにフォルダをドラッグ&ドロップ、設定ファイルを作成し、コンパイルします。導入編」などを参考に、ぜひscssを使ってみてください。コンパイル後のソースはこちら。ソーシャルリンク部分のフォントカラーが少し見えにくかったので変更しています。0;}サンプルはこちら。ナビメニュー部分とソーシャル部分の動きは同じですが、縦に並べるか横に並べるかという違いだけで、マウスを移動した時の印象がまた違って見えますね。lowercase;が指定されています。これは、全ての英字を小文字で表示するcssなので、問題があれば削除してしまいましょう。lowercase意外にも3つあります。使ったことがない方は、覚えておくと便利です。...WORDPRESSの新エディタ「Gutenberg(グーテンベルク)」とは?WordPressで新しいエディターがリリースされました。