gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
バイラルメディアに逆行してオリジナルコンテンツを作りまくった結果まとめ : けんすう日記
各記事の解説 というわけで、各記事の解説をしたいと思います。今度は、ジャンルごとにまとめてみました。 写真系 スマホで写真を撮る系のハウツーは来るんじゃないか、と思い、いろいろ作りました。 まずは、時代は自撮りらしい！と思い、DECOPICさんに聞いたところ、はてブも91とそこそこで、38000PVを超えています。 写真加工アプリ「DECOPIC」の中の人に聞く、最強にかわいい自撮りテクニック 猫をスマホで撮る方法は、108はてブで、3万近いPV。猫は鉄板ですね。 プロ直伝！街で出会う猫をスマホで上手に撮る方法 ただし、子供はうまくいかず。もしかしたら年齢とかを入れるべきだったか。。1970PV。 【プロ直伝】スマホでもキレイに撮れる！子どもを写真に上手に撮る方法 食事ネタ 食事系も、クックパッドとか超ベンリだよね、と思いつつ、個人的にランキングから探すのも面倒になってしまっているので、知
電通と博報堂は丸投げで中抜きしかやらない - はてな村定点観測所
2014-05-05 電通と博報堂は丸投げで中抜きしかやらない 大手メディア系のWEB事業をやっていると電通や博報堂が絡んでくる。 WEBでは「電通や博報堂が裏でテレビなどのメディアを裏で操っていて私達は印象操作されている」的な陰謀論も盛んだ。実際に電通や博報堂と一緒に仕事をしていると、そういう面もあるかな〜と感じる一方で、電通や博報堂の丸投げ体質や中抜き体質を痛感させられる。 誰もが名前を知っているような大手企業のメディアやキャンペーンの仕事は、電通や博報堂がまず一次請けになる。そして二次請けに中小の制作会社がつく。三次請けに孫請けの制作会社やフリーランスがつく。二次請けの制作会社はディレクションや進捗管理を担当する。実際に実務としてCMSやキャンペーンサイトの開発や制作を行うのは三次請け以降の会社の仕事である場合が多い。 では、電通や博報堂は何をしているのか。「丸投げ」と「中抜き」だ。
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
