[B! html][css] zuzu_sionのブックマーク

zuzu_sion id:zuzu_sion

htmlとcssに関するzuzu_sionのブックマーク (12)

便利なのが登場！最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
zuzu_sion 2023/01/19
animation

html

font

便利

css

image

ui

ボタン

デザイン
リンク
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。超軽量4.8KbのCSSフレームワーク。用意するのは、HTMLファイルのみ。マークダウンで生成されたHTMLのレンダリング。シンプルなブログや自己紹介ページに最適。MITライセンスで、商用プロジェクト
zuzu_sion 2020/08/31
助かった。ある簡素な改修案件でこれメモっていたのでさくっと対応できた。

css

html

Theme

web

ブログ

あとで読む

フレームワーク

framework

simple

server
リンク
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
zuzu_sion 2019/08/21
inputmode属性って便利だよね。もちろんこれじゃバリデーションには使えないけど、操作感は良くなるよね。

css

input

form

html
リンク
これなら簡単で便利！最近見かけるCSSのさまざまなコンポーネントをコピペで利用できる -CodyHouse Framework
HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。 CodyHouse Framework 2.0 CSSベースの軽量フレームワークアクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。さまざまなコンポーネント HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。実装もカスタマイズも簡単コピペで利用でき、既存のCSSルールを上書きする必要はありません。モバイルファーストすべてのコンポーネントは、モバイルファーストで実装されています。プ
zuzu_sion 2019/07/03
css

サンプル・スニペット

javascript

便利

framework

webdesign

html

あとで読む
リンク
コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB
動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。tの文字にも注目Twitter Button Concept 遊び心があるボタンです。隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。
zuzu_sion 2018/06/29
css

ボタン

クリック

webデザイン

html

webdesign
リンク
非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita
はじめに普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。手順デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。実際に作ってみる。おしゃれなサイトを探して研究する個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
zuzu_sion 2016/01/29
webサイト

design

webデザイン

デザイン

CSS

html

web

便利情報
リンク
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル︵見出し︶のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
zuzu_sion 2015/10/07
見出しテンプレの決定版的な記事だね。

css

見出し

html

デザイン

webデザイン
リンク
Bootsnipp
Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework What is this? Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft. Stay updated, Subscribe to Bootsnipp mailing list (only important updates will be sent, your em ail is never shared or sold to anyone else)
zuzu_sion 2015/09/30
Bootstrap

Snippet

web制作

web

css

webdesign

html
リンク
株式会社Qript　グループ統合に関するお知らせ
このたび弊社を含む Penseur︵パンスール︶グループ傘下の事業再編にともない、2022年4月1日をもって、株式会社Qriptは株式会社Penseurへ吸収合併され、新たな歩みを進めることとなりました。 2000年に創業し本日に至るまで、多くの皆様からのご愛顧に対し、社員一同、深く感謝するとともに心より御礼申しあげます。なお、弊社の既存事業・業務はすべて株式会社 Penseurにて継続してまいります。事業再編により、新たな体制をもって総力を結集することが可能となり、今後さらに高付加価値のサービス提供が可能になると考えています。今後も皆様のご期待に添えますよう全力を尽くしてまいりますので、引き続き、何卒ご指導ご鞭撻を賜りますようお願い申し上げます。 2022年4月1日株式会社Qript 代表取締役寺嶋正浩株式会社Qript　グループ統合に関するお知らせ︵PDF︶ ※株式会社Qr
zuzu_sion 2015/09/30
ajax

css

Bootstrap

Validation

form

html

php

javascript

framework

FuelPHP
リンク
ペライチも複数webページもすばやく作り始められるやつ「Rin 4」作った - MEMOGRAPHIX
Rin 4 というのを作った。 Rin 4 - A lean, gulp-based HTML and SASS boilerplate by sanographixRin 4 は﹁ペライチのWebページをすばやく作り始められるboilerplate﹂である Rin3.0 をアップデートしたもの。 Rin は、僕が普段 web サイト制作時に使っているフレームワークというかBoilerplate的なやつです。CSS の汎用コンポーネントをできるだけ持たないフレームワークを目指していて︵ペライチとかだと結局各サイトでデザインの要件が大きく異なる場合が多いため︶、環境構築だけ gulp ですばやく行うことに特化してつくっている。バージョン4の新機能Rin 4 では、複数ページが素早くつくれるようになった。今までペライチのサイトばかり作っていたんだけど、そうでなく複数ページ作るときも使えるよう
zuzu_sion 2015/09/29
css

レスポンシブ

html

web

フレームワーク

js

Web制作

webデザイン

あとで読む

tool
リンク
テキストエディターを作ってElectronの基礎を学ぼう！ HTML5でPCアプリ開発入門 – ICS MEDIA
前回の記事﹁Electron入門﹂では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。今回は応用サンプルとしてテキストエディターの作り方を解説します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。30分程度で試せる内容になってますので、ぜひご覧ください。 ※本記事はElectron v18を使用し、macOS 12.3 MontereyおよびWindows10にて動作検証を行いました。完成デモの紹介今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、ファイルの読み書きができます。このテキストエデ
zuzu_sion 2015/08/19
いつかやる。

css

html

アプリ

electron

あとで読む

HTML5

js
リンク
HTML/CSSのテンプレートがダウンロードできるWEBサイトのまとめ「25 Best Websites For Downloading Free Html/CSS Templates」
HTML/CSSのテンプレートがダウンロードできるWEBサイトのまとめ「25 Best Websites For Downloading Free Html/CSS Templates」 WEBを制作する際、HTMLとCSSを利用して作ると言う方が多いかと思いますが、今日紹介するのはフリーで利用できるHTML/CSSのテンプレートがダウンロードできるWEBサイトをまとめたエントリー「25 Best Websites For Downloading Free Html/CSS Templates」です。 Free-Css-Templates 様々なテンプレートサイトが集められていますが、今日はその中からいくつか気になったものを紹介したいと思います。詳しくは以下 ■25 Best Websites For Downloading Free Html/CSS Templates HTMKだけで
zuzu_sion 2010/02/19
webdesign

テンプレート

html

css
リンク
1