本日より、ブラウザのアドレスバーにentry.newと入力してアクセスすると、はてなブログの記事編集画面に転送されるようになりました。 ブラウザでネットサーフィンをしていて、ふと日記を書きたくなった時、記事のアイデアを思いついた時などに、素早く記事編集画面にアクセスし、記事を書き始めることができます。どうぞご利用ください。 なお、複数のブログを開設している場合、メインブログに設定しているブログの記事編集画面が表示されます。投稿先をお間違えにならないようにご注意ください。 あわせて利用すると便利な機能 キーボードショートカットで下書き保存 編集画面へのアクセスから、下書き保存までキーボードのみで素早く完結させられます。ブログ記事のアイデア保存に最適です

2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。 ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。 「vendor」ベンダー…各ブラウザの提供者のこと。 「prefix」プレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。 個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。 多くの問題はIE10以前に抱えていたものがほとんどなので、流石にその辺りは切り捨ててよい時代になったということでしょう。 色々と調べてみると現在のブラウザのCSS3対応状況で、今後ベンダープレフィックスを

画面タップで直感的に操作！　Fireタブレットの新機能「デバイスダッシュボード」を使ってみた：山口真弘のスマートスピーカー暮らし（1/2 ページ） 2020年の暮れに、Amazonのメディアタブレット「Fire」シリーズへ家庭内のスマートホームデバイスをタッチで操作できる「デバイスダッシュボード」なる新機能が追加された。 Alexaと連携しているスマートホームデバイスは本来、音声を使って操作するか、もしくはスマホのAlexaアプリから操作するが、前者は声を出せない場合に不便で、後者は階層が深いため呼び出しにくく常用には向かない。 その点、このデバイスダッシュボードを使えば、すばやく目的のデバイスを探し、タップによる操作が可能になる。ざっと使ってみたので、そのポイントを紹介する。 スマートホームデバイスをFireタブから手軽にタッチで操作 デバイスダッシュボードは、Fireタブレットの画面左

配信動画はこちら https://www.youtube.com/watch?v=qerW4vBftNA もし良かったらムーザルちゃんねるのチャンネル登録お願いします！ https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。 ムー https://twitter.com/mu_vpoe zaru https://twitter.com/zaru

日本を代表するクリエイティブディレクター、佐藤可士和（さとう・かしわ）の過去最大規模となる個展が国立新美術館で開催される。 佐藤は1965年東京都生まれ。多摩美術大学グラフィックデザイン科卒業。株式会社博報堂を経て2000年独立し、同年「SAMURAI」を設立。以来、企業から幼稚園や病院、ミュージアム、地域産業まで、多種多様な分野のブランド戦略を手がけ、グローバル社会に新しい視点を提示する仕事は、国内外から高い評価を得てきた。 主な仕事に、国立新美術館、東京都交響楽団のシンボルマークデザイン、ユニクロ、セブン-イレブン、カップヌードルミュージアムのトータルプロデュースなど。近年は武田グローバル本社、日清食品関西工場など大規模な建築プロジェクトにも従事。文化庁・文化交流使（2016年度）として、日本の優れた商品、文化、技術、コンテンツなどを海外に広く発信することにも注力している。 伝えるべき

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

About Blog Article 駆け出しエンジニアの皆様へ はじめに 概要 本記事では、駆け出しエンジニアの皆様に向けて、エンジニアという職種についての説明、初めて収入を得るまでの道筋の提案、エンジニアとしての価値の高め方、独学で技術力を向上するためのロードマップ案等について記述する。 定義 本記事における「エンジニア」というワードは「ソフトウェア開発を業務とする者」という意味で扱う。ソフトウェアエンジニア以外のエンジニアもあるだとか、IEAの認定が必要だとか、そういうことは一旦忘れて読み進めてほしい。多少 web の分野に偏った記事になるが、そこは文脈で判断してほしい。 前記事 1年ほど前に本ブログで web系エンジニアのキャリアチェンジについて という記事を書いた。この記事は、私のキャリアパスの紹介と、web系エンジニアを目指す方への道筋の提案を行ったもので、今も多くの駆け出しエ

Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採

今年6月にはバンダイから「超合金魂」が発売されたが、特に40周年と絡めた動きではなかったようだ（Amazonより） アニメ監督・演出家の富野由悠季（79）の名声は、国内のアニメ関係者の中でも際立っている。「機動戦士ガンダム」の生みの親として広く知られ、2019年には文化庁長官表彰受賞、2020年にはアニメーション・オブ・ザ・イヤーの功労賞部門に選出された。19年6月からは福岡市美術館を皮切りに全国6会場の美術館を巡回する大規模展覧会「富野由悠季の世界」が開催され、話題を呼んでいる。 現在、展覧会は富山県美術館で開催されているが、副題には「ガンダム、イデオン、そして今」とある。ガンダムに並び「伝説巨神イデオン」が、富野アニメの代表作であることを表している。 しかし「イデオン」と「ガンダム」の知名度、人気の差は大きい。実際、今年が「イデオン」誕生40周年だったことを知る人は、そう多くはないだろ

Sho Shimauchi @shiumachi たまたま過去記事を整理してたら、「おべんとうの玉子屋」の社是の話が出てきた。これ何度読み直しても色褪せない素晴らしい内容だな。元記事はこちら toakes.co.jp/pleas/business… pic.twitter.com/kmlzFBDvWp 2020-12-23 19:37:08

オジサンはなんやかやM1チップ搭載のMacBook Airを購入し、日々愛用中である。 og-og.hateblo.jp そんなオジサンだが、まがいなりにもWebデベロッパーの端くれとして、Adobeに対してこう思わざるを得ない。 「DreamweaverとかXDの対応ﾏﾀﾞｧ?」 最近はYoutuberの声がデカいせいか笑、映像系のアプリが他のアプリに先立ってベータ版でボチボチで始めた。 まぁ、M1チップ搭載Macの発売時点でアップル謹製のFinal Cut Proが対応してしまっており、Adobeとしては顧客を持ってかれたくなかったのだろうが。 ちなみにオジサンが愛用しているエディタ「Visial Studio Code」は正式版ではないが、対応版がダウンロードでき、使用可能になっている。 code.visualstudio.com デザイン制作にしてもSketchもネイティブ対応して

よく聞くWEBで使用するカルーセルとスライダーには明確な違いはなく、どちらで検索してもほとんど同じ結果になりますので、あまり気にする必要はなさそうです。 このカルーセル・スライダーには様々なパターンがあります。 jsで実装した方が早く簡単なものがいっぱいありますが、今回はHTMLとCSSのコピペでできるカルーセル・スライダーのデザイン2種についてご紹介します。 自動で横に流れるカルーセル・スライダー 写真が自動で左に流れていくスライダーで、デフォでは3枚セットしています。 意図してクリックとかはさせることはできますが、左右の矢印などないUIなので、トップページで写真をアイキャッチに使うにはいいかもしれません。 HTML <div class="slider"> <div class="slider__content"><img src="https://dubdesign.net/wp-c

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき

個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ

今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over

どんな現象？ 突然ですが、お持ちのChromeブラウザで、次のCodePen内をスクロールして「もっと見る」をクリックしてみて下さい（デスクトップ・モバイルは問いません）。 ぎゃーす！何故か「もっと見る」ボタンの上にコンテンツが割り込んだのでは無いでしょうか？ これだと追加されたコンテンツが見えないから困りますね…。 「スクロールアンカリング」機能とは Chromeでしか再現しないため、諸々調べてみて、どうやらChromeの機能「スクロールアンカリング」によることが分かりました。 Chromeがモバイルでの不快なページジャンプを追放―スクロール・アンカリングを追加 | TechCrunch Japan 「Chrome」で不快なページジャンプを抑止--「スクロールアンカリング」機能が追加 - ZDNet Japan 「スクロールアンカリング」機能とは、例えば広告の割り込みなど、JavaScr