デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
SSLやAMPより重要なMFI対応。あなたのサイトは問題ゼロのRWDですか？ - after work Labo
この記事はURLを変えたので新URLにリダイレクト（自動転送）されます。 もしリダイレクトされない場合は下のブログカードをクリック下さい。 www.heavy-peat.com
【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 - Qiita
Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE
JSONやCSVでダミーデータを作成出来る・「dummi」
dummiはJSONやCSVのダミーデータを作成、ダウンロードできるWebサービスです。データは人物や本、動画や記事が用意されており、人物には性別やメールアドレス、年齢等、本ならタイトルや著者、値段などの値が用意されており、自動でダミーデータを挿入してくれます。アイテム数は500が上限となります。 手順としては OF ROWSで数を設定、VALUE POOLで対象を選択、VALUE TYPEで値を選択してADD VALUEで値を増やしていきます。ダミーデータは設定に応じて自動生成されますので設定が終わったらダウンロードするだけ。ニーズがあれば、今後MySQLデータ等やアカウント登録制にして保存できるようにしていくとの事。詳細は以下よりどうぞ。 dummi
コンポーネント時代の CSS 設計
勢いだけで作った 参考文献： やはりお前らのMVCは間違っている http://www.slideshare.net/MugeSo/mvc-14469802
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ
Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ：新人Webデザイナー／開発者も知っておきたい Web制作に長年携わる筆者が数あるテキストエディターの中から代表的な4つをピックアップ。機能別に違いをまとめてみたので、エディター選びの参考にしてほしい。 皆さんは普段、Web制作にどのエディター（テキストエディター）を使っているだろうか？ この記事を読んでいる方の中には、Webデザイナー／開発者になったばかりで常用しているエディターが決まっておらず、どれがいいのか探している方もいるかもしれない。また、今使っているエディターに不満があり、乗り換えを検討している方もいるかもしれない。 最近は、さまざまなエディターが登場しており好みに合わせて利用できるが、それぞれの特徴を把握し、自分に最適なものを選ぶためには、ある程度使ってみなければ分からない。
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ
4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい
Web制作者が知っておきたいアクセシビリティ最新動向
2015年2月3日、神戸市産業振興センターで開催されたイベント「アクセシビリティの祭典」での講演資料です。Read less
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
とあるサイトの高速化についてフロントエンドでやったことまとめ。 - Toro_Unit
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
Web制作の仕事をするようになってからお世話になっているサイト＆気になっているサイト｜今村だけがよくわかるブログ
Web制作を仕事にしようと決めて、勉強を始めたのが今から約8年ほど前だったと思います。その当時から現在まで、大変お世話になっていたり、気になっているWebサイトが多くあります。 今回は、その1部をご紹介します。（サイト名は順不同、敬称略です） buzzword(バズワード) http://www.buzzword.jp/ Web業界に入りたての方がつまずきやすい技術に焦点を当て、解説されている記事が多いです。 例題を交えながら平易な文章で解説されていて、とても親切。ずーっとお世話になっているサイトの1つです。 Attrip http://attrip.jp/ 仕事の休憩時間によく見るサイト。笑うつもりがなくても思わず吹いてしまうネタ記事が多くて、なごみ要素がとても強いです。 という面もあれば、国内外のWebサービスをすぐに試したり、ネット上で話題になっているものをいち早く見つけて記事にした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ&ドロップでWebページを作成できるスクリプト・「VvvebJs」 | かちびと.net
org-rabo.com
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
初心者のためのWeb標準技術
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
Loading...