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

注目キーワード

コピペ

1/2ページ
CSS

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

  • 2021.06.09

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

続きを読む
coding

【コピペOK】１分で完成！「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメーションを実装しよう！
【コピペOK】１分で完成！「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメ…

  • 2021.02.02

１分で実装できる「ScrollReveal.js」。「ScrollReveal.js」ライブラリを使ってコピペで簡単に今流行のスクロールアニメーションができるようにまとめました。サンプルもあります。

続きを読む
coding

【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう。
【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう…

  • 2021.02.01

数字をカウントアップするアニメーションはサイト制作で視覚的に数字を表現する時によく使われる手法です。 ■brotherのサイト 企業サイトでも数字で見る○○というページによく使われていますね！ アニメーションがあ…

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

【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使おう！〜
【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使お…

  • 2020.07.27

WordPressはアップデートで大きな変更が入ったり、非推薦になったコードが出てきたりします。あれ？あのタグ使えなくなってる？？って事が多々あるので最新のWordPress(WordPress 5.0系)で私がよく使う関数・コード…

続きを読む
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を入れたり、コーディング時によく…

続きを読む
お役立ち情報

コピペで入れるだけ！Twitterのタイムラインをキレイにする方法
コピペで入れるだけ！Twitterのタイムラインをキレイにする方法

  • 2020.06.29

twitterをしていると自分のタイムラインにいらない情報が沢山流れてきてイライラしませんか？ 「〇〇さんがいいね！しました」 なこ ごっつエロい写真にいいねしてるやん…そんな一面見たくなかった 「○○さんがフォ…

続きを読む
WordPress

【WordPress】たった１行！インストールしたディレクトリ以外の階層でワードプレスのタグを使う方法！
【WordPress】たった１行！インストールしたディレクトリ以外の階層でワードプレスのタグを使う方…

  • 2020.06.15

お知らせやニュースを管理するために WordPressをサイト内の特定ディレクトリに入れて運用してきたけど、 やっぱりTOPにもお知らせ表示したい…。 もっと言ったらTOP以外他の階層にも表示したい… そんなときにたった…

続きを読む
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でアニメーションのタイムラインを指定出来ます。 ここにいろいろ書く…

続きを読む
1 2