CATEGORY css

cssのアニメーションやホバーアクションなど動きについてやの投稿や、構造を考える投稿のカテゴリー

css イメージがありません

WordPressでcssを追加・修正したけど反映しない!cssが効かない時に確認するコト

こんばんわtaisonです。 最近ウチのウサギが1歳の誕生日を迎えまして、 嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、 全く食べず 笑 食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、 最終的に好物のグラノーラチップスをふりかけてなんとか写真収めに成功したんですけど、単純な正解を出すまでになかなかの時間 […]

css fontkerningアイキャッチ
  • 2017.10.18

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

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

css exclusionimg
  • 2017.10.09

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

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

css sassロゴマーク
  • 2017.09.30

web制作にsass(scss)を使う場合の注意点

こんばんは、taisonです。 先日の記事で、sass(scss)(以下sassといいます。) という言語について触れました。 今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾! 今回は、 sassってそもそもどういう時に使うの?どんな使い方がいいの? エラーが出た時の対処法について記事を書いていきたいとおもいます。 sassを使う際の注意点 自分も勉強がてら、使える案件になるべ […]

css sassロゴマーク

今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!

こんばんは。9月病(あるのか知らんけど)に陥り、頭がフワフワしているtaisonです。 もぉ秋ですねぇ、、、 さて、Twitterで人知れず宣言していたのですが、 10月はcss強化月間! という事で、本日第1弾の開幕でございます。 css強化月間第1弾sassを活用する コーディングを担当する人はよく目にするのではないでしょうか? 知らない人もいると思うので簡単に説明すると、 cssを入れ子にし […]

css はみ出す部分書き消す
  • 2017.05.17

cssのtransformをうまく使って斜め線のレイアウトをしてみる

こんばんわ。最近胃の回復が追いつかなくなってきた30代のtaisonです。 そろそろ食生活を考えねばならぬ歳になってきたようです。 このままでは右肩下がりになってしまうのでそれだけは避けねば、、、 さて、今日は形だけでも右肩上がりに!cssアニメーションでおなじみのtransform :rotateを使って、背景を斜め線に区切るレイアウトに挑戦してみようと思います。 See the Pen ZKM […]

css NO IMAGE
  • 2017.05.13

実務でflexbox、実際使えるの?

手軽に横並び・グリッドレイアウトを構築可能なflexbox。 実装されてしばらく経ちますが、実際案件の中でどのように使用することが出来るのか色々調べてみました。 flexboxの基本形 まず、flexboxを使用するためにdisplay要素を以下のように設定します。 .flex{ display: -webkit-flex; display: flex; } /** インライン要素に付与する場合は […]