タグ

CSSに関するbancyaのブックマーク (20)

  • 紙っぽいかわいいWebサイト作りたい - Qiita

    かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き! 思いついたら追加する 「版ズレ」風 版ズレ = 印刷の際に、色の版がズレて出力されてしまう現象。(アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます) 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする (疑似要素でやりたかったけど乗算上手くいかなかった・・) ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

    紙っぽいかわいいWebサイト作りたい - Qiita
  • HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css

    HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSSの使い方 Almond.CSSの特徴 Almond.CSSは、シンプルなWebサイトの見栄えをより良くするためのclassレスのCSSスタイル集です。CSSのスタイルを正規化してクロスブラウザで同様のエクスペリエンスを提供したり、カスタムスタイルを追加してちょっとしたスパイスを加えることもできます。 HTMLのセマンティックなタグとAlmond CSSを組み合わせるだけで(JavaScriptは不要です)、モダンなWebページが

    HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
  • CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック

    ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか? ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンにテキストを配置する時、上下のスペースを揃える 終わりに はじめに デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。 しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか? そもそ

    CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック
  • CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

    中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

    CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
  • CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ

    画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー

    CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
  • コピペで簡単!ヘッダを実装するシンプルなHTMLとCSSの17種類のテンプレート -headers.css

    新しいプロジェクトですぐに利用できるようシンプルなHTMLCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css headers.css -GitHub テンプレートは、以下に基づいて実装されています。 シンプルな実装 レスポンシブに完全対応 簡単に編集できるようにSassを使用 アクセシブル オープンソースのプロジェクトで、商用でも無料で利用できます。 2020年9月現在、17種類のヘッダがあり、今後さらに増やす予定とのことです。

    コピペで簡単!ヘッダを実装するシンプルなHTMLとCSSの17種類のテンプレート -headers.css
  • シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css

    シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト

    シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
  • 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css

    用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssHTMLの各要素にス

    必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
  • HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

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

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

    スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び? そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏(ひとえ)に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSS歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float(フロート) 要素を左右へ寄せるためのプロパティ。 後続する文章(テキスト)などのインラ

    よこ並びのCSS。
  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

    HTMLCSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
  • Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など

    CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。

    Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
  • HTMLとCSSの関係性についての解説 - Milkのメモ帳

    ブログの仕組み HTML 装飾がしたい(CSSJavaScript) 「はてなブログ」のCSSについて パソコン画面のCSS スマホ画面のCSS おまけ(吹き出し表示について) CSSを書き込む 画像を登録する 実際に使ってみる 最後に Webのフロント周りは、少々複雑で、やろうと思うと色んなことが出来ます。 これは、普通のアプリケーションとは仕組みが異なるからです。(現在のデスクトップ等のアプリケーションの画面開発も、Web系の流れを汲んでそれに同調しようとしています。) 私自身が、Web系の出身ではないので、あまり踏み込んで解説は出来ませんが、だいたいこういう感じだということを解説してみますね。 ブログの仕組み まず、大まかなブログでの画面表示について図式しましょう。 だいたいはこんな感じです。 皆さんのパソコンが、Webサーバと呼ばれる通信を受け付けるコンピュータにアクセスします。

    HTMLとCSSの関係性についての解説 - Milkのメモ帳
  • 【初心者向け】細かいところを調整したい!はてなのデザインカスタマイズのコツ - IT女子、がんばる。

    こんにちは。おはるです。 以前webデザイン初心者向けの記事を書きましたが、そのときはこれから勉強する前提の記事だったので今回はもう少しすぐに使える!な内容を書いてみようかなと思います。 (※以前の記事はこちら) itjoshi.hatenablog.jp さて今回の内容ですが、 デザインテンプレートを入れてみたけど、ここの文字サイズだけ変更したい!コンテンツ幅を調整したい!でもどこを変えたらいいのか分からない… こんな時に使えるかもしれないコツを紹介しようと思います! ※今回ははてなブログでカスタマイズをする前提としています。 基的な考え方 テンプレートで設定しているCSSは外部ファイル化されている 変えたい部分を上書きするイメージ もしも外部ファイル化されていない時は 実際に自分でやってみる! デベロッパーツールで変更したい箇所を探す デベロッパーツールを表示させる CSSを確認 該

    【初心者向け】細かいところを調整したい!はてなのデザインカスタマイズのコツ - IT女子、がんばる。
  • HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

    WEB制作で必ずと言っていいほど登場するものの1つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

    HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
    bancya
    bancya 2016/09/14
    画像なしだとカスタマイズ楽そう。背景ボーダー真似してみたい!
  • 変態的 CSS トリック

    多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。

    変態的 CSS トリック
    bancya
    bancya 2016/08/29
  • Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

    ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

    Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
  • 手軽に実装!Webサイトにアニメーションを加えられるCSS&JavaScriptライブラリー

    2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー

    手軽に実装!Webサイトにアニメーションを加えられるCSS&JavaScriptライブラリー
    bancya
    bancya 2016/07/13
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • Instagram風の写真加工ができるCSSライブラリ「CSSGram」 | ライフハッカー・ジャパン

    CSSGram」はInstagram風の写真加工ができるCSSライブラリです。CSSのクラスを指定するだけで画像が加工されて表示されます。1KB未満と非常に軽量なところも特徴。 以下に使ってみた様子を載せておきます。まずCSSGramへアクセスしましょう。 こちらがサンプルです。同じ画像に対してCSSGramを適用した例です。指定するクラスを変更するだけで画像の見た目が変えられるのは便利ですね。オリジナルの写真に対してCSSを当てるだけでよいのでブログ記事などに使いやすいです。ぜひ写真を加工して見せたいときにどうぞ。 CSSGram (カメきち)

    Instagram風の写真加工ができるCSSライブラリ「CSSGram」 | ライフハッカー・ジャパン
  • 1