「説明サイトとリファレンスサイトの両立を目指したい」 「とほほのWWW入門」管理者・杜甫々氏が執筆時に気をつけていること
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語 杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。 Perlの好きなところ、今後サポートしてほしいところ （スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかん
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
無料で15年分！Cloudflareの無料SSL証明書を使ってみる | SERVERSUS
公開日: 2019.11.13 静的コンテンツのビルド・デプロイ。・ホスティングサービスNetlifyが、ビルド時間の制限・課金を新設しました。課金は2019年12月課金サイクルからスタートとのことです。 編集ノート: SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。 CloudflareのSSL証明とはCloudflareは、DNSサービスをメインとしていて、その機能の中にはProxyサービスがあります。 このプロキシサービスを使うことで、非HTTPSサイトでもフロントにCloudflareをかますことでユーザーからのアクセスをSSL通信化することが可能です。 イメージとしては、 ユーザー >> HTTPS >> Cloudflare >> HTTP >> サーバー というような形になっていま
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
広告ブロック拡張機能「uBlock Origin」にユーザーのパスワードが盗まれるCSSインジェクション脆弱性が存在
ウェブサイト上の広告を非表示にするための広告ブロック機能は、悪意ある広告でPCが危険にさらされることを防ぎます。しかし、広告ブロック拡張機能「uBlock Origin」に、広告をブロックする仕組みを悪用し、ユーザーがウェブサイトで入力した情報を盗み出せる脆弱(ぜいじゃく)性が存在していたことが報告されました。 uBlock, I exfiltrate: exploiting ad blockers with CSS | PortSwigger Research https://portswigger.net/research/ublock-i-exfiltrate-exploiting-ad-blockers-with-css ウェブサイトに表示される広告を非表示にする広告ブロック拡張機能はコミュニティが提供する「フィルタリスト」を使ってウェブリソースを受け入れるかブロックするかを決定し
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
タイムラインをテキスト編集だけで簡単に作りHTMLで出力できる「Cascade Timeline Maker」
経歴や年表を一目でわかるように図示したタイムラインを、テキストを編集するだけで簡単に作成できるのが「Cascade Timeline Maker」です。静的なHTMLで出力されるので、出力したタイムラインは自分で自由に使うことができます。 Cascade Timeline Maker https://cascade.page/ Cascade Timeline Makerにアクセスするとこんな感じ。最初からサンプルのタイムラインが表示されています。 左下のテキストボックスに「開始月/開始日/開始年-終了月/開始日/終了年:内容」という形式で入力を行うと、即時にタイムラインが出力されます。月日は抜いてもOKです。 以下の画像は、年だけで指定した場合、年月で指定した場合、年月日で指定した場合、そしてわざと開始年と終了年を入れ替えてエラーになるように指定した場合を表示させたもの。年月指定にすると
現役デザイナーが愛用中！お役立ち最新デザインツール10個まとめ
この記事では、「新しいもの好き」のデザイナーが、日頃のデザイン制作で愛用している最新のお役立ちツール１０個をご紹介します。 ウェブデザインからグラフィック、プロダクトデザインまで、あらゆるプロジェクトを円滑に進める便利ツールが揃います。 現役デザイナーが愛用中の最新デザインツールまとめ Blobs Blobsは、自然でオーガニックな見た目の、泡のようなデザイン要素を手軽に作成できるツール。写真を利用することで奥行き感を演出できたり、Webサイトでの利用にも便利です。 このツールを使えば、形状の複雑さを調整でき、ボタンひとつでランダムなシェイプを描きます。作成したデザインはSVGファイルで保存、ダウンロードでき、PhotoshopやIllustratorはもちろん、FigmaやSketchでも利用可能。 スマホアプリ開発向けにFlutterコードを生成してくれるのもポイントです。 Pitch
Webページがブラウザに表示されるまでに何が起こるのか？
## # 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年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ
この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We
PaperTester·SIer感涙。テスト画面のスクリーンショットをExcelに貼付 MOONGIFT
SIerなどで良く聞かれる話で、テストを行う際には1画面ずつスクリーンショットを撮ることが要求されます。中小企業のシステム開発会社からすると信じがたいのですが、テストを行ったという確認にもなるのであながり無意味ではないのかも知れません（それをダブルチェックしているかは不明ですが）。 そんなSIerの方にぜひ使っていただきたいのがPaperTester、IE×Excel連携のテストツールになります。 PaperTesterの使い方 こちらはテスト仕様書です。動作コマンドとかあるのでかなりプログラム的ではあるのですが。 実行中。ブラウザが立ち上がって文字が入力されます。 そして結果のExcel。スクリーンショットが貼付けられていて作業内容が分かるようになっています！ これはSIerに限ったものではなく、スクリーンショットがあることでエラー部分が分かったり、Excelベースなのでテスト仕様書が書
フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」: 人物・表情アイコンアーカイブ
2018年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Identifont-形状別フォント識別名称別フォント検索
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
