同級生にプロ生のことを聞かれた話 - 駄文置き場ですから
この記事は「プロ生ちゃん Advent Calendar 2016」19日目の記事です。 なんてことないただの日記です。 www.adventar.org 自分の周りの知り合いにはプロ生ちゃんみたいなキャラ物が好きな人がいないだろうし自分から話したりはしていないのですが、先日学生時代の同級生と飲みに行ったときに「プロ生って何？」的なことを聞かれました。 半年くらい前にも同じようなことがありました。 プロ生勉強会やマスコットアプリ文化祭を通してプロ生コミュニティに参加していますが、自分のTwitterを通して多少なりとも気になってる方もいるみたいですね。ありがたいことです。 この勢いで勉強会にも参加してくれるともっとありがたいですね。 そんな感じで技術的な話が全くありませんが今回は以上です。 そろそろ技術的なこともしていきたいです。こんなこと前にも言った気がします。
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
【2021年決定版】CSSのfont-familyオススメ設定
UX MILKUX MILKデザイナーさんがよく見るサイトの一つUX MILKです。 非常にシンプルかつ読みやすいメディアサイトで私もよく見させてもらっています。 こちらのサイトのfont-familyは下記です。 font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;メインのフォントは「ヒラギノ角ゴ Pro」と次の優先フォントは「游ゴシック」なっております。「ヒラギノ角ゴ Pro」といえばメジャーなフォントなのでよく目にしますよね。 ただmacOS Catalinaでは「ヒラギノ角ゴ Pro」がシステムフォントから外れてしまい、Macユーザーはきれいに表示されないなんてことも、しばしば
CSSOMとパフォーマンス - Qiita
はじめに Webのパフォーマンスチューニングについて調べていたりすると、ちょくちょく見かけるCSSOMという言葉。DOMのCSSバージョンなんだろうなぁと何となく理解したつもりになっていましたが、ふと気になって改めて調べなおしてみました。この記事ではCSSOMについての説明、そして、それに関連するパフォーマンスについてまとめてみます。 CSSOMとは CSSOMは、CSS Object Modelを意味する略語であり、ブラウザでロードされたCSSのツリー構造を保持する仕組みです。例えば、bodyにはこのスタイル、bodyの下にあるdivには別のスタイル、というようなイメージですね。ブラウザは、このCSSのツリー構造をDOMに対して適用することで、上位のスタイルからより具体的な下位のスタイルへと連鎖的にスタイルを決定していきます。このようにして処理されたものはレンダリングツリーと呼ばれ、これ
レスポンシブWebデザインとは？メリットとデメリット、作り方まで紹介！
レスポンシブWebデザインとは、どんな大きさの画面でも見やすく、使いやすいWebサイトにするために必要なものです。 1つのHTML（Webサイトに載せる情報）で配信し、CSS（情報の大きさや位置など表示の指定）はデバイスごとに用意して表示を変えさせます。 内容は全て同じですが見せ方が違うということです。 レスポンシブWebデザインのメリットとデメリット では、レスポンシブWebデザインにはどんなメリットとデメリットがあるのでしょうか。 管理が楽 HTMLが１つなのでWebサイトに載せる情報を修正や更新する時に作業が1回で済みます。 デバイスごとにHTMLがあると修正や更新の作業をHTMLの数だけしなくてはなりません。 シェアされやすい URLが1つなのでWebサイトを見るユーザーにシェアされやすくなります。 スマホ用のモバイルサイトとパソコン用のPCサイトがあった場合、見せたいユーザーのデ
【2018年5月版】はてなブログでFont Awesome5を使う - MogHouse
案の定早々に飽きてすっかりほったらかしになってるはてなブログ。 久々に覗いてみたらなんだかアクセスが増えてる。 どうやらFont Awesomeを使いたい人が昔書いた記事を見に来ているらしい。 ただ、2年前の記事なのでFont Awesomeがバージョンアップした関係上、記事の通りにやっても上手く動かないようだ。 せっかくなので最新のFont Awesome5の導入方法を調べてみた。 前回の記事を読んでFont Awesome4を入れた人向けにFont Awesome5へのアップデート方法を記事の最後に書いたので必要な方はどうぞ。 前回の記事はこちら moghouse.hatenablog.com Font Awesomeって何だっけ？ 様々な用途で便利に使えるWebアイコンフォント。 フォントなのでサイズや色の変更をCSSで好きなように出来て便利。 2年前は600種類程だったが、今は10
【2018年版】はてなブログで簡単オシャレカスタマイズ、初心者におススメのデザインテンプレートを紹介 - ネオアコライフログ
こんにちわ ネオアコです。 最近ブログのデザインカスタマイズにハマっていて、当ブログも一通りのカスタマイズをやり終えました(*´-`) はてなブログにはwordpress等と同じ様にデザインテンプレートというものが存在し、インストールするだけで簡単にブログデザインを変更できます。 中にはレスポンシブ対応のデザインや最近流行りのカード型など、オシャレなテンプレートが沢山あります。 (レスポンシブ対応→PCとスマホでデザインを自動的に画面に合わせて表示してくれる) その中から今回はブログ初心者から中級者の方に向けて、オススメのはてなブログテンプレートをまとめてみました。 全て無料でインストール可能です。 【初心者向け】オススメテンプレート minimalism brooklyn SOHO Material 【中級者向け】オススメテンプレート zeno-teal Codomisu flat DU
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
デザインするのを忘れがちなデザイン要素のまとめ
ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。 50 Things You (Probably) Forgot To Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ログイン・サインアップ関連のデザイン要素 ファースト エクスペリエンスのデザイン要素 小さいけれど大切なデザイン要素 割と目立つデザイン要素 プロフィールスタッフのデザイン要素 ユーザーのさまざまな
最近のWebサイトで見かける、パンくずリストのデザイン・配置・機能のまとめ | コリス
Webサイトのパンくずリストとは、ユーザーにサイトの階層を伝え、そのページがどこにあるのかを正確に理解できるようユーザーエクスペリエンスを強化します。また、Googleのbreadcrumb schemaにより、その重要性は高まっています。 最近のWebサイトで採用されている、デザインも機能も素晴らしいパンくずリストの実装例を紹介します。 11 Ways Breadcrumbs Bolster UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ※サンプルに日本語版がある場合は、日本語サイトに変更しました。 wayfair wayfairのWebサイトはUX全体が素晴らしく、非常に適切なページです。パンくずリストのデザインは大きすぎず、小さすぎず、控えめに存在しているのが好ましい理由です。 パンくずリストはプロダ
npmjs.com で著名ソフトウェアによく似た名前のマルウェアが大量に発見された - Islands in the byte stream
Malicious packages in npm. Here’s what to do | Ivan Akulov’s blog People found malicious packages in npm that work like real ones, are named similarly real ones, but collect and send your process environment to a third-party server when you install them 訳: 悪意のあるパッケージがnpmで発見された。それらは、実際のパッケージによく似た名前で同じように動くが、パッケージのインストール時にプロセスの環境変数を外部のサーバに送信する。 発見されたパッケージの一覧は元エントリをどうぞ。このようなマルウェアである偽パッケージの一例をあげると、 ba
RHEL7/CentOS7でsyslogを全て出力するにはどうするか - 出張おはき゛ろく
RHEL7/CentOS7 では、御存知の通りsystemdが導入されています。この影響でログ関連も大きく構成が変わっています。まぁまずマニュアルの18章を読みましょうね。 第18章 ログファイルの表示と管理 とりあえず、標準構成ではだいたい以下のフローで動くと思っていれば特に問題ないと思います。 全ての Syslog メッセージはまず journald にキャッチされ、構造化された Journal データとして保持される。 rsyslogd は、imjournal モジュールを利用して journald から必要なログを取得し、/var/log/messages や /var/log/maillog などに出力して永続化する。 ただ、標準設定のままだと困ったことがあって、上記の1と2の両方でログの流量制限が施されています。システムの保護という点ではよいのですが、デフォルトは結構キツめの制
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
グラフィックデザインに強い！高品質な無料PSDファイル47個まとめ
グラフィックデザインやWebデザイン制作に役立つ、無料ダウンロードできるPhotoshop用最新PSDファイルを幅広くまとめています。 時間に追われがちなデザイナーのひとにこそ使って欲しい、便利な時短アイテムを利用してみてはいかがでしょう。 文字テキストを編集すれば印刷もできる名刺や履歴書、ロゴ、ポスター、イベントフライヤーなどのテンプレート素材の他にも、完成したアートワークや作品をより魅力的にするモックアップ、写真加工用アイテムやカスタム自在のテキストエフェクト、パターン、グラデーションなど幅広いデザインが揃います。 作業ペースが上がる！ブックマークしておきたい無料UIデザイン素材40個まとめ 文字フォントが一瞬で美しく！手の込んだPhotoshopテキストエフェクト素材30個まとめ グラフィックデザインに強い！高品質な無料PSD素材まとめ Free 3D Gold Text Effec
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて
![[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34869b288b480daff8b08b01332b82fbf33502fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017070301.png)
レビューブログに使ってほしい はてなブログカスタマイズ その1：良い点・悪い点のリスト - FOXISM
私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。 まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。 はじめに まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って本当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。 レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーテスト終了後、Webサイトのアクセシビリティ改善はどう進める？ 優先度付けの手順を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
マテリアル – 日本語（Material Design Google）
