なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design

2022/10/24 570 users Figma用 Apple プラグイン URL 編集

WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力す... 続きを読む

世の中には困ってる人を助ける制度がたくさんあるのに何が使えるかを教えてくれないっていう理不尽仕様なんだが、そんな世界をなんとかしようとしてる人たちがいて、そのためのWebペー

2022/07/05 2523 users Webベー たくさん 制度 ＡＱＵＡ 世界

Aqua @AquaLamp 世の中には困ってる人を助ける制度がたくさんあるのに何が使えるかを教えてくれないっていう理不尽仕様なんだが、そんな世界をなんとかしようとしてる人たちがいて、そのためのWebページがこの前リリースされたってことを僕はフォロワーさんに知っておいて欲しいと思ったんよ compass.graffer.jp/handboo... 続きを読む

ブラウザレンダリングの仕組み

2021/05/05 1073 users ブラウザレンダリング レンダリング サーバ HTML 解析

以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバか... 続きを読む

Webページがブラウザに表示されるまでに何が起こるのか？

2021/04/14 1008 users ブラウザ

## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) ... 続きを読む

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users UIコンポーネント スニペット ナビゲーション レイアウト

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

森喜朗会長の性差別発言を受けて、自民党女性局・自民党女性国会議員はどう反応したか

2021/02/08 573 users 森喜朗会長 性差別発言 自民党女性局 ご挨拶 本エントリ

個人的に気になったので、自民党女性局のWebページ( https://women.jimin.jp )をのぞいてみた。本エントリで確認したのは2021/02/09未明である。 女性局そのものの反応無し。「女性局ニュース」や「ご挨拶」をチェック。 各議員の反応女性局のWebページには女性局メンバーの一覧と、自民党女性国会議員の一覧があり、詳... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング CSS コリス HTML 実装時

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

2019/10/31 803 users コリス Visu 均整 錯覚 違和感

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu... 続きを読む

知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ | コリス

2017/06/27 729 users デベロッパーツール コリス デバッグ ワークフロー 過言

Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chr... 続きを読む

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users 階層構造 レスポンシブ対応 ハンバーガーメニュー 去年 コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む

JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜

2016/05/19 1501 users サル CSS 一つ一つ HTML 要素

今回はJavaScriptの基本について話をします。 JavaScriptではWebページに様々な動きをつけることができ、これまでHTMLやCSSしか触ってこなかった人が、より多くのことをWeb上でできるようになります。 この記事では、そんなJavaScriptの基本を簡単に入門できるようにまとめました。 一つ一つの要素は簡単だけど、少し量が多いというのが大変なところ。ですが、この記事だけで基本的... 続きを読む

JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく

2016/02/03 694 users パラメータ ライブラリ ウェブ 類似 グラフ

ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「 CanvasJS 」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご... 続きを読む

意外と知られていない、はてブの神機能 - 誰も知らない世界がある。

2015/05/15 1252 users はてブ 神機能 世界 2015-05-15 http

2015-05-15 意外と知られていない、はてブの神機能 はてブの機能を組み合わせるとこんなことが出来る。 まぁまずは見てほしい。 http://bukuma-diver.com/ ブックマークをWeb上に記録したり、Webページにコメントを付けたり出来るサービスは世の中にたくさんある。日本においては、はてなブックマーク、いわゆる「はてブ」が最王手である。 そのため、ややIT系に偏っているものの... 続きを読む

ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX

2015/02/17 508 users RIN Bootstrap memographix CSS

Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix 僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポー... 続きを読む

Togglで時間管理しはじめたら意識がみるみる変わっていった話 - shoma2da's diary

2015/01/17 668 users iPhone Toggl Andoird 計測 意識

はじめに 作業時間の管理・計測をこれまでやったことがなかったのですがTogglというサービスを使い始めてみたら作業時間の見える化だけでなく意識すら変わってきているように感じたのでまとめておきます。 Togglとは 非常にシンプルな作りのタイムトラッキング（時間の計測）サービスです。Webクライアント、Andoird、iPhone、PCクライアントが用意されています。 Webページ Android版... 続きを読む

【JavaScript】200行で作るテトリスのレシピ【HTML5】 - コードレシピ

2015/01/04 541 users テトリス ブラウ 曲者 レシピ コードレシピ

世界的に有名なゲームであるテトリスをJavaScript(HTML5)で作っていきます。 JavaScript + HTML + CSSで作るので、特殊なソフトウェアを必要とせず、このページを見ている環境があれば今すぐにでもテトリスを作ることができます。 少しテトリス特有の移動系処理が曲者ですので頑張りましょう。 準備するもの 今回必要なものは以下のようになります。 Webページを読み取れるブラウ... 続きを読む

.htaccessの書き方 | murashun.jp

2014/12/31 717 users htaccess サーバエラー murashun.jp 観点

.htaccess とは .htaccess とは、Webサーバの動作を制御するための設定ファイルです。 特定のファイルやディレクトリへのアクセス制御や、ページが見つからない場合に表示される404エラーなどのサーバエラーを独自のWebページにリダイレクトすることもできます。 .htaccess を利用しなくともWebページは動作しますが、セキュリティの観点から導入をおすすめします。 Webサーバの... 続きを読む

１年でフリーのWebデザイナーになった僕が実行した8のステップ【独学デザイン勉強法】 - Literally

2014/10/25 1597 users Tips プレゼン Literally スライド デザイン

2014-10-25 １年でフリーのWebデザイナーになった僕が実行した8のステップ【独学デザイン勉強法】 TIPS WEB DESIGN Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだこ... 続きを読む

JavaScript初級者から中級者になろう — uhyohyo.net

2014/07/25 1455 users uhyohyo.net プログラミング言語 中級者 ほか 講座

JavaScript初級者から中級者になろう JavaScript。「ジャヴァスクリプト」と読みます。主にWebページを動きを与えるのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 現在では多くのWebページに使われていますが、とてもレベルが低く不適切なものも多数あります。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、この講座を作りまし... 続きを読む

HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス

2014/07/07 548 users コリス GitHub Edge head content

A Generic HTML5 Template HTML5 Template -GitHub まずは、テンプレートの完成形からご紹介。 HTML5のテンプレート HTML5で作成する時用の必要最小限の構成になっています。 <!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></ti... 続きを読む

Macでも無料でIE確認するためのModern.IEが想像以上に快適だった | Stocker.jp / diary

2013/10/29 791 users Stocker.jp diary VirtualBox 無料

Mac Macでも無料でIE確認するためのModern.IEが想像以上に快適だった Top diary Tuesday, October 29th, 2013 これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して... 続きを読む

プロっぽくなった！フォントや「文字」に関するまとめ | コムテブログ

2013/10/28 716 users フォント コムテブログ 字詰め 文字 行間

先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつけ... 続きを読む

jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (1/2) - ＠IT

2013/08/29 581 users Retina Retinaディスプレイ アップル テクニック

jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (1/2) iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それま... 続きを読む

Googleから学ぶ ヌルヌルサクサクなスライドメニュー #JavaScript #CSS - Qiita [キータ]

2013/06/07 647 users ネイティブアプリ並 アニメーション 実装 キータ ブラウザ

スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装... 続きを読む

デザインする際に使える！10個のweb配色ツール【色の見本】

2013/06/01 562 users 見本 Photoshop 配色 カラ カラースキーム

こんにちは。 デザインにおいて配色の役割は大きく、色1つでWebサイトの印象がガラっとかわることはよくあります。 そこで今日は、配色を決める際に役立つツールを集めてみました。 Color Scheme Designer カラースキームを決められるサービスです。WEBページに落とし込んだ時の、配色のサンプルページなども見れてとても便利です。気に入った配色ができたら、Photoshopのカラーパレット... 続きを読む