Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
WEB DESIGN - hasegawahiroshi.jp
SITE DESIGN / GRAPHIC DESIGN / CODING - HTML, CSS, JavaScript / WordPress DESIGN / EC, SHOP SITE DESIGN / DOMAIN, SERVER SETTING / MAINTENANCE / CONSULTING ウェブデザイン 承ります HASEGAWAHIROSHI.JP フリーランスのウェブデザイナーです。 グラフィックデザイン、UIデザインを軸にサイト設計からコーディングまで対応しています。何よりお客様がお持ちの大切な価値をユーザーにわかりやすく伝えることを第一に考えています。 原則サイトはスマートフォンなどモバイル端末に対応するレスポンシブウェブデザインにて設計します。お客様と共に検討したデザインをHTMLとCSSにて忠実に再現し、SEOを踏まえた正しい文法でコーディングします。また
スマホ・タブレットへの対応
モバイル対応時に必要な判断 現在スマートフォンやタブレット（以下、モバイル）のアクセス数は多くなっていますのでサポート対象から外すことはありません。そのためPCとモバイルの両方のサイトを制作することになります。 ただし２サイト分の工数・コストをかける訳にはいきませんので、下記のような判断が必要です。 PCサイトが必要かどうか サイトの目的によってはモバイルでの閲覧しか想定できない場合があります。逆にモバイルサイトが必要ないという選択肢は現状はほぼないと思います。 PCとモバイルのどちらを優先するか 制作上どちらかに重きを置くことで、工数を適切に配分できます。 「２」については、一方がないがしろになる訳ではなく、どちらをベースにするかというものです。経験的にはPC向けでデザインし、それを元にモバイルに落とし込むという流れが多いと思います。これは見るサイトか、使うサイトかで変わってきます。 「
賢い発注はウェブサイト制作フローの正しい理解から――よくある4つの悩み事 | Web担当者Forum
賢い発注はウェブサイト制作の正しい理解から こんなクライアントは嫌だ！ 制作サイドのホンネから知る“成功する制作の進め方” ユーザーを引き付ける魅力ある企業サイト、思わずため息がでるキャンペーンサイトなど、ウェブでは多くの成功事例を見ることができる。しかし、外から見ると美しく見えるプロジェクトも、紆余曲折を経て達成されることがほとんどだ。スムーズに進む案件の方が少ないといってもいい。なぜこうもスムーズに進まないのか？ ネットビジネスの基本であるウェブサイトの制作は、どのように進むのか、うまく進めるためにはどうしたらよいのかを、成功例と失敗例から理解していこう。 よくある4つの悩み事――制作現場には困った問題が山積みウェブサイトはメディアとしてかなり一般的になり、制作現場のコミュニケーションはスムーズになってきた感がある。しかし、それでも日々さまざまな問題に直面することが多い。ここではまず、
PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://soufflecode.net/website/