VSCodeをメインのエディタにして半年たったので入れてある拡張機能を紹介します - 海波パソコン
VSCodeの画面編集という仕事柄、テキストエディタは毎日触る大事な仕事道具です。仕事の内容にあわせて設定などを変えると非常に捗ります。しかし、日本語を書きながら同時にはてな記法やらMarkdownやらCSSやらを書くという環境のため、なかなかテキストエディタのデフォルトの設定では痛し痒しといったところで、それなりにカスタマイズをしないといい感じになりません。 半年前に、それまでかなり長いこと使ってきた秀丸エディタからVSCodeに乗り換えてみたら、案外日本語をあれこれ書いたり編集したりするのにいい案配にすることができました。そこでなんとなくなじんだ今のカスタマイズ方法を書き残しておこうと思い立ちました。たぶんもっともっと拡張機能で便利にできるはずなので、ドラクエでいう「ひのきのぼうからこんぼうにそうびを変えた」くらいの気持ちで見ていただけるとうれしいです。 テーマ アイキャッチにしたのは
企業の成長に合わせてNotionを適応させていくのに役立つ「Teams」機能が発表されました！ #notion | DevelopersIO
日本時間2022年03月03日の夜中、Notionのバーチャルカンファレンス「Block by Block」が開催され、冒頭に行われたセッション「Building new types of connections: A look at what's next」でNotionの直近リリース予定の新機能に関するアナウンスが行われました。 当エントリは、その中から「Teams」という機能について内容を紹介したいと思います。 We’re redesigning Notion’s sidebar so you can organize your pages by custom teams! Create teams. Hide some. Show others. All part of the plan for Notion to scale to every size ? → ? https:/
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
【中国ゲーム】中国2次元CGの最高峰！『崩壊3rd』の『miHoYo』がUnityを使い倒すとこうなった！
Unity社が昨年開催した、ゲームエンジン『Unity』に関するカンファレンスイベント『Unite Tokyo 2018』での技術講演も記憶に新しい『崩壊3rd』の『miHoYo』が新作CG動画を公開した。 『八重櫻· 桃源恋歌』と題されたこのCG動画は、Unityのリアルタイムレンダリングを用いて開発されており、今年の2月に『bilibili』で公開したところ、260万回以上再生されるなど、好評を博している。 この数年の中国産2次元スマホゲームのクオリティの向上には目を見張るばかりだが、『崩壊3rd』のグラフィック表現は最高水準としてベンチマークして良いだろう。 以下に、同社のテクニカルディレクターを務めるJack He氏のインタビューを紹介したい。 『miHoYo』のJack氏のインタビュー内容とは？『miHoYo』のJack氏へのインタビュー内容は多岐に渡るため、以下に内容を要約して
Gatsbyは今、最高にイケてるエンジニア向けブログ。爆速、無料、フルカスタマイズでもう普通のブログには戻れない
現在、最高にイケてるエンジニア向けブログは間違いなく Gatsby（キャッツビー）であると断言する。 Gatsby にはじめて触れた日に「こいつはマジでスゲー」となって即決で自分のブログを Gatsby に移行することにした。で、今見ていただいてるこのブログが Gatsby というわけです。 Gatsby が最高にイケてる理由は次の３つ 爆速無料フルカスタマイズもうまさに「華麗なるギャッツビー」 1 爆速 Gatsby の速さに対するこだわりがそこら中にある。 使われている主な技術 ReactGraphQLPWA非同期レンダリング静的サイトホスティングひとつひとつは速く見せるためのちょっとした工夫かもしれないが、ここまで全部まとめて実装されるとそれはもう速い速い。 普段から私は個人開発プロジェクトを React, Redux, GraphQL, Rails の組み合わせで作っていて一応は分
ウェブ開発を爆速に！人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】
短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。 今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。 ウェブサイト開発を爆速に！人気オススメCSSフレームワーク厳選まとめ【2018年保存版】 Bulma Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。 URL: https://bulma.io/ CDN:
商用のデザインやイラストにも無料でガンガン使える！超高解像のフリーテクスチャ素材 -CC0 Textures
商用でも無料で利用できる2,000px, 4,000px, 8,000pxの超高解像度のテクスチャ素材がダウンロードできるCC0 Texturesを紹介します。 8,000pxまで揃ってるフリーテクスチャは、かなり貴重ですね。 しかもライセンスはCC0、クレジット表記なしで利用できます。 CC0 Textures CC0 Texturesの特徴 CC0 Texturesでは、無料で利用できるテクスチャ素材がダウンロードできます。ライセンスはCC0で、クレジット表記の必要はありません。また、サインアップやメールアドレス登録などの面倒なことも一切不要です。 PBR(フィジカルベースドレンダリング)ベースの素材 テクスチャは物理ベースのレンダリングで作成されており、シームレスで利用できます。 超高解像度のテクスチャ素材 ダウンロードできる素材は、2,000px, 4,000px, 8,000px
めちゃ楽しい！この世界には存在しない異世界の地図を作り出すオンラインツール -Fantasy Map Generator
この世界には存在しない異世界のファンタジーな地図を簡単に作成できるオンラインツールを紹介します。 創作活動のインスピレーションにいいですね。 地図はカラーで、フルスクリーンの解像度に対応。SVGやPNGでの書き出しもできます。 Fantasy Map Generator Fantasy Map Generator -GitHub Fantasy Map Generatorは、以前当ブログで紹介した「Generating fantasy maps」にインスパイアされたものです。 地図機能としてかなり進化しており、地図はSVGでレンダリングされ、拡大・縮小に対応しており、さらにカスタマイズも可能です。
JavaScriptで制御できるWebベースの万能マップエディタ「Mapbox Studio」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です！ データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです！ 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう！ 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます！ 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう！ 表示された画面にある「JS」の項目をクリック！ 左側の「C
これなら簡単！Bootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツール -Bootstrap Magic
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
![[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d34cdd6f924a706cf29bd75ff95cedf76093a2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110601.png)
クリックしていくだけで本格的なWebサイトが作れる「Seicenta」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、超お手軽に本格的なWebサイトを作って、そのまま公開まで完結できるオススメの無料Webサービスをご紹介します！ 初心者の方ならテンプレートを選んでいくだけで完成するし、中級者以上の方はコンテンツをカスタマイズしたりプログラミングすることも可能な万能型サービスとなっているのが特徴です。 【 Seicenta 】 ■「Seicenta」の使い方！ それでは、実際に「Seicenta」を使いながらどのようなサービスなのかを詳しく見ていきましょう！ まずはトップ画面にある「Login」をクリックします。 すると、Webサイトの管理ができる「ダッシュボード」が表示されます。 この画面右上に、ちょっと小さいですが「ユーザー登録」できるリンクがあるのでクリック！ メルアド・ニックネーム・パスワードを入力すればすぐに登録できるので、先に済ませておきまし
なにか集めがちな人のための初めてのWEBサイト作成ガイド - エスカレーターマニアの移動の記録
なにかひとつのことに異常に関心を傾け、写真に撮ったりして集めがちな人のために、それを発表する場としてのWEBサイトの作成の仕方をまとめます。 といっても、書いているのは「始めたときはブログすらなくて、HTML手打ちでインフォシークにFTPで手動アップロードしてた」ような昭和のひとなので、最新トレンドを捉えられているか微妙ですが、参考まで。 こういうタイプのひとが対象です： 【まとめ】ずっとずっと撮り続ける このまとめを更新していたら、既に見られなくなっているサイトの多いことに悲しみを覚えたりしたので……若人達よレッツトライ この記事も関連しています： 【まとめ】初めてのコミックマーケット偏狭サークル参加ガイド 書いているひとのインターネット思い出話はここ： はてなブログに移転いたしました&個人的はてな年表 無料で始めるなら 一番簡単でイマドキ：Instagram カスタマイズが楽しい：Tu
ブログをわかりやすくカスタマイズする方法のまとめ記事【全て図解あり！】｜魂を揺さぶるヨ！
こんにちはユレオです。 いつも皆様のブログを拝見させて頂き、先人たちのテクニックや工夫を見よう見まねでいろいろと勉強させていただいております。 右も左もわからないところから始めた当ブログもだいぶ手を入れてきました。 書籍で培った知識よりもはるかに実際の運用されているブログを見る方が勉強になるため、書籍で基礎知識を学んだら、すぐに実際に試すという方法で勉強しています。 そうこうしているうちにメモ書きとし書いてきたブログ記事が増えてきたため、一度整理を兼ねて情報をまとめてみようと思います。 バランスよく情報がまとまっていませんが、何か使える手法などがありましたらご参考にしていただければ幸いです。
スマホ・モバイルユーザーを意識したブログデザインのカスタマイズ実例 - Life is colourful.
当ブログは1ヶ月前のGWにデザインを一新した。 スマホユーザーをターゲットにしたデザインカスタマイズで、下の画像のように、ヘッダーのカテゴリメニューや記事下の関連記事一覧をリデザインした。 今回のカスタマイズのこだわったポイント、設計意図を以下にまとめた。 カスタマイズのターゲット スマホユーザー 検索からのユーザー 今回はこの2点をカスタイズターゲットに絞った。 当ブログのアクセスは約97％が自然検索によるもので、全体の7割はモバイルユーザーという状況なので、スマホ表示のカスタマイズを優先した。 もちろんPC表示もカスタイズしたいが、まだ途中で投げ出したままになっている。本文下の関連記事一覧はスマホ表示と共通のデザインを採用しているけれど。 スマホユーザーの特性（PCユーザーとの比較） まずスマホユーザーの特性を整理しておこう。以下の3点を頭に入れつつカスタマイズに臨んだ。 ページの滞在
テキストを蛍光ペン風にマーキングするCSSの設定方法 - すずしんろぐ
こんにちは、すずしんです。 他の方のブログの記事を読んでいると…。 文字の強調の手段として、蛍光ペンでマーキングしたような線が使われていることがあります。 例えば、こんな風にテキストにひかれているのですよね。 これを見ていて、私もぜひ使ってみたいなと思いましたので…。 今回このマーカーを使えるようにしてみました。 手順としては、CSSでちょっと設定してやるだけです。 蛍光ペンマーカーの設定(CSS) 線の太さの設定 線の色の設定 サンプル蛍光マーカー テキストにマーキングする方法 ひとこと 蛍光ペンマーカーの設定(CSS) 蛍光ペンマーカーの設定には「linear-gradient」属性を使用します。 これを使って、backgroundプロパティに設定してやります。 線の太さの設定 比率を指定している部分(0%, 60%など)の値を変えることで、線の太さを変えることができます。 細い線 .
カスタマイズしたらPVが増えたよという話 - ももふみブログ
ブログを大リニューアルしました ここ最近カスタマイズばーーっかりしてました(笑) 夜な夜なパソコンをかちかち・・フリーズ(ﾟдﾟ)かちかちの繰り返しw おかげで寝不足です(笑) やったこと 全体的なカスタマイズ 今までパソコン版は、はてな公式にある、手書き風のタイトルが可愛いHandwritingものを使っていました。 可愛くて気に入っていたのですが、カスタマイズがあんまりできないし、飽きてきたのもあり大リニューアルとなったわけです。 テーマストアからBrooklyn選びました！！Nakedと悩みました・・このテーマは別サイトのお家ブログの方で使わせて頂こうかな。 このBrooklyn、ドロップダウンのメニューバーが透けててホントに可愛い(°∀°)！ 全体的にピンクが多いので、青緑にしてみました。 そして、軽い！サクサク進む。凄い。 パソコンからみると、可愛い感じになったので大満足です(
はてなブログのスマートフォン版をカスタマイズするとき役立つ記事 - Hatena Blog Theme Custom
先日読んだid:codomisu さんの記事が素晴らしかったので、自分も本業ブログのリデザイン、スマホ版のカスタマイズしました。 スマホ版のデザインもPC版とあわせてリニューアルしました。 夏らしさを意識しましたがいかがでしょうか？ スマホ版もPC版と同様、class指定を調べてカスタマイズしていくんですが、先人の知恵を借りたほうが楽に素早く完成できます。今回は自分では記事を書かず、人様の役立つ記事を紹介します。 オリジナルのヘッダーデザイン スマホ版をスッキリおしゃれに見せるには スマホ版に固定フッタメニューをつける はてなブログスマホ版をカスタマイズするときに気をつけること オリジナルのヘッダーデザインスマートフォン版のはてなブログをヘッダー含めオリジナルに作り込むなら、id:codomisu さんのこの記事が丁寧に詳細に書かれています。はてなブログ標準のヘッダーのHTMLで表示される
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインに適したアイコンがこれで見つかる！ UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
http://the-white-room.hatenablog.com/entry/osusume-kasutamaizu