ナコさんのブログ | nako-log WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。

注目キーワード

WEBデザイン

デザイン

現役WEBデザイナーが教える商用利用可の素材サイト【保存版】
現役WEBデザイナーが教える商用利用可の素材サイト【保存版】

  • 2020.07.22

制作会社でWEBデザイナーをしていますナコです(@nako_x)。 最近は広告収入モデルの商用利用可の素材サイトが増えてきましたね！ 無料で使えるのでありがたいことです。 ブログを作成するときにも使える 私が仕事で…

続きを読む
coding CSS HTML WEB制作のヒント

【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで使おう！
【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで…

  • 2020.07.22

かっこいいタイトルを画像じゃなくフォントで表現したい！ 注目させたい見出しの書体を変えたい！ サイト全体をどの環境でみても同じフォントで表現したい！ そんな時に便利なのがWEBフォントです。 大丈夫！！ 今…

続きを読む
CSS

【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法
【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法

  • 2020.07.12

サイトのアクセントになるCSSアニメーション。効果的に使っていきたいですね。 今回はストライプをCSSで作成し、それを文字の背景やBoxにアニメーションで表示させていきます。 ストライプの作り方 ストライプはCSS…

続きを読む
WEB制作のヒント

【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-childタグまとめ
【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-c…

  • 2020.07.02

CSS３で要素の場所を指定出来るnth-childの書き方をよく忘れるのでコピペで使えるようにまとめました。 互い違いに色を変えた表や一覧を作ったり、リストの最初の１件の前にmarginを入れたり、コーディング時によく…

続きを読む
CSS

吹き出しやフローチャートで使える！CSSだけで三角形を作るジェネレーター５選
吹き出しやフローチャートで使える！CSSだけで三角形を作るジェネレーター５選

  • 2020.06.23

CSSで三角形を作るにはbodrerタグを使うのですが、数値を変えて微妙なニュアンスを作っていくのがめんどくさいときがありませんか？ そんなときに役立つ、吹き出しやフローチャートで使える三角形を見た目を確認し…

続きを読む
HTML

コピペでできる動きが気持ちいいSNSボタンのCSSデザイン色々
コピペでできる動きが気持ちいいSNSボタンのCSSデザイン色々

  • 2019.09.30

最近はアニメーションで動きを出すボタンがあたりまえになってきましたね。 どうやって実装するのかがHTML・CSS・JSとサンプル表示でとってもわかりやすい 「CodePen」で公開されているSNSボタンレイアウトを見てみ…

続きを読む
CSS

HTMLとCSSで見やすい連番付きリストを作成！コピペで使えるデザインサンプル
HTMLとCSSで見やすい連番付きリストを作成！コピペで使えるデザインサンプル

  • 2019.07.31

HTMLとCSSを使った連番付きリスト(li)を作成しました。 レスポンシブサイトにも対応しております。 <ol>タグではなくcounter-incrementを使う利点はデザインや表示内容を色々編集できるところです！ 前後に文…

続きを読む
CSS

HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法
HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法

  • 2019.07.21

「Hover.css」を使ってアニメーション 「Hover.css」 リンク、ボタン、ロゴ、SVG、おすすめ画像などに適用される、CSS3のアニメーション付きホバー効果のコレクションです。自分の要素に簡単に適用したり、変更した…

続きを読む
CSS

【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル
【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル

  • 2019.07.14

HTMLとCSSを使ったボックス要素の装飾(囲み枠)を作成しました。 レスポンシブサイトにも対応しております。 配色等自由に変更してカスタマイズしてください！ 基本のHTML コピー <div class="frame_set&quo…

続きを読む
coding

デザインから公開までコーディング不要で簡単5分！しかも無料！日本発のサービス「STUDIO」を試してみた
デザインから公開までコーディング不要で簡単5分！しかも無料！日本発のサービス「STUDIO」を試して…

  • 2019.01.30

すごいサービスが公開されています。 その名も「STUDIO」。 日本発信のこのサービス、なんとデザインから公開まで、コーディングなしで完結しちゃうんです。 ナコさんが5分で作ったサイトがこちら！ サブドメインな…

続きを読む
デザイン

WEBデザイナーがフリーランスになるか迷ったら副業から始めよう
WEBデザイナーがフリーランスになるか迷ったら副業から始めよう

  • 2018.12.18

こんばんわ。WEBデザイナー15年目のナコ(@nako_x)です。 パソコンとネット回線さえあればどこでも仕事が出来るWEBデザインのお仕事。 一度はフリーランスについて考えると思います。 フリーになれば自由に好きな…

続きを読む
デザイン

2019年のWEBサイトはどうなる！？トレンド予想
2019年のWEBサイトはどうなる！？トレンド予想

  • 2018.12.18

こんにちわ！WEBデザイナー歴15年の老舗デザイナーナコ(@nako_x)です。 日々進化して移り変わるWEBサイト。 勉強してついていくのは大変ですが流れが早いので飽きることなく仕事が出来る楽しみもあります。 今回は…

続きを読む
お役立ち情報

【実録】WEBデザイナーが在宅勤務で子育てをしていて一番しんどかった時期と対処法
【実録】WEBデザイナーが在宅勤務で子育てをしていて一番しんどかった時期と対処法

  • 2018.10.09

振り返るとインターンから初めた制作会社でのWEBデザイナー歴15年。 おかん歴は６年なので３分の1は子育てをしながら仕事をしていることになります。 産前は３ヶ月〜1ヶ月前まで、産後は2ヶ月目〜12ヶ月まで在宅で…

続きを読む
WordPress

WordPress(ワードプレス)テーマをデザインする前に…制作をちょっと楽にする方法を紹介
WordPress(ワードプレス)テーマをデザインする前に…制作をちょっと楽にする方法を紹介

  • 2018.08.21

WordPressの無料有料テーマを調べて必要な要素がわかりました。 それを踏まえた上で次はデザインを作成しますが、その前に制作をちょっと楽にする方法を紹介します。 テーマのテーマを決めよう サイトって、何を作…

続きを読む
デザイン

「Adobe XD」でワイヤーフレームから画像書き出しまでのフロー
「Adobe XD」でワイヤーフレームから画像書き出しまでのフロー

  • 2018.07.06

こんにちわ、ナコです。 クライアントさんとのやり取りや社内での機能ミーティングで「Adobe XD」が大活躍したので、実際の案件対応時の流れと合わせてお話します。 Adobe XDは、webサイトや、モバイルアプリなどの…

続きを読む