最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox Dynamic Line Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 区切り線の実装 なぜ区切り線が小さい四角になるのか 区切り線の太さ グラデーションの区切り線 破線の区切り線 これを行う別の方法 終わりに はじめに UIをデザインしているときに
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。
ノンデザイナーズ・Wantedly デザインシステム完全理解ペーパー | Wantedly Engineer Blog
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML／CSSスニペットをまとめてご紹介します。 掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。 CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。 昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタン、すごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 コピペできる！Webサイトがかっこよくなる最新HTMLスニペットまとめ ホバーで文字テキストが分割されるエフェクト See the Pen Split animation on hover with
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・
WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog
まえがきブログや記事を投稿するWebサービスには、殆どの場合、リッチなエディター機能が備わっています。特に、記事を見た目通りに書けるエディターは、WYSIWYGエディターと呼ばれ、記事を書く際には欠かせない機能の一つです。 Wantedly にもストーリーと呼ぶ記事を投稿する機能があり、その記事投稿部分では、WYSIWYGエディターを実装しています。 では、どのようにWYSISYGエディターを開発していくのでしょうか。この記事では、エディターの機能を実際に開発するための基礎知識と実装について書いていきます。 今回話すエディターについて今回記事で指すエディターとは、 WYSIWYGエディターを想定しています。例えば、Dropbox Paper や google docs、Medium、Note などのエディターがそれに該当します。Qiita や Zenn のような 2カラムの Markdow
Terraform用のGitHub Actionsをterraform-github-actionsから後継のsetup-terraformに移行する - メドピア開発者ブログ
SREの侘美です。 最近はfirst call for オンライン診療の開発でRailsのコードを書いてました。 hashicorp/terraform-github-actions から後継である hashicorp/setup-terraformへ移行した際にいくつか設定でハマったので、そのことについて書いていきたいと思います。 背景 メドピアではterraformでAWSのインフラを管理しています。 terraformのリポジトリでは、レビューがスムーズに行えるようにGitHub Actions上で terraform plan や terraform apply 、 terraform fmt 等を実行できる hashicorp/terraform-github-actions を利用し、下の画像のようにplan結果をPRに自動で投稿するようにしていました。 新サービスをリリースし
HTML超入門！…のさわりだけ！！ - Little Strange Software
どうも！LSSです！ 今回は「HTML超入門！…のさわりだけ！！」と題して、 「はてなブログ書いてるけど、HTMLは全く知らない。広告挿入のためにHTML編集画面を開くとドン引きする。」 という方に向けてちょっとだけ、HTMLってどういうものかを知る入口になったらいいな、って記事を書いてみます。 HTML編集画面を開いてみます HTMLとは？ タグとオプション タグの種類と、それぞれオプションの種類…は割愛します^^; はてなブログで即効で使えるHTMLタグ例２つ！ <hr>タグ＝区切り線 <table>タグ＝表 余録：HTMLと組んでWebページを賑やかにするお友達 CSS JavaScript PHP まとめ HTML編集画面を開いてみます 「編集 見たまま」画面で冒頭の文章を書いてから、適当に数回Enterキーを叩いて、HTML編集画面を開くと↑のような感じになります。 自分の書いた
●なるべく● ●似せる● 今回も訪問して下さって、ありがとうございます。 今回はまたまた、コメントについてのご紹介です。コメントを華やかにする！ ちょっとした工夫をご紹介しようと思います。 この記事を作ろうと思ったきっかけが、こんなところに有りました！！ kyokoippoppo.hatenablog.com きょうこさんのBLOGです！コメントに頑張って写真を乗せちゃったり....。 一度「やろう！」って思ったら、必ずやり遂げちゃうところが凄いんです！！ ●コメントに「表」？ コメントにも一部使えるHTMLが有ります。 その一つが以前紹介した「絵」デス。 その他「表」もコメント欄に作れます。 実際にはこんな感じです。 ※小鉄んさんに書いたコメントを引用してます。 ●記述はどうするの？ 上記の場合で説明すると、こんな感じです。 <table border="1"> <tr> <td>11月
WordPressサイトに自動計算フォームやシミュレーターを設置できるプラグイン 「Calculated Fields Form」 – ワードプレステーマTCD
自動計算フォームや料金シミュレーターを無料で自社サイトに設置できるWordPressプラグイン「Calculated Fields Form」を紹介します。 単純な足し算や掛け算であればだれでも簡単に設置できるほか、エクセルの関数計算ができる人であれば、年利や金利などの複雑な計算式を設置することも可能です。サイトに計算フォームが設置されていることで、ユーザーの離脱率を減らし、満足度を大きく高めることが可能です。 この記事では、Wordpressプラグイン「Calculated Fields Form」の基本的な使い方を解説します。イメージしやすいように、実際に計算フォームを作成しながら解説しますので、参考にしてください。 Calculated Fields Formの特徴 自動計算フォームを生成できる エクセルの関数を応用して複雑な計算も可能 Calculated Fields Formの
どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 コード <style> @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);} 24%{background-position-x:0,calc(50% - 20px),50%
2023年11月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2023年11月の、これだけは押さえておきたいWeb関連の動き Friday, December 1st, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigma
WordPress ブロックエディター Gutenberg に対応 WordPress 5.0 から導入されたブロックエディター（Gutenberg）を使った場合に、作成したテーマを対応させるための覚え書きです。 テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについての個人的なメモです。 テーマにブロックエディターのスタイルを適用 ブロックエディター（Gutenberg）を使ってコンテンツを作成すると、使用したブロックにより特定のクラス（wp-block-xxxx や has-text-color 等）やインラインのスタイルなどが追加されます。 また、add_theme_support() などを使用してオプションのスタイルや機能を有効にすると、それに伴い追加のスタイルが読み込まれたりもします。 デフォルト（初期状態）では、
Notionに記事を機械的に移行しようとしたら大変だった話 - Nature Engineering Blog
Nature Engineering Blog祭り 7日目はCorporate ITのmaronyからお送りします。 簡単に自己紹介すると、Natureには今年の3月にJoinして、Corporate IT/情報マネジメント Roleという立場でいわゆる情シス的な業務をやっています。今までは総務やSREの方たちが片手間になんとかやっていた感じなので、純な情シスとしては1人目のメンバーです。最近はセキュリティ勉強会とかもしたりしてます。 今回は、KibelaからNotionに記事を機械的に移行しようとして大変だった話をします。(Notionのインポート仕様の話がメインです) 背景 NatureではもともとナレッジマネジメントツールとしてKibelaを使っていました。 2021年末ぐらいからNotionに移行することに決めたらしく、私がJoinした3月頭には新規記事は完全にNotionに作成す
まだまだ無印良品週間！ ６月開催の無印良品週間は6/25（火）まで。 この期間中は、私が今回買ってよかった無印良品のモノをお伝えしていきます＾＾ 今回は 「こんな商品もあったんだ」 というものです＾＾ 一石二鳥になり、クローゼットが整いました♪ 不織布・衣類カバー・ロング丈用 今回購入したのは不織布でできた衣類カバー・ロング丈用です＾＾ 商品説明 不織布衣類カバー・ロング丈用 １枚入・約６０×１３０ｃｍ 通気性があり、抗菌・防カビ剤を練り込んだ不織布を全面に使った衣類カバーです。交換時期がわかるお取替え目安シールと収納している衣類がわかるように名前シールが付いています。コートやドレス等のロング丈の衣類の保護に最適です。 引用：無印良品HP 不織布に抗菌と防カビ剤が練り込まれています。 marimoが気に入ったのは全面に抗菌・防カビ剤が練り込まれていること。 よく市販されている衣類カバーは半
棚餅さんからのアドバイスを受けて、目次表記にトライしました。 思ったより簡単♡ 棚餅さんありがとうございます。m(__)m ♪♪♪ 棚餅さんのサイトはこちらです。♪♪♪ daigo-shinbun-matome.hateblo.jp この方法だと、目次と同時にリンクが貼られ、目次から説明箇所に飛べるので、ユーザビリティが良くなります。 proのはHTML編集できるので、タグで区切り線を入れることも可能です。 ただし、[編集 見たまま] で書かないとHTML編集のアイコンが出ないようです。 お役立ていただければ嬉しいです。 【 目次 】 1.本文を書きます。 2.大見出しをクリック 3.目次アイコンをクリック 4.区切り線タグを入れます 5.プレビューで仕切り線を確認 6.クリックしてリンクを確認 7.できあがり 1.本文を書きます。 先に本文を書きます。見出しになる部分は改行しておきます。
公開日 : 2022年2月1日 (2022年7月23日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) 各種デバイスの主要 OS で、いわゆるダークモードが標準装備されている現在 (†)、既に多くのアプリが、ダークモードに対応したビジュアルデザインを併せ持つようになっています。 † macOS 10.14 Mojave 以降、iOS 13 以降、iPadOS 13 以降、Android 10 以降、Windows 10 以降で、ユーザーの任意によるダークモード (ダークテーマ) への切替が可能になっています。 ウェブコンテンツにおいて、ダークモードに対応したビジュアルデザイン (スタイル) を併せ持つことは、必ずしも必須というわけではありません。アクセシビリティの観点で見た場合、たしかにロービジョンのユーザーの中には (画面の背景色が明るいと眩しすぎるため) 暗い背景色と
はじめに ここ最近、GitHubやQiita等のWebサービスで採用されているマークダウン。メモ帳などで記載するよりもリッチなドキュメントを作れる上に、HTMLよりも少ないコードで表現できるので、徐々に普及しつつあります。今回はそんなマークダウンの基礎を学んでいきましょう。 レッスン１．マークダウン(MD)とは マークダウン(以下MD)はテキスト記述のためのマークアップ言語の１種です。マークアップ言語はHTMLが代表的ですが、文書構造や装飾などを表現するための言語のことです。MDを使うことで、プレーンテキストがよりリッチに表現できます。一定のルールに従って記載していき、完成した後はHTMLとしての書き出しも可能となっています。記法もタグというよりは記号が多いので、視覚的に分かりやすいかつ、覚えやすい言語仕様となっています。 レッスン２．MDを書くための環境を整える MDの用途として、Web
本文と見出しに共通 font-familyを決める 和文だけでいくのか、欧文も混ぜるのか OSによってデフォルトで入っているフォントが違うため、和文と欧文で別フォントを指定するなら有り得る組み合わせを確認しておく必要がある Webフォントを使うのか使わないのか 和文Webフォントは2020年の今でもある程度ページスピードが遅くなってしまう 作っているプロダクトの性質や決定したテーマに合わせて選ぶ必要がある いずれにしても「ブランドが大事だから」と和文Webフォントを2種類x3ウェイト使用する……みたいなのは絶対やめた方が良い 本文 最小サイズを決める ブラウザで表示できる限界もあるため、かなり機械的に決められる 年齢層の高いユーザーも多くいるなら最小を13px デザイナーからは「最小が13pxなんてかなり大きいのでは？」と思われそうだけど、年齢が高ければ13pxでも相当小さい部類 かなり洗
PlantUML言語リファレンスガイド
PlantUML を使った UML の描き方 PlantUML 言語リファレンスガイド (Version 1.2021.2) PlantUML は、以下のようなダイアグラムを素早く作成するためのコンポーネントです。 • シーケンス図 • ユースケース図 • クラス図 • オブジェクト図 • アクティビティ図 • コンポーネント図 • 配置図 • 状態遷移図（ステートマシン図） • タイミング図 以下のような、UML 以外の図もサポートしてます。 • JSON Data • YAML Data • Network diagram (nwdiag) • ワイヤーフレーム • アーキテクチャ図 • 仕様及び記述言語 (SDL) • Ditaa • ガントチャート • マインドマップ • WBS 図 (作業分解図) • AsciiMath や JLaTeXMath による、数学的記法 • ER 図
Revueというのは、Twitter社に買収されたオランダのニュースレターサービスです。 Revue - An editorial newsletter tool for writers and publishers. TwitterがオランダのニュースレタープラットフォームRevueを買収、作家が報酬を得る方法を提供 | TechCrunch Japan 最近は、ニュースレターサービスがかなり注目されており、Substackなんかは、様々なところで取り上げられていますよね。 「メール？メールなんて古いよ！」なんてここ最近ずっと言われ続けていましたが、どんな端末でもどんなOSでもプッシュ配信で受け取れるサービスって強いなと思うわけです。 Substack このRevueは、Substackほど先進的な感じではなさそうですが、それでも作家側への報酬の仕組みが整っているところが、Twitter
VSCode と Marp で A4 マニュアルを作成する方法 背景 PowerPoint や Word で資料を作成するのが苦手なので、他に何か良い方法がないものかと探して見つけ出した手段を紹介。 というか、PowerPoint はそもそもスライド作成ソフトなので、それで書類作成するのはナンセンスですよね？ Marp もスライド作成ツール？ ……はて？ Word で作ればいい？ ……ちょっと何言ってるかわからないです。 というか、Word も PowerPoint も画像やデザインまわりの UI が煩雑すぎて正直苦手。 ちなみに、本来のスライド作成においても Marp はかなり優秀なので、そのあたりは各自で調べてみてほしい。 メリット 画像以外、全てテキストだけで作成できる マウス操作で細かい操作が不要、各サイズなどは数字入力で調整できる デメリット デザインの融通が効きづらい けっこう
【はてなブログ】Markdown 最低限これだけ覚えれば一通りの記事が書ける記法まとめ - 静かに暮らしたい
今日で、はてなブログを始めてようやく3か月になりました。 そしてまた、Markdown記法に変更してから1か月近くが経ちます。 emuemumint.hatenablog.com ここから十数記事を書いた現時点で、Markdown記法について次のように感じました。 字が見たままモードより小さいけれど、すぐに慣れた 見たまま編集とHTML編集画面との往復がなくなり時間のロスが減った 基本の操作は見たままモードと同じツールバーでできる 機能面でつまづいたのは画像サイズの変更、囲み枠内の箇条書きくらい このようにメリットが多く、総合的にはてなブログでのマークダウン記法は、『みたまま』と『HTML』のいいとこ取りだといえます。 みたままモードのように崩れることもなければHTMLのように難しいタグは省略して書く事ができる。 そして細かい部分は同じ画面のまま切り替えることなくHTMLで記述できる。 覚
AutoHotkey : 簡単サンプルコード例（役に立つかも）
AutoHotKeyとは： ある特定のキーを押すと、スクリプトを読んで自動でPCを操作してくれるます。あなたのアイディア次第でなんでも出来ます。単純な繰り返し作業、面倒なことはコンピュータにやらせましょう。特に小さなTOOLは得意です。画像認識、GUI作成もできます。兄弟関係の「Autoit」の方がコードは見やすくかけると思います IfWinActive と #IfWinActive は似ているようで違う。 AutoHotkeyとは： 短いスクリプトをショートカットキーに登録し、ワンキーでいろいろなことを自動でしてくれる便利なスクリプト言語です。 また、キーに定型文登録し文書入力を楽にしてくれます...take-web.com2020.12.19 ：＿サンプルコード２ AutoHotkey：私がつかってるサンプル２（便利かも）AutoHotkeyは、アイディアさえあれば小さな自動化をするこ
Notionページをカスタマイズ その1（見出し/目次/コールアウト/トグル/コードブロック） - みやもとブログ
今回はNotionの豊富なメモ機能の中から、いくつか便利なポイントを挙げていこうと思います。 今回は「見出し」「目次」「コールアウト」「トグル」「コードブロック」に関して書いていきます。 ちなみに、前回のNotion記事では入力補助に関して書いています。 入力補助に関してざっくりでも把握できていると、今回の機能も難なく使えるかなと思います。こちらも良ければぜひ。 前回の記事 Notionは入力補助が豊富にある（マークダウン/ブロックタイプの変換/スラッシュコマンド） それでは本題へ。 便利さが伝わるように、図を多用して紹介していきます。 便利ポイント 見出し 目次 Notion標準の目次 Chrome拡張を使用した目次 コールアウト トグル コードブロック おわりに 関連記事 便利ポイント 見出し Notionでは「見出し」を設定できます。 こんな感じです。 「見出し1」「見出し2」「見出
メモ Markdownの書き方 目次 メモ Markdownの書き方 デザインとMarkdownの関係 TEXT(編集のテキストボックス)の改行 スペース(スペースを１個以上続ける) 段落(空白行を追加すると段落になる) 強制改行(改行前にスペース２つ) ヘッダ(H1~H6) (章、レベルなど) (#~######まで) H1 H2 H3 H4 H5 H6 ヘッダー1 ヘッダー2 引用(ある意味インデント) (>を１つ以上付ける) 線(--- *** ___など１行で) コード１(等幅フォント) (‘(バッククォートで囲む。)) コード２(コードを埋め込む) (‘‘‘(バッククォート３つで囲む。)) コード３(その他) (「&」「<」「>」やスペース) 箇条書き(リスト) (「*」「+」「-」+スペースのマークを付ける) テーブル(| -を使って表現する) リンク([ ]と()で囲む) リ
元気に私のそばにいて欲しい 想いを込めてセントバレンタインデー もうすぐです - あたりまえ？それさあ。。。
いっしょに 今を生きよう！！ にほんブログ村 テレビブログ 朝ドラ・昼ドラへ .•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ ((#^^#)ー☆ .•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ ♪ ♡ 好きだよ 貴方のいのち・カラダは いつも健康で 明るく元気に私のそばにいて欲しい 想いを込めて セントバレンタインデー チョコレートを贈ります 金曜に雪が降って 結構つもって 歩くの大変な週末 でも お天気晴れ☀ さて 買いに行こう .•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ バレンタイン 遅れてごめんね 【オンライン限定】 リンツ Lindt チョコレート リンドール テイスティングセット ショッピングバッグ付き ｜ プレゼント ギフト スイーツ お菓子 洋菓子 詰め合わせ 個包装 可愛い リンツチョコ 誕生日 手土産 内祝い お返し お礼 退
はじめに システムの稼働状況とかミドルウェアの統計情報とかを手っ取り早く可視化するためにRを使ってみようということで書き始めた連載企画です。 Rでは、集計結果をサクッとWebアプリケーションとして作成するためのShinyというステキなパッケージが提供されています。Shinyを使えば、Webアプリケーションの知識があまり無くても、割と簡単にWebアプリが作れて、きれいなWebページでRによる集計結果を表示させることができます。 今回はShiny基礎編です。 関連記事 インフラ屋さんのためのR言語: 環境構築編 オフラインでのR環境構築 on RHEL z/OSにRを導入してみた インフラ屋さんのためのR言語: プログラミング編 R Markdownによるレポート生成 R MarkdownのHTMLレポートをブラッシュアップ R - ShinyによるWebアプリケーション作成: 基礎編 <=
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
コピペできる！Webサイトがかっこよくなる最新HTMLスニペット38選
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ
写真から作る「コメ絵」 - 「だるころ」（だぁ～るまさんがこぉ～ろんだ♪）
【謎CSS】アニメーション区切線 - Little Strange Software
WordPress ブロックエディター Gutenberg に対応
【整理5分】梅雨に最適！防カビ衣類カバーは衣類を守り、クローゼットを整える。
はてなブログPRO 目次の作り方+区切り線でかっこよくしてみました！ - すくサポキッズ
ウェブコンテンツのダークモード対応 | Accessible & Usable
VS Code を利用した Markdown の基礎とフォーマット構文 | tracpath:Works
新規プロダクトを立ち上げるときに作る、小さなデザインシステム - Qiita
Twitterのニュースレター配信サービスRevueはお手軽配信サービスだった
VSCode と Marp で A4 マニュアルを作成する方法
(はてなブログ用)Markdown についてかき集めてみた - chiyoh’s blog
R - ShinyによるWebアプリケーション作成: 基礎編 - Qiita