shadcn/uiライブラリを使いこなすための基礎 | アールエフェクト
本文書では初めて shadcn/ui を利用したい人向けの入門的な内容になっています。shadcn/uiは再利用可能なコンポーネントを一括ですべてインストールして利用していくのではなく利用したいコンポーネントを選択して個別にインストールを行い利用することができます。さらにインストールしたコンポーネントは各自の環境に合わせてカスタマイズすることを前提にしているためコピー&ペーストでも利用することができます。 インストールして利用できるコンポーネントの中から Button, DropDownMenu, Form, Table の 4 つのコンポーネントに注目して shadcn/ui の使い方を確認しています。Next.jsの環境で動作確認を行っていますがReact用のコンポーネントライブラリなのでNext.jsに関する知識がなくても利用できます。 shadcn/ui とは shadcn/uiは
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
Web Makerをインストールして、エディターを準備しよう | マインドステージ
エディターとは？ エディターとは、HTMLやCSSなどのコードを書くためのツールです。 HTMLでは、Windowsであれば「メモ帳」Macであれば「テキストエディタ」等でも作成することができます。 但し、コード補完やサーバーにアップロードする機能などの便利な機能があるエディターを使用することをお薦めします。 Web Makerとは？ 今回、この初級編では「Web Maker」というエディターを使用していきます。 実際に、サイトを構築するに当たっては使用することは少ないかもしれませんが、初心者がコードに触れるという場合には素晴らしいツールですので、今回はこのエディターを使用していきます。 Web Makerは、Google Chromeの拡張機能です。 したがって、この記事を進めていくには、「Google Chrome」が必要となります。 Google Chromeをまだインストールしてい
【みんなの知識 ちょっと便利帳】パソコンの、現在のウィンドウサイズ[画面サイズ]を調べる
現在のウィンドウサイズ ② [ ＊画像説明 ② ] (スクロールバーを含み、メニュー・ステータスバーなどを除く)
無料テンプレート｜CSSリキッドレイアウト 3カラム グローバルナビゲーション
Home > 無料テンプレート (X)HTML+CSSテンプレート枠 テンプレートはレイアウト枠のみの配布となります。段組は最もポピュラーな floatレイアウト です。 個人のホームページから企業サイト、ネットショップ、アフィリエイト用のサイトまで無料でご利用いただけます。素敵なウェブサイトにして下さい。 ご利用前(ダウンロード前)に「利用規約」を必ずお読み下さい DOCTYPE テンプレート枠はスタイルシートで段組してあります。下記のDOCTYPEを用意してあるので、ご自身のレベルにあったテンプレートをダウンロードして下さい。 HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUB
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ
ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。 どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。 詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーションエフェクトまとめ 01. 文字を上からスライド表示 See the Pen #1226 – Horizontal menu with slide down on hover by LittleSnippets.net (@littlesnippets) on CodePen. マウスホバーすることで、上からスライドするアニメーションエフェクト。 02. 文字を下からスライド表示 See the P
これは便利！CSSボタンデザインジェネレーター厳選７個
ホームページを作成していると、 ボタンを使う事も多々あると思います。 今までは画像を作成して使用していることが 多かったと思いますが、 現在はCSSでの表現方法を利用する方が多くなってきているのかなと思います。 そこで、今回はCSSでボタンを作るために役立つ とっても便利なCSSボタンデザインジェネレーターを 厳選して７個ご紹介させて頂きます。 既にご存知の方の方が多いかもしれませんが まだ利用した事がない人のためにまとめてみましたので 是非ご覧頂ければと思います。 Button Maker 色の調整や角丸の設定など終わったら、 ボタンをクリックします。 そうすると、設定したボタンのcssコードが表示されますので、 スタイルシートに貼り付けて使えます。 ⇒ Button Maker CSS Button Generator for your pleasure 色の設定や角丸の調整などの他に
CSSだけでツールチップを実装出来る「Balloon.css」の使い方
Balloon.cssとは Balloon.cssは、JavaScriptコード不要で、ツールチップをHTML要素に表示させることができるピュアCSSライブラリです。 CSSを読み込んで、要素の属性をちょこちょこっと書くだけで簡単にツールチップを実装することができます。 例えば、以下のようなツールチップを手軽に利用できます。 Balloon.cssを利用する主な手順 Balloon.cssを利用するには、以下のような手順が必要です。 Balloon.cssをダウンロード＆設置 CSSを読み込む HTML要素を書く 単に、CSSを読み込んで、HTML要素に属性をつけて書くだけなので、かなり簡単だと思います。 Balloon.cssをダウンロード＆設置 まずは、kazzkiq/balloon.cssに移動して「Download ZIP」ボタンを押してダウンロードをしてください。 「balloo
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
2015年のWEBサイトはフルサイズリキッドデザインで行こう。 | コラム | ホームページ制作 大阪 インフォメーションメディアデザイン株式会社
WEBサイト制作 2015.01.13 2015年のWEBサイトはフルサイズリキッドデザインで行こう。 2014年に公開された企業サイトの中にはフルHDを活かしたリキッドデザインを採用したWEBサイトを見受けられました。 まだまだ数は少ないですが、IMDでも「フルHD解像度を最大に活かしたWEBサイトをどのタイミングで実装すべきか」で議論が起こりました。 そこで現状のユーザー環境調査とこの1年でユーザー環境がどう変わるかを検討してみました。 現在のユーザー解像度調査 下記はIMDのアクセス解析での現在のモニター解像度比率です。 １番多い解像度は「1366×768」HD解像度。2008年～2010年に主力販売されていたノートPCだと思います。私が2010年に購入したMac Book Airもこの解像度になります。 他のサイトでのユーザー解像度調査を行った結果、下記主力解像度になります。 これ
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
機能別にまとめたCSS3ジェネレーター28選 - ウェブ学のすすめ
スマートフォンサイトでCSS3を使うことが多くなりますが、今までのCSSに比べブラウザごとにベンダープレフィックスを記述するなど作業量が増えてしまいます。そこで少しでも作業量を減らすためにジェネレーターを活用することをおすすめします。今回は簡単にCSS3を適用できるジェネレーターを機能別にまとめてみました。 多機能型：6個 日本語対応。Photoshopのようなジェネレーター CSS3プロパティジェネレーター | CSS-EBLOG シンプルなジェネレーター CSS3 Generator 10種類も設定ができるジェネレーター CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator リアルタイムプレビューが可能なジェネレーター CSS3 Playground by Mike Plate Photoshopのレイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
designnow.net - テンプレート 無料 ウェブデザイン 素材 ダウンロード リソースおよび情報
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
パパ活アプリ・サイトおすすめ人気ランキングをP活女子に取材❤️【安全・初心者向け】
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
