[B! HTML] zuzu_sionのブックマーク

zuzu_sion id:zuzu_sion

HTMLに関するzuzu_sionのブックマーク (19)

便利なのが登場！最近見かけるさまざまな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

ボタン

デザイン
リンク
Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
こんにちは丸山@h13i32maruです。僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。︵訳: 楽しかったので、誰かに聞いてもらいたい！︶エディタの概要メンテしやすいテキストパーサ - PEG.js メンテしやすいH
zuzu_sion 2021/07/09
テキストエディタ作りって楽しいよね（白目

テスト

testing

html

editor

javascript

react.js
リンク
シンプルな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
リンク
情報処理技術者試験なんて何の役にも立ちません
情報処理技術者試験の資格を取っても実質的に得るものはありません。﹁実質的に﹂というのは、技術者としてのスキル向上に貢献するということであり、﹁報奨金が貰える﹂とか﹁履歴書に書ける﹂などの技術と無関係なものを含まないということです。なぜ、情報処理技術者試験が役に立たないのかと言えば、出題内容が表面的な知識問題に極端に偏っており、本質的な理解を問うていないからです。たとえば、オブジェクト指向の三要素に﹁カプセル化﹂﹁継承﹂﹁ポリモルフィズム﹂がありますが、これらを御題目のように唱えていても何の意味もありません。しかし、情報処理技術者試験ではこれらの用語さえ覚えておけば、しっかり点になります。オブジェクト指向におけるカプセル化を説明したものはどれか。同じ性質をもつ複数のオブジェクトを抽象化して，整理すること基底クラスの性質を派生クラスに受け継がせることクラス間に共通する性質を抽出し，基底
zuzu_sion 2020/05/26
いや用語を知っていると知らないのでは雲泥の差だよ。好きな言語でクオリティ高いプログラムを書くだけが情報技術の仕事じゃないぞ。。これは運転免許みたいなものでこの中の単語は知っているかの確認。

技術

uml

情報

html

資格

情報処理技術者試験
リンク
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
リンク
イイウェブ | ツールに頼らずSassが使えるコンパイルサーバー Static Site Generator
ありそうでなかった新サービス。自分だけのお気に入りの環境で作業効率をアップ！ツールに頼らずSassが使えるコンパイルサーバーデモページ iiweb（イイウェブ）は、2020年3月31日をもちまして、サービスを終了させていただく運びとなりました。サービスをご利用いただいたお客様にはご不便をおかけし誠に申し訳ございませんが、何卒ご了承いただきますようお願い申し上げます。今までご愛顧いただいた皆さまには心より感謝申し上げます。サービス終了までのスケジュール2019年10月1日新規会員登録、有料プランへの申し込み停止 2019年11月30日有料プランからのプラン変更停止 2020年03月31日サービス終了 ※スケジュールは一部変更となる場合がございます。
zuzu_sion 2018/04/16
ツール

テンプレート

Sass

static

html

web制作

技術

サーバー

イイウェブ
リンク
朝専用ダッシュボード onTV #powered by RaspberryPi and Dashing - Qiita
はじめになんで朝の情報テレビ番組って、あんなに面白いんですかね？つい時間を忘れてガン見・・・ち・ち・遅刻・・・。なので、﹁朝専用ダッシュボード﹂を作りました。これでテレビを見ずに最低限の情報をゲットできます。左上からデジタル時計路線運行状況︵横浜在住︶ Googleニュース(エンタメ) 今日の天気︵午前|午後︶週間天気白地に黒文字でスタイリッシュに。下の方にラズパイがぶら下がってるのが見えます。#スタイリッシュｗ少し古いですが、黒背景バージョンもハード RaspberryPi3 TV HDMIケーブルソフト raspbian‥2017-09-07-raspbian-stretch Dashing Dasing ここで今回使うメインのダッシュボード(KIOSK/サイネージ)フレームワークを紹介します。本来の﹁Dashing﹂もっとカラフルです。本家のサンプルを見る
zuzu_sion 2017/10/22
自作の個人用デジタルサイネージですね。もっと薄いLCDパネルで再現して壁に貼りたい。。。

●ruby

●ソフト

●html

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

design

webデザイン

デザイン

CSS

html

web

便利情報
リンク
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Progateはオンラインプログラミング学習サービスです。﹁初心者から、創れる人を生み出す﹂ことが、私たちの理念です。プログラミング初心者のハードルを出来る限り取り払うこと、そして本当に創れるようになるレベルの高い学習を提供することを目指しています。
zuzu_sion 2015/10/21
プログラミング

学習

勉強

service

無料

programming

Webサービス

web

PHP

HTML
リンク
シンプルな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
リンク
WordPressテーマ Minimal WP | シンプル＆おしゃれな日本語テンプレート
Minimal WPテーマはデザインも機能も圧倒的に「ミニマル（最小限）」なので面倒な設定が全く不要。初心者の方でも「画像アップロード」「ドラッグ＆ドロップ」「コピペ」くらいの簡単操作だけで自分でホームページを作ることができます。万が一、初期導入で分からないことがあっても、30日間の無料メールサポート付きなので安心です。
zuzu_sion 2015/09/28
webデザイン

wordpressテーマ

カスタマイズ

web制作

wordpress

webdesign

テーマ

無料

html

テンプレート
リンク
Free “Coming Soon” Page Template with Countdown Timer
2013年3月25日ダウンロードページを開くと、無機質な﹁メンテナンス中﹂の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの﹁準備中ページ﹂テンプレートをご用意しました！ご自由にお使いくださいませませ。 ↑私が10年以上利用している会計ソフト！ダウンロードデモ仕様無料商用サイトでの利用可日付設定するとカウントダウン可能 Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済タイマーの設定タイマー設定は index.html の <head></head>内にある $(function () { $('#countdown').countdown({until: new Date(2013
zuzu_sion 2015/09/16
テンプレート

web

htaccess

Template

web制作

準備中ページ

Webデザイン

html

.htaccess

メンテナンス
リンク
テキストエディターを作って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