[B! css][web制作] hit-the-light1326のブックマーク

hit-the-light1326 id:hit-the-light1326

cssとweb制作に関するhit-the-light1326のブックマーク (7)

プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
hit-the-light1326 2016/09/05
css

あとで読む

web制作
リンク
HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本
本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。
hit-the-light1326 2016/09/02
Webデザイン

css

web制作
リンク
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。コンテナ display: flexや、wrap指定などをする複数のアイテムを含むアイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。起きる条件 Safari なぜコンテンツの最小サイズを尊重してくれない模様どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-it ems:center はみ出す問題 Chrome IE11 はみ出てますね。起きる条件 IE10-11 f
hit-the-light1326 2016/08/15
なんつーか、この先どこまでcssが先鋭化しても最初からwrap書いちゃったほうがラクなんじゃないの？

css

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

web制作
リンク
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。そこで、これらの問題を解決するために考えられたのが「CSS設計」です。今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。「良いCSS」とは「良いCSS」の定義として、おそら
hit-the-light1326 2016/07/09
css

web制作

web
リンク
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。参考: Internet Explorer サポートポリシー変更の重要なお知らせそんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。テキストや要素を左右の中央寄せに配置テキストや要素を上下の中央寄せに配置テキストや要素を上下左右の中央寄せに配置テキストや要素をビューポートの上下左右の中央寄せ
hit-the-light1326 2016/01/21
css

web制作
リンク
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
今年もCSSの進化がすごいです！次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます（全部をコードにしたらページが重すぎました）。
hit-the-light1326 2015/12/09
css

Web制作
リンク
1