TailwindCSS入門講座
対象読者 TailwindCSSを初めて聞いた人 一方、HTMLとCSSは把握していている人 駆け出しフロントエンドエンジニア TailwindCSSとは 人気の高いCSSフレームワークの1種となります。 まずは公式ドキュメントを一読しましょう。 Rapidly build modern websites without ever leaving your HTML. HTMLから離れることなくモダンなウェブサイトを高速に作れるみたいです。 早速、TailwindCSSを導入して使ってみましょう。 セットアップ手順 息を吸うかのごとく、当たり前のように公式ドキュメントに目を通しましょう。 WEB系の技術は、トレンド変化が速いので、一次ソースから調べるのが吉です。 npmと呼ばれるノードパッケージマネージャを利用したコマンドによるインストールが推奨とのことです。 今回、Node.jsの環境が
【商用可】HTMLテンプレートを無料ダウンロードできる厳選サイト11個
HTMLテンプレートを無料でダウンロードできるサイトを厳選してご紹介します。 より具体的には、CSSフレームワークに依存しないVanilla CSSテンプレートとなっています。 数あるテンプレート配布サイトの中で、これから以下に挙げるサイトが特にお気に入り。選択基準はこんな感じ。 HTMLテンプレートは、どれも個人・商用ともに無料で利用できる モダンでおしゃれな今っぽい見た目 デモページで表示、確認できる ダウンロードに必要なのは、メールアドレスによるサインアップのみ わたしはこれまでに、無料で利用できるHTMLテンプレートを１０年近く追っかけてきました。数でいうと数百は超えます。 その経験から言えるのは、多くの「無料」テンプレートは、個人利用向けライセンスがほとんど、ということ。 クライアント向けのプロジェクトや営利目的の仕事には、残念ながら使えません。 テンプレートを購入することで商用
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
Google スプレッドシートを HTML で見る - Qiita
スプレッドシートで書いて HTML で見たい！ スプレッドシートで書かれた文書って読みにくいですよね スプレッドシートで書かれた文書って読みにくいですよね。 縦幅・横幅が短いならまだいいのですが、長くなると急に読みにくくなります。表示範囲が限られるんです！ 編集するときは Google スプレッドシートで共同編集してガンガン書けるのですが、 いざ落ち着いて書いた内容を読みたいときにちょっとつらいです。 スプレッドシートを HTML で見れたらいいのでは HTML で見れるならブラウザの機能で好きにスクロールできます。 見た目についても CSS である程度コントロールできます。 いいことづくめです。 でもね 用途によっては Google Sites とかもあるのでスプレッドシートにこだわる意味はないです。 ないしは環境によっては Wiki とか GitHub や GitLab で管理すればい
Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
ユーザーストーリーマッピング
JaSST 23 Tohoku https://www.jasst.jp/symposium/jasst23tohoku.html
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
LPI-Japan、無償公開中のLinuxサーバー構築学習用教材「Linuxサーバー構築標準教科書」のバージョンアップを発表 ～最新のLinuxディストリビューションに対応し、仮想マシンを用いて独学でも学習しやすい構成に変更～｜IT資格といえばLPI-Japan | LinuC/OSS-DB/HTML5/OPCEL
LPI-Japan、無償公開中のLinuxサーバー構築学習用教材「Linuxサーバー構築標準教科書」のバージョンアップを発表 ～最新のLinuxディストリビューションに対応し、仮想マシンを用いて独学でも学習しやすい構成に変更～ 報道関係各位 LPI-Japan、無償公開中のLinuxサーバー構築学習用教材「Linuxサーバー構築標準教科書」の バージョンアップを発表 ～最新のLinuxディストリビューションに対応し、仮想マシンを用いて独学でも学習しやすい構成に変更～ オープンテクノロジー技術者認定機関としてLinux技術者認定「LinuC（リナック）」などを実施する特定非営利活動法人エルピーアイジャパン（以下：LPI-Japan、東京都千代田区、理事長 鈴木 敦夫）は、実習を通してLinuxサーバー構築の知識を学べる学習用教材「Linuxサーバー構築標準教科書」（以下：本教科書）のバージョ
【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）
宣伝💡 この記事の内容の超大容量版がこちらの本になります。興味がある方は是非チェックしてみてください。 Web業界に新卒で入ってから7年と数ヶ月が経ちました。私はデザインからフロントエンド全般が守備範囲です（Next.jsを使った軽めのWeb開発くらいまで）。 最近ようやく自分の中での「コーディングの手法やルール」が固まってきたので、言語化してこの記事で解説していこうと思います。 はじめに まず最初にこの記事の方針や前提をいくつか書いておきます。 用語や知識の詳しい解説はしていないので、分からない内容が出てきたら調べながら記事を読んでいただくとより理解しやすいと思います 実務を数年経験していないと理解できない部分があるかもしれないです（完全初学者向けではなく、初・中級者向け） あくまで自分の中での手法やルールであり、全ての実装者・会社・プロジェクトなどに当てはまるわけではありません（もち
なんかいけそうな気がしたので Code Interpreter でシュッと Web アプリつくってもろた｜bbz
ちゃっす(/・ω・)/ 今日も ChatGPT Code Interpreter さんと戯れていましたの。 で、タイトルの通りなのだけれど、仕様書書いて渡したら Web アプリシュッと作ってくれんじゃね？( ・ω・) という闇の遊戯をした。 という話。 目標実行や指示はすれどもワタクシは一切コードを書かぬ！！ 普通にエラー修正とか自分でやった方が早いけどやらぬ！！ 全てを ChatGPT への指示で完結する！！ で、納品されたもの(/・ω・)/ 納品物 トップページ 登録画面 ログイン画面 Activity 一覧 Activity 修正 レポート画面 すごない？( ・ω・) やったこと～ChatGPT との対話を残すでござる( ・ω・) ※ ChatGPT Code Interpreter Plugin が使えないと同じ事はできないぞ☆ 仕様書を提供しますので、 仕様にそった Flask
文書配付機能でPDFレンダリングのライブラリを置き換えた話 - SmartHR Tech Blog
こんにちは！SmartHRで文書配付機能の開発を担当している、aanzaiです。 2022年末から2023年2月にかけて、文書配付機能で使用しているPDFのレンダリングライブラリの置き換えを行ったため、具体的にどのように移行したかをご紹介します。 文書配付機能の紹介 文書配付機能（旧:雇用契約）は、SmartHRの最初のオプション機能として開発された機能で、事前に作成した書類テンプレートをもとに、SmartHRに保存された従業員情報を差し込んで書類PDFを作成し、従業員に配付したり、契約書として合意を取ったりすることができる機能です。 書類テンプレートのレイアウトは、ユーザーがWYSIWYGエディタで作成したものがHTMLとして保存されています。書類を配付する際は、このレイアウトHTMLに従業員情報を差し込み、PDFに変換します。 PDFレンダリングライブラリ移行の理由 文書配付機能では、
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma デスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換 html.to.designの利用方法 html.to.designの使い方 1クリックでWebページをFigmaに変換 html.to.designは、URLを入力して1ク
商用OKの無料HTMLテンプレート120個以上をダウンロードできる Templates Jungle
だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。 この時に必要になるのが、レスポンシブWebサイトの制作です。 しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。 あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。 今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。 ライセンスについて 素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。 HTMLテンプレートは、フッターに表示してあるクレ
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
XPath取得ツール（体験版あり/インストール不要） | SeleniumでRPA
2020年3月2日2024年3月23日 ダウンロードはこちら このサイトの目的は、フリーのWebテストツールであるSeleniumをRPAに活用して、業務の自動化を実現することです。 はじめに Seleniumで自動化スクリプトを作成しようとした時、まずは画面項目をSeleniumに取得させる必要があります。Seleniumで画面項目を取得する方法はいくつかありますが、 例外なく全てのHTML要素を取得できること柔軟な記述ができて利便性が高いこと を考えますと、XPathを採用することになります。 商用RPAソフトであるWinActorも、画面項目の指定にXPathを取り入れています。 メジャーなWebスクレイピングツールであるOctoparseでもデータの取得にXPathを使用するようです。 XPathはブラウザの機能で取得することができますが、実際にやってみると面倒な作業です。 Chr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
