CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
JavaScript初心者にもオススメ！クリーンなコードでHTMLを拡張する「Stimulus」とは？
HTMLやCSSは得意だけれど、JavaScriptは苦手…という方は、多いのではないでしょうか。HTMLやCSSは書き方がある程度統一されていますが、JavaScriptは数えきれないフレームワークやライブラリがあるので、どれを使えばいいのか迷ってしまいます。 そのような方にこそおすすめしたいのが、StimulusというJavaScriptライブラリです。 今回は、*クリーンなコードでHTMLを拡張する「Stimulus」*の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。 Stimulusとは？ Stimulusは、世界的なプロジェクトマネジメントツールBasecamp(旧37シグナルズ)を開発しているメンバーによって開発されているフレームワークです。 JavaScriptはフレームワークだけでも、Angular.JSやReac
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
ProseMirror
Rich content editors should, ideally, produce clean, semantically meaningful documents while still being easy for users to understand. ProseMirror tries to bridge the gap between editing explicit, unambiguous content like Markdown or XML, and classical WYSIWYG editors. It does this by implementing a WYSIWYG-style editing interface for documents more constrained and structured than plain HTML. You
フロントエンドの未来の話 - Qiita
前置き 会社の勉強会資料になります（6/16発表） フロントエンドの未来の話というか、色々なライブラリの紹介です ほとんどが5月上旬くらいに書いた資料なので、 それ以降に変化があったライブラリについては、追記という形で資料の中にコメント入れてます モジュールバンドラーの未来 モジュールバンドラーとは簡単に言うと、JavaScriptのビルドツールのことです 最近はフロントエンドでも、機能ごと・共通化などの理由によって、JSファイルを分けてコーディングをするので、 最終的にそれをまとめて、1個のJSにする必要がある その時に使われるのが、モジュールバンドラー 有名どころのツール みんな大好きwebpack 後は、rollupとかbrowserifyとか ですが、、 これからの時代は fuse-box fuse-boxとは webpackと同様なモジュールバンドラー 設定ファイルがシンプル w
Mavo: A new, approachable way to create Web applications
A new, approachable way to create Web applications Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend. Developed in the Haystack Group at MIT CSAIL and led by Lea Verou. Get Mavo What is Mavo? Mavo extends the syntax of HTML to describe Web applications that manage, store, and transform data. Store data in the
HTMLページのチェックボックスがチェックされているか取得する (JavaScript プログラミング)
JavaScriptでチェックボックスがチェックされているか取得するコードを紹介します。 概要 JavaScriptでチェックボックスがチェックされているか、チェックされていないかを確認したい場合があります。 チェックボックスのチェック状態を取得するには、チェックボックスオブジェクトのcheckedプロパティの値を参照します。 フォーム内のチェックボックスをname、idで指定して取得する場合 書式: id属性で指定する場合 チェックボックスのチェック状態をidで参照する場合は次の書式で記述します。 コード 以下のコードを記述します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut
awsm.css - 標準タグのみを使った綺麗なデザインフレームワーク MOONGIFT
HTMLタグにはそれぞれに意味があります。その意味を活かしたデザインを行うことで、SEOのようにコンピュータはもちろんスクリーンリーダーなどでも使いやすいコンテンツに仕上がります。 しかし多くの場合、デザイン上の理由で全く関係のないタグが使われることがあります。そこで使ってみたいのがawsm.cssです。 awsm.cssの使い方 awsm.cssはクラスの指定もない、準ず否HTMLタグだけをデザインするフレームワークです。 まずはトップページ。 リスト。 テーブル。 インラインの装飾。 メディア。 フォーム。 awsm.cssはタグに余計な設定はいりませんので、プロトタイプなどを作る際に重宝しそうです。デフォルトのタグに設定が追加されてしまうので、細かいカスタマイズをしようとすると予定していなかった設定が入ってきてしまうかも知れません。 awsm.cssはCSS製のオープンソース・ソフト
スマホサイトで使えるコピペTips集(Javascript / CSS3 / HTML5) | hi-posi Front-End blog
※ほぼ備忘メモで説明をかなり省いているので、ある程度制作知識のある方向けのエントリーです。 ※JavascriptはjQueryを使う場合が多いので読み込んでいる前提です。 目次 振り分け系 ユーザーエージェントを判別する ページを横幅320pxに合わせて拡大(zoom)する 画面の回転（Landscape-Portrait）イベントを取得する 現在Landscapeモードか、Portraitモードかを調べる スクロール制御系 タップするとページの一番上にスクロールで戻る タップすると指定したidの位置までスクロールで戻る タップすると指定した位置までスクロール無しで戻る iPhoneのSafari(iOS7含む)でスクロールを禁止する タッチ制御系 タッチ開始を検知する タッチ中を検知する タッチの終わりを検知する フォーム制御系 フォームのラベルのタップを有効にする フォームのペース
First step CSS - Section 4
今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。 <DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる。 ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。 <DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。
関数型なAltJS、PureScriptの入門書を邦訳しました。 - Qiita
2018/4/30 追記： 古くなっていたこちらの邦訳ですが、プルリクエストを頂き最新版PureScript v0.11に対応しました。本当にありがとうございました。 Haskellライクな関数型プログラミング言語PureScriptの入門書、"PureScript By Example"を邦訳しました。本書はPureScriptのオリジナルの作者であるPhilさん本人が執筆した入門書です。本書を理解するにはJavaScriptを知っていることが望ましいですが、そうでなくともすでに何らかのプログラミング言語を知っていれば読みこなすことはできると思います。PureScriptはHaskellを始めとした多くの関数型言語と様々な考え方を共有していますから、PureScriptという言語そのものを学ぶという目的でなくとも、関数型プログラミング全般についての入門としても読むにも適しています。無料で
Webサービス作るの難しすぎるよう... - 旧gaaamiiのブログ
こちらの記事。盛り上がってますね。 今すぐ辞めて欲しい、「Ruby on Rails勉強してます」「CakePHP勉強してます」 正直、「背伸びのしすぎ」としか言い様がない。要らない知識を取得するために必要な知識を修得するための時間を捨てているようにしか思えない。GETとPOSTの違いもわからない人が、ルーティングやらフォームの自動生成やら使えるわけがない。 こういうのってけっこう頻繁に盛り上がるようなものなのか、２００８年にも、モバツイの開発者えふしんさんがはじめてWebプログラミングをするなら PHP? Ruby?という記事で似たようなことを書いてます。 Ruby on Railsが10分でWebアプリができた！的な話はあまり好きではない。フレームワークは、まだ行間を読めない初心者が簡単にWebアプリを作るためのものではない。 どちらも、初心者が基本的な技術そっちのけでブラックボックス
編集後記#001 HTML文法の復習 - 朽木誠一郎 の あまのじゃく日記
各位、編集・ライティングする際にHTML文法を意識していますか。僕も数年ほどライターとして活動していたのに現職までノータッチだったポイントですががが。 かつてはテキストファイルで入稿する形式が主だったし、WordPressのアカウントがライターにそれぞれ発行されるようになって以降も、HTMLについてライターに教育するメディアはあまりなかったように思う。むしろWordPressのテキストモードには切り替えない（ビジュアルモードと入れ替えるとたまにバグるから）ことが運用ルールだったメディアもあるほどだ。<b>で太字にさえできればよかった古き良き時代です。 HTMLとはなにか、HTMLでなにができるのかは割愛する。そこからよくわからないという場合は下記記事をご一読ください。 liginc.co.jp liginc.co.jp HTML文法がよくわかっていなくてもライティングはできるけれども、改行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
GitHub - oxalorg/sakura: :cherry_blossom: a minimal css framework/theme.
wikihub.io
Learn to Code HTML & CSS
https://www.ituore.com/entry/html-css-basic
A Pen by KIMURA Tetsuro
JavaScript テンプレートエンジン vs DOM 直接操作
