CSS - 株式会社オンズ

タグ "CSS" を含む投稿を表示中：80件

【CSS】テキストを透明にする4つの方法

Entry Description

2021年10月9日 2021年10月9日

開発ブログ

CSS

839文字：約2分

onze 株式会社オンズ

文字の色を透明にして見えなくする方法を4つ紹介します。 opacityを使ういちばん簡単で、最初に思いつくのは「opacity:0;」を指定する方法です。 .sample { opacity:0; } opacityの値は0〜1の間で指定し、「0」が完全に透明、「1」が完全に不透明な状態になります。 transpar... 【CSS】テキストを透明にする4つの方法続きを読む →
初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします

Entry Description

2021年9月20日 2021年9月20日

開発ブログ

book, CSS, JavaScript, jQuery, wisdom

1620文字：約3分

issei 株式会社オンズ

「ウェブサイトのアニメーションの基礎を網羅している書籍がほしい」そんな想いを抱く初心者ウェブクリエイターの方々に超絶オススメの書籍があります。『動くWebデザインアイディア帳』です。久保田涼子さんと杉山彰啓さんによる共著。とある場所で献本いただいたものを拝読したのですが、アニメーションの基礎と実践を、とても分か... 初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします続きを読む →
【CSS】「::before」と「::after」疑似要素にCSSが効かないときの対処方法

Entry Description

2021年9月18日 2021年9月18日

開発ブログ

CSS

1511文字：約3分

issei 株式会社オンズ

CSSの「::before疑似要素」、「::after擬似要素」は様々な場面で使える便利な機能です。しかしながら、スタイルシートを記述している途中で「疑似要素が思ったように反映されない！」という状況にもしばしば遭遇すると思います。今日はそんなときに確認するべきチェックポイントを紹介します。 contentプロパティ... 【CSS】「::before」と「::after」疑似要素にCSSが効かないときの対処方法続きを読む →
【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。

Entry Description

2018年2月3日 2018年2月3日

開発ブログ

CSS, jQuery

420文字：約1分

onze 株式会社オンズ

先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです... 【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。続きを読む →
【CSS】重なり順（z-index）の値が下の要素をクリックする方法

Entry Description

2018年1月30日 2018年1月30日

開発ブログ

CSS

604文字：約2分

onze 株式会社オンズ

ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックさせたいボタンなどの要素が背面になってしまうケースがあります。このままだとボタンがクリックできずに困るので、なんとかして前面の要素を無視して背面にあるボタンをクリックできるようにしたい。この問題、「Ja... 【CSS】重なり順（z-index）の値が下の要素をクリックする方法続きを読む →
【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法

Entry Description

2018年1月13日 2018年1月13日

開発ブログ

CSS

1226文字：約3分

onze 株式会社オンズ

スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https://on-ze.com/demo/css3-background-stripe... 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法続きを読む →
お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装

Entry Description

2018年1月6日 2018年1月6日

開発ブログ

CSS

2449文字：約5分

onze 株式会社オンズ

いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の１つになっています。今日ご紹介する［Instagram.css］は、ウェブサイトで使用している画像にインスタグラムと同じようなフィルターを施せる便利なCSSのライブラリー。お手軽にインスタグラ... お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装続きを読む →
【CSS】ボックス要素をCSSだけでクリッピングできるのか？

Entry Description

2017年12月25日 2017年12月25日

開発ブログ

CSS

852文字：約2分

onze 株式会社オンズ

Ｑ質問：ボックス要素をCSSだけでクリッピングできるのか？Ａ回答：できます！ ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング（切り抜き表示）する方法を紹介します。使用するのは「clip-path」プロパティ。実はCSS2でも使えましたが、最新のCSS3ではかなり便利な使い方ができるよう... 【CSS】ボックス要素をCSSだけでクリッピングできるのか？続きを読む →
【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。

Entry Description

2017年12月23日 2017年12月23日

開発ブログ

CSS

747文字：約2分

onze 株式会社オンズ

さてさて。タイトルのとおり、そのまんまです。まずはデモをご覧ください。 DEMO : https://on-ze.com/demo/css-bg-transparent/ 背景全面を覆うと目がチカチカしてしまいますが、特定の職業の方には透明に見えるはずです。実装方法は以下のとおり。 .bg-transparent ... 【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。続きを読む →
【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。

Entry Description

2017年12月16日 2017年12月16日

開発ブログ

CSS, jQuery

3150文字：約6分

onze 株式会社オンズ

ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … ゆっくり始まる ease-out … ゆっくり終わる ease-in-out... 【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。続きを読む →
【CSS】レスポンシブに対応して要素の比率を保持する方法

Entry Description

2017年12月14日 2017年12月14日

開発ブログ

CSS

557文字：約1分

onze 株式会社オンズ

任意のボックス要素の縦横のアスペクト比率を保持したまま、レスポンシブにも対応する方法を紹介します。 HTML 早速ですが、まずはHTMLの記述から。 <div class="aspect"></div> 何の変哲もない普通のボックス要素を用意します。 CSS 続いて重要なCSSの書き方ですが、仮... 【CSS】レスポンシブに対応して要素の比率を保持する方法続きを読む →
【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法

Entry Description

2017年12月10日 2017年12月10日

開発ブログ

CSS

786文字：約2分

onze 株式会社オンズ

CSSの「keyframes」のアニメーションを一時停止する方法を紹介します。ここで利用するのは「animation-play-state」プロパティ。指定できる値は running と paused の2つで、running のほうは初期値なので省略が可能。 running を指定するとアニメーションが実行され、... 【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法続きを読む →
【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装

Entry Description

2017年12月9日 2017年12月9日

開発ブログ

CSS

1235文字：約3分

onze 株式会社オンズ

テーブル要素の任意の行にマウスカーソルを合わせたとき、他の行がボカされて、フォーカスした部分が目立つように切り替わるCSSのテクニックを紹介します。サンプルは下記のURLより。 SAMPLE : https://on-ze.com/demo/css-table-blur/ HTML まずはhtmlの記述ですが、こちら... 【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装続きを読む →
【CSS】placeholderの色を変更する方法

Entry Description

2017年12月8日 2017年12月8日

開発ブログ

CSS

705文字：約2分

onze 株式会社オンズ

inputタグやtextareaタグで使う「placeholder」属性にCSSを効かせる方法を紹介します。テストHTMLは以下。 <input class="sample" type="text" placeholder="サンプルテキスト"> 試しに、この要素の placeholder 属性の色を変え... 【CSS】placeholderの色を変更する方法続きを読む →
【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！

Entry Description

2017年12月4日 2017年12月4日

開発ブログ

CSS

1748文字：約3分

onze 株式会社オンズ

画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。まずはサンプルをご覧ください。サンプル：https://on-ze.com/demo/css3-loading/ クルクル回るローディングのアニメーションは、多くの場合GIF画像を使って実装しますが、上のリンク先で紹介している... 【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！続きを読む →
【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法

Entry Description

2017年12月3日 2017年12月3日

開発ブログ

CSS

297文字：約1分

onze 株式会社オンズ

CSSの擬似要素「::before」と「::after」のcontent内で改行させる方法を紹介します。ポイントは疑似要素にwhite-space:pre;を追加すること。そしてcontent内の改行させたい箇所に\Aを挿入します。具体的には次のようなコードになります。 HTML <div class="s... 【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法続きを読む →

ONZE/BLOGオンズ開発ブログ

株式会社オンズのブログです