タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

cssとhtmlに関するtetsu23のブックマーク (7)

  • いざという時に使える13のHTML&CSS Tips集 | BUILD Journal


    いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。CS
    いざという時に使える13のHTML&CSS Tips集 | BUILD Journal

  • HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ

    以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb

    HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ

  • HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

    シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方 Izmirの特徴 画像をホバーすると多彩なアニメーションを適用します。 エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。 オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。 アクセシブル（デスクトップはホバー、スマホはフォーカス）。 2Kbの超軽量ライブラリ。 実装・カスタマイズ用のドキュメント完備

    HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
    tetsu23
    tetsu23 2019/11/11
    IEでは動かないもよう。
    リンク

  • 画像の上におしゃれに文字やボタンをのせる方法（CSS）

    今回はHTMLとCSSで画像の上にオシャレに文字やアイコン、ボタンなどをのせる方法を紹介します。覚えておくととても便利ですよ！

    画像の上におしゃれに文字やボタンをのせる方法（CSS）
    tetsu23
    tetsu23 2019/10/03
    画像の上に文字。
    リンク

  • 【HTML・CSS】画像の上に画像や文字を重ねる方法


    この記事では、﹁画像の上にアイコンや文字、または画像を重ねて表示する方法﹂を紹介します。 まずは、次の画像をご覧ください。 この画像では、右下に﹁いいね﹂ボタンを表示しています。 この表現はCSSの“position: absolute”と”position: relative”を使うことで、実現できます。 アイコンや文字が載せられた画像を用意するのではなく、HTMLとCSSを使って表現することで、次のようなメリットが得られます。 アイコンをクリックできるため、JavaScriptと組み合わせて使用できる アニメーション等の効果を設定できる 画像の上にいいねボタンを表示する 例として、いいねボタンを画像の上に表示する方法を説明したいと思います。 アイコンと画像を表示する まず最初にアイコンと画像を表示します。 アイコンは”Font Awesome”を使って表示します。 HTMLは次のように
    【HTML・CSS】画像の上に画像や文字を重ねる方法
    tetsu23
    tetsu23 2019/10/03
    画像の上にいいねボタン。
    リンク

  • CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld


    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ︵特にIE7・IE8など︶によっては動きや見栄えが説明と異なる場合があ
    CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

  • html/css 参考サイト総まとめ


    作成‥2013/10/15 更新‥2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで﹁知っておくと必ず役立つ﹂ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ1．勉強になるテクニック／サンプルまとめ 基本知識2．セレクタ3．メディア クエリ4．コーディング規約5．フォント6．CSSスプライト7．アニメーション8．正確なHTML使用方法9．CSSハック10．書き方／読み方 定番まとめ
    html/css 参考サイト総まとめ
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.