スマートフォンサイト制作時に覚えておきたいCSS 15 | NxWorld

2014/02/05 1429 users

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてくださ... 続きを読む

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld

2013/12/12 1234 users ホバーエフェクト CSS ボタンデザイン

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場... 続きを読む

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

2015/10/07 1048 users CSS 見栄え 手間 複数行 タイトルデザイン

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになって... 続きを読む

デザイン制作を助けてくれる国内外の素材サイトまとめ | NxWorld

2017/10/24 935 users 有償 アイコン 素材 商用利用時 かなり

見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されてい... 続きを読む

フォーム周りで覚えておくと便利なCSS Snippets | NxWorld

2015/03/26 872 users プロパティ CSS スニペット ブラウザ 普段

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのも幾つかあるので参考にしてみてください。 ※紹介している内容はブラウザ（特に... 続きを読む

手書き風デザインと相性良さそうなフリーフォント 50 | NxWorld

2014/06/25 771 users フリーフォント チョーク 備忘録用 鉛筆 相性

好みなものや気になるものを見つけてはメモしていたのが結構溜まってきたので、普段からよく利用させてもらっているのも含めて自分の備忘録用でまとめました。いずれも手書き風デザインに相性が良さそうなフリーフォントで、この手のタイプの中では有名なものから割と新しいものまで、日本語と欧文それぞれ25種類ずつの全50種類です。女性や子供が書いたような特徴的なものや可愛らしいタイプのもの、チョークや鉛筆で書かれた... 続きを読む

hr要素のデザインサンプル 12 | NxWorld

2013/09/12 698 users 罫線 備忘録 見栄え CSS 目印

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 以下で紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません... 続きを読む

CSSのみで実装するキャプションエフェクト 20 | NxWorld

2014/05/20 640 users キャプション 備忘録 アイキャッチ 文言 共通

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。画像のマウスオーバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML 一部異なっているものもありますが、今回はサンプル... 続きを読む

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld

2015/06/19 525 users クローズボタン エフェクト CSS 矢印 ハンバーガーメニュー

自分用に一覧化したのでシェアします。ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開している時などのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変... 続きを読む

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld

2017/01/11 482 users jQuery プレフィックス ヘッダー 見栄え ナビゲーション

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 ※プレフィックスは必要に応じて追記してください。 ※以下で紹介している方法はいずれもjQueryを使用していますので、あらかじめ読み込ませてくだ... 続きを読む

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld

2015/04/05 443 users エフェクト フラッシュ スライド ホバー時 拡大縮小

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 ... 続きを読む

jQuery：よく使用される機能をまとめて実装できるプラグイン | NxWorld

2013/05/30 406 users アコーディオン 備忘録 jQuery 散乱 jQuery関連

引き続きjQuery関連の備忘録。スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるプラグインのまとめです。予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりも... 続きを読む

最近気になったハイクオリティなUIキット #5 | NxWorld

2014/07/07 373 users レイヤースタイル Freebie UIキット ハイクオリティ

ここ最近で気になったハイクオリティなUIキットのまとめです。そのままデザイン素材として使用するだけでなく、カラーの組み合わせ方やどのようなレイヤースタイルで作られているかなどの部分でも何かと参考になります。 Retro Jam Ui Kit Free Ui Kit [Freebie] Free PSD: Flat UI kit Free PSD: Ui Kit Free Minimal Ui Ki... 続きを読む

WordPress：覚えておいて損はない、開発者向けプラグイン 25＋ | NxWorld

2014/03/18 354 users WordPre 表向き 見栄え ご存じ 沢山

WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPre... 続きを読む

フロントエンドエンジニアにオススメする参考になりすぎるブログ10選 - North-Geek

2016/04/20 350 users North-Geek バシャログ ICS MEDIA 参考

Webサイト制作時に、僕がいつもお世話になっている素晴らしいWebメディア・ブログがいくつかあります。 そこで今回はいつも参考にしている フロントエンドエンジニアにオススメのブログ を紹介します。 dwango creators' blog おすすめ記事 バシャログ。 おすすめ記事 ICS MEDIA おすすめ記事 commte おすすめ記事 NxWorld おすすめ記事 Syncer おすすめ記... 続きを読む

CSSで括弧を表現したサンプル | NxWorld

2015/03/08 345 users 括弧 備忘録 CSS テキスト サンプル

正直微妙なので恐らく使うことないだろうっていうのもあるんですが、ちょっと使う機会があって実装できるのか試してみたので備忘録として残しておこうと思います。「」（鉤括弧）や［］（角括弧）など、括弧をCSSで表現してみたサンプルで、普通に使うのであればただのテキストを使えば良いですが、複数行をひとつの括弧で括るようなデザインにしたい時に使えます。 ※以下で紹介する方法はブラウザによっては表示確認ができな... 続きを読む

ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 | NxWorld

2015/08/20 341 users デバイス 目次 ブラウザ 注意 スクリプト

他ではあまり見かけることのないユニークな見せ方や動きを実装したい時、遊び心あるイースターエッグを仕込んでおきたい時などに個人的に使えそうだなと思ったスクリプトをまとめてみました。ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 目次 窓... 続きを読む

WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録 | NxWorld

2013/06/10 341 users 備忘録 頻度 カスタマイズ WordPress 自分好み

「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめて... 続きを読む

ul・ol・li要素の備忘録 | NxWorld

2013/07/23 339 users 目次 備忘録 ブラウザ 使用頻度 かなり今更感

かなり今更感がありますけど、ul・ol・li要素関連の備忘録です。対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思った時にパッと思い浮かばなそうなので書き残しておきます。 ul・ol・li要素の備忘録 目次 list-style-type value属性 start属性 reversed属性 ※未対... 続きを読む

テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorld

2015/11/25 309 users CSSプロパティ スニペット スタイリング テキスト周り

スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚ã... 続きを読む

jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 | NxWorld

2014/02/27 284 users jQuery Disable 備忘録 送信 ボタン

割と頻繁に使うので備忘録。jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと、使う場面が多いのではないかと思います。 ページが表示された際は画像上部のようにボタンにはdisableが指定されて送信できない状態になっています... 続きを読む

CSSグラデーションで作った背景パターンのサンプル | NxWorld

2015/11/27 283 users CSSグラデーション サンプル 背景パターン

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきましたし、今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が... 続きを読む

WordPress：カスタマイズするなら覚えておきたい条件分岐について | NxWorld

2015/03/22 274 users 沢山 カスタマイズ 特定 条件分岐タグ サイトコンテンツ

WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。WordPressには便利な条件分岐タグが沢山用意されており、これらを用いることで様々なことができるので、先述したように特定の条件で何かをさせたいというカスタマイズを... 続きを読む

いざという時に便利そうな、珍しいタイプのアイコンセット 30 #3 | NxWorld

2014/05/29 272 users アイコンセット 高いUIアイコン 汎用性 珍しいタイプ 機会

ここ最近見かけた珍しいタイプのアイコンセットのまとめです。これまでと同様で汎用性が高いUIアイコンなどと比べると使う場面は少ないですが、いずれもいざ使いたい時に便利そうなものやあまり見かけないアイコンセットです。今回は大容量の飲食関連のアイコンセットがあったり、使う機会が多そうな医療関連のアイコンセットが幾つかあります。 続きを読む

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました | NxWorld

2016/01/26 237 users バナーデザイン ターゲット レイアウト 領域 制作フロー

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも…。そこで今回は、バナーデザインをす... 続きを読む