Less Absolute Positioning With Modern CSS
Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I found this interesting and I thought about documenting the use-cases that I usually came through while working on front-end projects. In this article, I will explore a few use-cases that using absolute positioning
【HTML・CSS】コピペで簡単！リストデザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE
OL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CSSのみで装飾できる記事です。 ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。 その他の記事まとめは、こちらからどうぞ。 【HTML・CSS】コピペで簡単!記事まとめ Web制作会社のリストデザイン リスト | Maromaroスタイルレシピ | Maromaro Blog Web制作会社ならではの、プロスタイルのリストデザイン。どんなサイトにも合いそうな洗練されたリストデザインが揃っています。 製作会社ということもあり、Webデザインで使えそうなニュース表示やボタンなどのリストデザインも豊富！ 応用しやすいリストデザイン Webサイトの基本要素 見
つい移動したくなっちゃう…⁉おもしろCSSタブがコピペで実装できる！【アニメーション】｜デシノン
CSSで使えるおもしろタブ【アニメーションあり】をまとめてみました！ codepenから引用しています おもしろタブ【アニメーションあり】 コピペで実装 スマホの中にタブ See the Pen Snapchat Tabs Switching by Praveen Bisht (@prvnbist) on CodePen. アンテナタブ See the Pen Features tabs with click css-animation by Danil Goncharenko (@Danil89) on CodePen. プニッとタブが移動 See the Pen Fluid tab bar by Mikael Ainalem (@ainalem) on CodePen. ファイルでタブ！！ See the Pen css tabs by massimo (@_massimo) on C
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法
未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい
CSS設計において特に大切にしている思想をまとめてみた
Zennの投稿は初です。TAK(@tak_dcxi)です。 今回投稿するのは自分なりのCSS設計のメモ。ある程度の規模感のサイトでのCSS設計において、僕がいくつか大切にしている思想の中から特に重要だと思っているものをピックアップしてまとめてみた。 「ある程度の規模感」とは以下のようなイメージ。 テンプレートの数（※サイトのページ総数ではない）が10枚以上 ローンチ後もPDCAが定期的に行われ、その都度サイトの更新や改修が行われるようなWebサイト サイトの更新や改修は自分以外のスキルを定義しないコーダーやエンジニアによって行われる 最後の「スキルを定義しないコーダーやエンジニアによって更新や改修が行われる」というのがポイントで、つまりスキルに大きな幅がある、とりわけ未経験入社の方のようなマークアップの知識が乏しい方が更新する可能性があることを前提としている。場合によっては急遽量産で知識の
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSFX - Beautifully simple click-to-copy CSS effects
jatinrao.dev
What is Tailwind CSS and why you should use it
Responsive Design Strategy
前方, 後方, 部分一致セレクタ - Qiita