サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f222e57e0cb617f5924de9e159879efca2a68aa3e%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201704%252F2017111110.png&f=jpg&w=240)
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
Tomasはリトアニアの旅行ライフスタイルに関する起業家およびブロガーです。彼はブログや毎週配信されるニュースレターで、趣味やライフスタイルデザイン、起業精神について執筆をしています。現在、100万人の人々のライフスタイルを良いものにするというミッションの元、世界中を飛び回っています。 Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意す
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 基本的な記述方法は動画でも紹介しています。初めてCSS グリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出すグリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるまではレイアウトを頭の中だけではなく、紙など
オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The SuperSimpleGuide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方Toptalのアイコンの作り方
2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify StyleGuideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る
どうも〜こんにちはぁ！Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
落ち着いたデザインにもあうシックなグラデーション、繊細な幾何学柄を使ったパターン、コピーやロゴを鮮やかに見せる背景など、アイデア満載ときめくようなデザインテクニックを使って作成されたものから定番ものまで、無料の背景素材を紹介します。
2020-07-01 ZOZOTOWNのインハウス広告運用を支援するデータと仕組みの話 BigQuery データ マーケティング 広告本記事では、ZOZOのマーケティング部門の広告運用のインハウス化に伴って、これまで取り組んできた広告データの収集と活用、その仕組みにフォーカスして事例をご紹介します。 ZOZOTOWNのインハウス広告運用を支援するデータと仕組みの話 2020-06-29 【オンラインMeetup イベントレポート】ZOZOテクノロジーズの大規模データ活用 イベントレポートGCP Elasticsearch 検索機械学習 こんにちは、ZOZOテクノロジーズ CTO室の池田（@ikenyal）です。 ZOZOテクノロジーズでは、6/22にZOZOTechnologies Meetup -ZOZOテクノロジーズの大規模データ活用-を開催しました。 zozotech-inc
最近ワンカラムレイアウトをよく見かけませんか？なんで増えているのでしょうか？その理由を僕なりに考察してみました。 1.バイラルメディアで採用されていることが多い。 バイラルメディアは、1カラム化することでシェア数されやすくするということに趣旨を置いたサイトです。サイト閲覧数よりもFacebookやTwitterでのシェア数がKPIとなっています。そのため１セッション当たりの閲覧PV数よりもシェアされやすいワンカラムを採用しているところが多いです。 2.レスポンシブデザインの普及 レスポンシブデザインの普及によりスマホでは１カラム、PCでは２カラム（サイドバーあり）になっているサイトが増えてきました。繰り返し改善していく上でPCとスマホが同じようにワンカラムレイアウトならばサイトの改善がし易いです。 ワンカラムレイアウトのメリット・デメリット。 メリットについて 1カラム構成の最大のメリット
専属のクルーが、航行中の安全を重視し、大切な散骨の儀式が円滑に行われるよう、細心の配慮をもって対応いたします。また、出船直前と完了後はご報告をさせて頂き、無事に終了した証として証明書発行させていただきます。 プラン詳細へ シンプルで格安な海洋散骨プランです 現代の社会的背景において、金銭的事情、宗教的事情、また、後継者の不在など、様々な理由からお墓を購入するという必然性が薄まりつつあります。 そうしたお客様の悩みに合わせ葬送の自由が広がっており、「海洋散骨」という選択肢が今注目を高めています。当社の「委託海洋散骨」は、宗教やしきたりを一切問わずに、海に散骨する儀式を行うことが可能です。 全国的な統計結果によりますと、自分は散骨をしてほしいですか？という質問に対し、「散骨してほしい」「一部を散骨してほしい」と希望する人が4割以上と高い数値を記録しており、世間での肯定的な意見、関心度の高さが伺
マガンダング ハーポン！最近エンジニアに転職したひろゆきです。 詳しくはこの「フィリピンでプログラムと英語が学べる、ギークスキャンプがスゴイ！！」を読んでください。 今回はLIGエンジニアチームが普段情報収集の際に活用しているサイトをまとめてみました。俺のように最近エンジニアデビューした方は必見です！WordPress関連（プラグインの検索、関数の解説など） ■WORDPRESS.ORG 日本語 http://ja.wordpress.org/WordPress公式の日本語サイトです。フォーラム見たり、プラグイン検索に便利です。 ■WORDPRES.ORG英語 http://codex.wordpress.org/WordPressの公式リファレンスサイトです。WordPressの関数だったりフックを探す時に使います。英語ですが、情報量は日本語サイトよりも多いです。 ■WORDPR
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼう
ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。
favico.js v0.3.10 Make use of your favicon with badges, images or videos View onGitHub Tryit: +1 -1 Set icon Play video Start webcam Reset Works onChrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type ofanimation, position, background color andtext color.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
