タグ

cssに関するgonaiのブックマーク (10)

  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web 2024Web 調 1. HTML  Lazy loading <img>loading="lazy"
    令和のHTML / CSS / JavaScriptの書き方50選
  • たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス


    iframe使Fluidity使 使 Step 1:  head <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML HTML  <img src="image.png">  class <div class="overflow-container"> <table> <!-- table contents --> </table> </div>  <iframe src="https://www.google.com/maps/embed?" width="100%" height="450" framebor
    gonai
    gonai 2014/03/26
  • フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜

    Developers Summit 2014:【13-D-3】 https://gist.github.com/t32k/8934355

    フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
    gonai
    gonai 2014/02/14
  • HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

    HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う! 🐰 [S

    HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
    gonai
    gonai 2014/01/26
  • 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)

    実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア

    現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
  • re-dzine.net situs togel online toto 2023 -

    By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

    re-dzine.net situs togel online toto 2023 -
  • Pure.css

    CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu

    gonai
    gonai 2013/06/03
  • CSSでfloatを解除する方法のまとめ


    CSSfloat float CSS  after  float調1float float0 CSSHTML <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
    CSSでfloatを解除する方法のまとめ
    gonai
    gonai 2013/03/28
  • CSS(スタイルシート)の基本、小技、テクニック総まとめ

    CSSの基や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集|Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番

    CSS(スタイルシート)の基本、小技、テクニック総まとめ
    gonai
    gonai 2013/03/25
  • 地味に使えるCSS小技のメモ&サンプル集

    cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef

    地味に使えるCSS小技のメモ&サンプル集
    gonai
    gonai 2011/08/30
  • 1