CATEGORY web制作

  • 2019.11.10
  • ,

cssの階層を見やすくまとめる:is()疑似クラスを紹介するよ

こんばんわ。たいそん(@ttaison)です。 今日はcss疑似クラスのお話。 代表的な疑似要素に:beforeや:afterなんてものがありますが、今回は:is()という 疑似クラスについて書いてみたいと思います。 :is()疑似クラスとは? そもそも:is()は以前にあった:any :matchesが改名されたクラスになっており、用途は基本的に一緒。 どんな機能をもっているかについては、MDN […]

  • 2019.11.05
  • ,

cssのクラスやid名を決める命名規則の考え方

こんばんわ。たいそん(@ttaison)です。 これまでずっと、一人でweb制作してきたので正直あまり気にならなかったのですが、 チームで仕事をすることも視野に入れると気になってくるのが、コードの書き方。 とくにcssは、記法さえ守ればどんな書き方も出来てしまうので、誰かが書いたコードを他の人が見たらものすごい見にくいコードになっているかもしれません。 それゆえ「いいクラス名を付けよう」と考えるこ […]

フルスクリーン表示のスクロールページをカンタン作成できるjQueryプラグイン「fullPage.js」

こんばんわ。たいそん(@ttaison)です。 さて、今回記事にするのはサイトのとあるデザイン表現について。 これは数年前からある手法なんですが、皆さんちょこちょこ見かけませんか? 画面いっぱいに一つのコンテンツが表示されてスクロールすると画面単位で移動するwebサイト。 フツウに実装しようとするとcssやらなんやら駆使してなかなか手間のかかるデザイン表現ですが、 実はとてもカンタンに実装すること […]

background要素を使って背景画像をカンタンに重ねる方法

こんばんわ。たいそん(@ttaison)です。 だいぶ間の空いた投稿となってしまいました、、、 もはや文章を書くことを忘れてしまっていたかのごとく投稿が止まっていましたが、大丈夫。 生きております。 さて今回の記事ですが、皆さんホームページやブログのデザイン変更において、「カンタンに背景画像を重ねて表示したい」とか「背景を重ねて表示する方法が分からない」と思ったことありませんか? cssの擬似要素 […]

【google analytics】iPhone Android対応版!自分のスマホアクセスを除外する方法

こんばんわ。たいそん(@ttaison)です。 もうブログ始めて一年経過しそうなんですけど、、、 自分のスマホアクセスをGoogleアナリティクスから除外したいなー。と思いました。 正直スマホから閲覧することってそんなになかったのですが(スマホからアプリログインしてのアクセスは管理者除外してあるのでノーカウント)、たまーにサラっと表示確認したい時にやはりスマホを使いたい。 そんなワケで除外できるも […]

  • 2017.11.02
  • ,

店舗や個人で運用しているinstagramの写真をホームページやブログに埋め込む方法

こんばんわ。taisonです。 今日はちょっと趣向を変えて、SNSでおなじみのinstagramについて記事を書いていきます。 何で急にインスタ!?って話なんですが、いちおきっかけがあります。 わたくし最近ちょこちょこ飼ってるウサギの写真をinstagramにUPしてるんですが、 「いろんな人に見てもらいたい時、インスタの写真って自分のブログやホームページどうやって埋め込むんだろう?」と、ふと思っ […]

snapwidgetの登録から使い方まで画像付きでカンタンに説明するよ

こんばんわ。たいそん(@ttaison)です。 皆さん、この記事にたどり着いたということは、さぞ 「SNSの投稿や写真を、自分のブログやホームページで表示したい、、、」「できるだけカンタンに投稿を埋め込みできるサービスが知りたい、、!」 と思っているのではないでしょうか? そんなSNSの写真をカンタンに表示できる最適のツール「snapwidget」の使い方を最初から最後までまるっとお届けいたします […]

css font-kerningを使ってwebで欧文の文字詰めをする

こんばんわ。taisonです。 皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。 シンプルなデザインにどかーん!と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。 (まあ欧文使ったwebサイト作ることって、実際は少ないですけど) けど、大きな文字をwebで扱うのって意外とむずかしいし度胸がいります。 なんせweb上のフォントはDTPと違って […]

Windowsでgulpのバージョンアップを簡単に!nodistを使ったおすすめ管理方法を紹介!

こんばんは。taisonです。 前回記事でPCリフレッシュをしてnode.jsが消えた!っというお話をしました。 Windows8.1にgit for Windowsを導入してgithubに爪痕を残す   gitに続き、node.jsの復旧をしようとしたのですが、せっかくだからバージョン管理を簡単にしたい!と思いつきました。 いつも大変だったんです、、、 制作する案件フォルダごとにnod […]

  • 2017.10.09
  • ,

mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる

こんばんは!taisonです。 ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗 気を取り直して更新していきたいと思います! さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。 photoshopやillustratorでお馴染みのブレンドモードをcssで表現 皆さんphotoshopやillustratorを使ってデザインする時、ブ […]