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

注目キーワード

CSS

1/2ページ
CSS

【コピペOK】レスポンシブサイトを印刷するとレイアウトがタブレットサイズになってしまう問題の解決法！
【コピペOK】レスポンシブサイトを印刷するとレイアウトがタブレットサイズになってしまう問題の解決法！

  • 2021.06.09

例えば集まりでの資料として、海外のホテル予約情報の予備、メモを追加したいからプリントアウト… そんなとき、レスポンシブでサイトを作っていると悲惨なことになっていますが、少しのCSS簡単に解決する方法を紹…

続きを読む
CSS

【たった１行！】WEBフォントがWindows端末でシャギー(ギザギザ・ジャギ)ってまう問題を解決する
【たった１行！】WEBフォントがWindows端末でシャギー(ギザギザ・ジャギ)ってまう問題を解決す…

  • 2021.05.27

１行でWEBフォントがWindows端末でシャギー(ギザギザ・ジャギる)にってしまう問題を解決する方法を紹介します。

続きを読む
coding CSS

compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに対処法
compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに…

  • 2021.05.25

さてさて、今日もコーディングがんばりますか！ とタスクランナーを動かすと見慣れぬエラーが…。どうやらcompasのベース部分の書き方で怒られているみたい。 ううむ、他案件でアップデートしたからかな、古い案件…

続きを読む
coding

CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法
CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法

  • 2020.08.06

CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました！ 複数ページにも対応しています。 今回の困った問題点 SVGをアニメーションする時に各パーツにクラスを作成しアニメーションさせ…

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

続きを読む
coding

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル
【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

  • 2020.06.12

会話形式の吹き出しデザインのバリエーションを増やしたい！ 無機質なんは嫌や…カラフルにたのしくするんや。 考え中の吹き出しがほしい！ そんな訳で色も形も自分好みにして楽しい会話を演出する為のベースを作成…

続きを読む
HTML

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

  • 2019.09.30

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

続きを読む
HTML

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

  • 2019.08.01

こんにちわ！ナコです。 サイトを訪れると要素が動いたり、楽しいエフェクトが発動したり、 そんなインタラクティブなサイト、憧れませんか？ 今回はCODEPENで公開されているソースコードを使って楽しくアニメーシ…

続きを読む
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

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル
こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

  • 2019.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。 ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい！！！ そんな思…

続きを読む
coding

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  • 2019.06.27

話題になっているネタを厳選して並べたい 自分のツイートで特定のタイムラインだけ抜粋したい・・・ twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは１件しか引用できないので自由自在…

続きを読む
coding

HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタ…

  • 2019.06.21

会話方式で記事の導入を書きたい！！ 他のブログさんで会話方式やってらっしゃるのを見て、 「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。 自分視点が多くなるブログで、 他人のツッコミ風に使…

続きを読む
CSS

【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル
【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル

  • 2019.04.17

CSSだけで要素が回転するアニメーションを作成してみましょう！ コピペするだけで動く縦・横・全体の回転方法を紹介します。 CSSでは@keyframesでアニメーションのタイムラインを指定出来ます。 ここにいろいろ書く…

続きを読む
WordPress

【レスポンシブ対応】おしゃれなページャーをCSSだけで作る！コピペ出来るデザインサンプル
【レスポンシブ対応】おしゃれなページャーをCSSだけで作る！コピペ出来るデザインサンプル

  • 2019.01.23

ブログにページャーは必須です。 WordPressのデフォルトページャーは要素が多いのでシンプルにしたい… レスポンシブで不要な要素は非表示にしたい… 前回WordPress(ワードプレス)カスタマイズ！プラグイン無しでペー…

続きを読む
1 2