[B! design][css] myfirmのブックマーク

myfirm id:myfirm

designとcssに関するmyfirmのブックマーク (7)

59分割ヤバイ｜深津貴之 (fladdict)
こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。グリッドの59分割ヤバイよねぇというお話。画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割
myfirm 2019/03/10
design

css

webデザイン
リンク
「出会えたことに感謝したいCSSベスト3」まとめ
スダ氏 @sudarexyz 出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh; スダ氏 @sudarexyz justify-content: space-between; align-it ems: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3
myfirm 2018/04/09
CSS

design
リンク
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-it ems: center; } デモを別ウインドウで再生するソースコードを確認する Flexboxだと3行対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。すべてのモダンブラウザでベンダープレフィックスなしで動作します。 ▼ CSS .container { display: flex; justify-content: center; align-it ems: center; } ▼ 画像をウインドウの上下中央に配置
myfirm 2018/04/02
CSS

web

design
リンク
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
myfirm 2016/08/27
CSS

Ajax

design
リンク
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら現場で通用する実践的なスキルを身につけましょう。【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。続きはこちら今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。そのため、以下のような悩みを抱える人が多くいます。ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
myfirm 2016/04/30
web

design

CSS
リンク
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。そんなときに便利なのがCSSフレームワークです。CSSフレーム
myfirm 2016/03/02
CSS

design
リンク
https://www.ituore.com/entry/html-css-basic
myfirm 2016/01/07
web

CSS

design
リンク
1