ituore.com 2024 著作権. 不許複製 プライバシーポリシー

このポストはCSS Modules — Solving the challenges of CSS at scaleをそれとなく意訳したものです。何か間違いなどありましたらご指摘いただけると幸いです。 （以下、意訳） 1996年にCSS1が公表された時、仕様の意図するところはドキュメントの内容から、ドキュメントの見た目を分離させることでした。仕様の中で最も重要となる単語は"ドキュメント"でした。当時のWebは、まだ主流ではなくコンテンツはドキュメントベースでした。スタイルシートの存在は今日に比べたらまだ小さく、いかなる保守的な負担もスタイルの分離による莫大なメリットによって、容易に相殺されました。 モダンなWebにおいては、私たちはドキュメントという文脈で内容を考えることはほとんどありません。モダンなWebは、高度に動的で派手なWebアプリケーションによって占拠されてしまいました。100個

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

2016 - 02 - 04 「ググれカス！」と会議中に人生で初めて言われたときの話 ライフスタイル Twitter 数年前のこと、会社の会議室で僕はただただ立ち竦んでいた。 出席者は10名程。 皆僕と同様に口を噤んでいる。 次の展開を伺っている、そんな雰囲気。 しんとしている中に、聞こえてくる貧乏ゆすりの音。 この状況を作った男のものだ。 彼は、怒って、いや、キレていた。 眉間にしわが寄っているその表情からも、怒りがひしひしと伝わってくる。 どうやら本気のようだ。 少しも笑いは、ない。 「 ググれカス！！！ 」 この状況になったきっかけは、彼の放ったその言葉。 「ググれカス！」が現実世界にやってきた その言葉は、僕に向けられたものだった。 「 ググれカス！！！ 」と、完全に、怒鳴られた。 もちろん、その言葉の意味は知っていた。 ググレカスであり、 Gugurecusではなく、 ggrks

BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 モダンなブルマとかどういうことなのって思ったのですが、調べてみるといわゆる旧女性用運動着のスペルはbloomerで、本フレームワーク名のBulmaはドラゴンボールのブルマの綴りらしいです。画像検索したらブルマが「Bulma」って書かれたキャップをかぶっていました。ムダ知識が増えてオラわくわくしてきました。よく見るとアイコンもブルマの色に似ているかも・・・と思いましたが特にそういった言及はありませんので、ドラゴンボールでもなんでもない全然関係ない由来だったらすごくごめんなさい。ライセンスはMITとの事。 Bulma

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

はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http

Stretchy Navigation A rounded navigation trigger that stretches on click/tap to reveal the navigation items. While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦

作成：2015/11/16 更新：2016/08/01 Web制作 > 初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「プログラミングの時は何を使う、これで練習する」といった感じで決めておけば、プログラミングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。 エンジニア速報は Twitter の@commteで配信しています。 学んだプログラミングやソースコードを管理・反復練習する プログラミングに関する書籍を何冊も読みこんで理解しても、何回ノートを見返しても、普段検索とコピペで済ませていると、いざとなったら全然プログラミングできないです。筆者は泣

先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画） セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。 黎明期 プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。 BootstrapのようなCSSフレームワークからCSSを始めると、floatやpositionのようなレイアウトに関わるプロパティがどういうものなのかを知らなくても、何となくでWebアプリのレイアウティングができる。 そしてブラックボックス化されたBootstrapのコードを読もうとして

A powerful desktop app for creating responsive websites using the Bootstrap framework. Run Browser Demo Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic

最近のWebページで人気のある縦長ページ、CSS3アニメーション、スクロールエフェクト、大きい写真画像を使った背景、カードコンポーネントなど、UIデザインのトレンドを取り入れたBootstrapのテーマを紹介します。 Bootstrap 4ベースのものもリリースされ始めました。

マウスオーバーでクルッとするボタン 画像もJavaScriptも使わずに、HTML＋CSSのみでクルッと回転するようなエフェクトの発生するボタンの作成方法を紹介します。（使用例： ニュースページ、地図ページ） ニュースページのカテゴリナビゲーションです。もともと英語で表示しているテキストを、マウスオーバーでくるっと日本語に入れ替えています。CSSを工夫して用いれば、このように要素内のテキストを動かすことも可能になります！ 実際につくってみよう！ 上述のスライドアウトインする画像と同様で「transition」というCSS3プロパティを用い、マウスオーバーでのCSSプロパティの変化にアニメーションを加えています。サンプルコードを以下に用意しました。 CSSでクルっとするボタン - jsdo.it - share JavaScript, HTML5 and CSS CSS3を用いて作成したマウ

SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="

こんなん作りました. Runstant Runstant って？ ログイン不要でアクセスした瞬間からプログラミングを始められる エディタ & プレビューツールです. 名前は, run + instant からの造語で, インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました. 特徴 instantly code ログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. instantly run コードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより