そろそろHTML6とCSS4の話を。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの代表のゴウです。 LIGでは毎年アドベントカレンダーなるものをやっていまして。 「今年はゴウさんもなんか書いてくださいよー」 とエンジニアのまさくにに言われたので、よっしゃ、待ってましたとばかりに書いております。 アドベントカレンダーはもともとエンジニア界隈の風習らしいので、テーマもそういったテクノロジー系が喜ばれるみたいですね。テクノロジーかー。俺が書けるテクノロジーの記事なんてあんまないので、ここはあいつに聞いてみましょう。 というわけで、LIGのCTOであるづやを呼び出しました。 こいつだったら最近のWeb業界の流れとかテクノロジーとか知ってるでしょう。 ぜんぜん関係ないですけど、づやの実家はこちらです。電気屋をやっていて、彼は長男なのでいずれ継がないといけないのですが、どうするんでしょうか。我が地元、長野県信濃町も過疎高齢化が進み、他の地域と同じで後継者問題は重
使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが（個人的には）どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
SPA向けのCSS設計 - COCSS - Qiita
Component Oriented CSS CSSをもっと便利に使うための努力 CSSの歴史は、言うまでもなく長いです。 テーブルレイアウトの時代から使われ、テンプレートエンジンの時代を経て、JSが定着した最近はフレームワークやライブラリーなどにテーマが移っています。 もはやウェブ開発者・ウェブデザイナーと言う概念から、FE・BE、細かい場合はマークアップエンジニアなど、専門的かつ細分化になっています。 CSSも、専門のエンジニアが活躍する場合もあるくらいです。 こういう流れとともに、CSSの構造に関しても様々な工夫が行われてきました。 代表的には下記の例があります。 OOCSS BEM SMACSS FLOCSS RSCSS 各例の概念と、不便なところだけ軽くチェックします。 経験者の方は、共感するところもあると思います。 既存の設計、これが不便だった 1. OOCSS コンテナーとコ
Responsive Designs And CSS Custom Properties: Defining Variables And Breakpoints | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really help
CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。 今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。 CSS Remedy -GitHub CSS Remedyの特徴 CSS Remedyのコード CSS Remedyの特徴 CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。 CSSリセットの今までの流れ 何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。 初期のリセットではすべて
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人？ | HRナビ by リクルート
90年代後半から2000年代にウェブ制作を経験した者なら『とほほのWWW入門』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLやJavaScript、Ruby、Pythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはずだ。 2016年10月を最後に更新がされていないようだが、それでも20年間コンテンツを出し続けるのは、かなり大変なことだったのではないか。同サイトの管理人・杜甫々（とほほ）さんは、いったいどのような人物なのか。サイトを開設したきっかけやインターネット初期の空気感などについて、話を聞いた。 「とほほのWWW入門」管理人・杜甫々さんとは？ ――今回は取材に応じていただき、ありがとうございます。杜甫々さんは
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
CSSでデザインする基本テンプレートを56個集めた「100 Percent Pure CSS Layouts」
TOP > WebDesign > CSSでデザインする基本テンプレートを56個集めた「100 Percent Pure CSS Layouts」 前回「代表的な12のCSSレイアウトテンプレートを配布する「Nice and Free CSS Templates」」という記事でCSSで作られた基本のセットともなるテンプレート集をお伝えしましたが、今回紹介する「100 Percent Pure CSS Layouts」もそんなベースのレイアウトになりうるテンプレートを集めたCSSテンプレート集です。 名前の通り100パーセントCSSだけで作った、デザインはいっさい無しでレイアウトだけ区切っているテンプレートをひたすら集めています。 詳しくは以下 750px、900px、または100%とワイドのサイズ違いで、カラムの大きさを調整したテンプレートが並んでいます。CSSはサムネイルのレイア
スペシャルベスト
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fonts正式版に日本語がやってきた！ | バシャログ。