ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど、実用的なテクニックが満載です。 CSS Viewport Units by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートを基準にした単位 vw: ビューポートの幅 vh: ビューポートの高さ vmin: ビューポートの幅または高さの最小値 v
Did You Know the Ordered List Element Has Start and Reversed Attributes? | CSS-Tricks
And the start attribute can be added to begin the list at a number other than one, like this: <ol start="2"> <li>Apple</li> <li>Banana</li> <li>Pear</li> </ol> I’m not sure how I never knew about these properties! I guess I can see how they might come in handy in the future. There are plenty of times when we need to break up ordered lists here on CSS-Tricks with things like code blocks and having
コーディングを助けるためにデザイナーができること①｜ベイジの図書館
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
「敬語をちょっと直すだけでほぼ完璧な翻訳」Google翻訳以上？DeepL翻訳がスゴいという話
KG @dwdaai DeepL翻訳ガチでやばい こら時代が変わるわ グーグル翻訳でもなんとか意味は取れるがDeepL翻訳は敬語をちょっと直すだけでほぼ完璧な翻訳 twitter.com/jaguring1/stat… 2020-03-20 19:31:09 小猫遊りょう（たかにゃし・りょう） @jaguring1 試しに、いま僕が読み返している、グーグルのAI開発を率いている大天才Jeff Deanの論文（2019年11月13日）の概要を、DeepL翻訳（1枚目）とグーグル翻訳（2枚目）に入れてみた。 Jeff Deanの論文 arxiv.org/abs/1911.05289 DeepL翻訳 deepl.com/translator グーグル翻訳 translate.google.com/?hl=ja pic.twitter.com/9o5VJkfm11 2020-03-20 18:44
忍者ツールズ、「忍者カウンター」など8つのサービスを終了へ ネット黎明期を支えたサービスがまた1つ幕を閉じる｜男子ハック
話題のニュース忍者ツールズ、「忍者カウンター」など8つのサービスを終了へ ネット黎明期を支えたサービスがまた1つ幕を閉じる2020年3月2日8 忍者ツールズ株式会社は2月27日、忍者「アナライズ」「カウンター」「アクセスランキング」など8つのツールについて、サービス提供を終了すると発表しました。ネット上では惜しむ声とともに、懐かしむ声もあがっています。 忍者ツールズ、8サービスを終了へ忍者ツールズ株式会社日本のインターネット黎明期からウェブサイトの運営に役立つツールを提供してきた「忍者ツールズ」が、8つのサービスについてサービス提供を終了すると発表しました。 提供終了が発表されたサービスは以下のとおり。 忍者アナライズ忍者カウンター忍者サンドボックス忍者ビジター忍者バリアー忍者アンケートフォーム忍者メールフォーム忍者アクセスランキング忍者ツールズ株式会社は終了理由について、「現在のインター
うちは、誰も手を出さない「B’zのマイクスタンド」だって受ける！
株式会社能作 代表取締役社長 1958年、福井県生まれ。大阪芸術大学芸術学部写真学科卒。大手新聞社のカメラマンを経て1984年、能作入社。未知なる鋳物現場で18年働く。2002年、株式会社能作代表取締役社長に就任。世界初の「錫100%」の鋳物製造を開始。2017年、13億円の売上のときに16億円を投資し本社屋を新設。2019年、年間約12万人の見学者を記録。社長就任時と比較し、社員15倍、見学者数300倍、売上10倍、8年連続10%成長を、営業部なし、社員教育なしで達成。地域と共存共栄しながら利益を上げ続ける仕組みが話題となり、『カンブリア宮殿』（テレビ東京系）など各種メディアで話題となる。これまで見たことがない世界初の錫100%の「曲がる食器」など、能作ならではの斬新な商品群が、大手百貨店や各界のデザイナーなどからも高く評価される。第1回「日本でいちばん大切にしたい会社大賞」審査委員会特
アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比） | WordPressやWebデザインなど紹介 Ocadweb
アスペクト比とは？計算ツールの使い方は？ アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比）は、画像サイズを16:9や3:2、4:3、黄金比などアスペクト比を簡単に計算をしてくれるツール。 写真サイズを入力するだけで、ピクセルで計算してくれたり、各比率で画像をシュミレーションができるアスペクト比計算ツールです。 下記の関連記事では、アスペクト比とは？このツールの使い方などを紹介しています。
iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
Googleが答えた「SEOにまつわる都市伝説」まとめ【Webmaster Conference】 | WEMO
そろそろSEOをちゃんと勉強しようと思い、Google主催の Webmaster Conference Osaka 2019 に参加してきました。 そのイベントの最初のセッションが Malik Mairaj Syed さんの『SEO Mythbusting』というタイトルのもので、よくあるSEOにまつわる都市伝説的なものに関してGoogle側が回答していくというものでした。 巷で噂される「それって本当にSEO的に効果あるの？」という話が次々とスライドに表示されていき、「イエス」か「ノー」かをMalikさんが回答していくという流れになっていて、まだまだ知識の浅い私にとっては大変勉強になる内容でした。 （SEO業界の人たちからすると当たり前すぎてつまらなかったそうですが…） 今回は、そのセッションの内容をざっくりとまとめていこうと思います。 （Googleからのスライド共有はされないそうなので
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
動画が流れる | SANKOU!
コーポレートサイト ブランドサイト･サービスサイト ECサイト･オンラインショップ キャンペーン･特設･プロモーションサイト ポータルサイト･メディア･情報サイト プラットフォーム･コミュニティサイト 採用サイト･採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある･作り込まれている イラストを使用 3D表現･3Dイラストを使用 シズル感･訴求力のある写真･動画使用 写真少なめ･写真以外のビジュアル表現 さりげない動き･動きなし やや動きあり ダイナミック･印象的･細やかな動き 日本語メイン ノーコードツール｢STUDIO｣で制作 スマホ特化･モバイルファースト Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･
猫騙（上杉昇）interview 「生きることは、自然に逆らうこと」
仲間として、バンド・メンバーとして、自分に出来る事 ーー今回リリースされるこのシングルは、昨年亡くなったmiya38さんに捧げるトリビュート作品ということですが、この作品を制作するに至った経緯について教えて下さい。 上杉昇（以下、上杉） ： 自分のこれまでの人生を振り返ると、「信じる」ことでそれを現実にしてきたんですね。信じ込む力を微塵も疑ってはいけなくて、100％信じないと駄目だと思ってるんですけど、あいつ（miya38）がそういう病気だと聞かされた時に、信じたくなかったし、認めたくなかったし、治るって思いたかったんですね。実際、WANDSにしても、信じることでメジャー・デビューできたわけだし。あいつに関しても、衰弱していく姿を見たり、色々な話が耳に入る中でも、確率的にどうこうじゃなくて、大丈夫だと本当に信じていたんです。で、結果的に彼が亡くなってしまってから、対病気っていうことに関して
視覚障害を持つエンジニアが開発した「スマート白杖」が最先端！センサーで障害物を検知＆Googleマップで音声ナビもしてくれます
» 視覚障害を持つエンジニアが開発した「スマート白杖」が最先端！センサーで障害物を検知＆Googleマップで音声ナビもしてくれます 視覚障害を持つエンジニアが開発した「スマート白杖」が最先端！センサーで障害物を検知＆Googleマップで音声ナビもしてくれます 田端あんじ 2019年9月13日 0 視覚障害を持つ人のための杖、 “白杖（はくじょう）” 。この白杖が、テクノロジーによって大きく進化しました。 自身も視力がほぼないというトルコのエンジニア、クルサット・セイラン（Kursat Ceylan）さんが開発したのは、スマート白杖「WeWALK Smart Cane」。 なんとセンサーで障害物を検知したり、スマホと連携してナビゲーションしてくれたりと、目の不自由な人が安心して歩くためのサポートをしてくれるのです。 【センサーで障害物をキャッチ＆警告】 視覚障害を持つ人の自立と積極的な社会へ
Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました
Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしましたFont AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いませんが、このようなサービスを使うと手軽に実装でき、管理もしやすくなるでしょう。昔から愛されてきたこのFont Awesomeですが、少し前からアカウント登録が必要になりました。今回はアカウント登録の手順から基本的な使い方を紹介します。 Font Awesome Font Awesome のアカウント登録手順これまでは CDN と呼ばれる、誰もが共通で使えるファイルの URL をコピペして使用できていました。しかしこれからはメールアドレスを登録し、個別に割り振られたファイルの URL を使う必要があります。これはバ
BootCamp - WindowsとMacのキーボード対応表
キーボードヘルプ より詳細はBoot Campのキーボードヘルプを参照しましょう。 タスクバーの右のほうに「△」クリックします。 クリックするとシステムアイコンが表示されるので、「◆」をクリックします。 クリックするとBoot Campメニューが表示されるので、「Boot Campコントロールパネル」をクリックします。 クリックすると「Boot Campコントロールパネル」ウィンドウが表示されるので、上部タブメニュー「キーボード」をクリックします。 「キーボードヘルプ」をクリックすれば、Boot Camp上のWindowsでのキーボードの使い方が参照できます。 その他、Boot Camp の使い方や設定はこちらを参考にしてください。 Boot Camp の使い方
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
モバイルページの高速化！ AMPの利点と対応HTMLの作り方 - ICS MEDIA
AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
トランスメディアGPがアプリとPWAが同時生成・運用可能なプラットフォーム「Appro」提供 | Web担当者Forum
機械学習によって「SEO」と「デジタル広告」はどう変わった？ 担当者が知っておきたい現実と未来 | 【レポート】Web担当者Forumミーティング 2019 Autumn
世界一受けたい授業「フィッシング詐欺の見破り方」が、詐欺被害を助長しかねない件
