その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量(4kB)CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
自作したスクレイピングツールで画像をあつめたい 現在開発中のアプリケーションで、エフェクターボードの画像が100枚くらい欲しかったので、Google画像検索から画像を集めることにしました。 画像収集は機械学習などでかなり需要があるらしく、自作せずとも利用可能なツールがいくらかあるようです。 GitHub - hardikvasa/google-images-download: Python Script to download hundreds of images from 'Google Images'. It is a ready-to-run code! 画像クローラー - Qiita せっかくですが、rubyではWebスクレイピングするようなプログラムは書いたことがなかったので、自作してみることにしました。 nokogiriかSeleniumか rubyでスクレイピングをする場合、
スクレイピングとは Webサイトから自分の知りたい情報を抽出すること。 ex) 文章、画像、動画など 今回の目標 Qiitaで「ruby」と検索して「いいね順」に並べた検索結果一覧をスクレイピングします。 1. URLのパスパラメータ・クエリパラメータを理解する スクレイピングをするにはURLのパラメータについて理解する必要があります。 「そんなん余裕で知っとるわ!」という方は飛ばして次章へどうぞ! パラメータの種類 URLでドメイン以降の/で区切られたパス1つ1つがパスパラメータです URLの?以降がクエリパラメータです(複数記述する場合は&で繋ぎます)。 例えばこのURLは。 https://qiita.com/search?page=1&q=ruby&sort=like 以下のパラメータになります。 種類 パラメータ名 パラメータの値
nokogirirはHTMLドキュメント解析 mechanizeは「シンプルログイン」認証突破 「シンプルログイン」の個人的な定義は、「フォームにIDとパスワードを入力してログインボタンをクリックしてマイページへ!」みたいなサイトです。 「え?逆にそれ以外何があるの?」最近よくあるじゃないですか、IDを入れたらパスワード入力フォームが現れたり、ログイン時にページが動的に動くサイト。そういうサイトでもmechanizeで認証とれるかもしれませんが、個人的に私はすぐに諦めます。そういうサイトはすぐにselelniumに移行します。 「すぐ諦めたら、力つかないよ!」確かに一理ありますね。しかし私はスピードとストレスと全体的なコストを比較して、「シンプルログインサイト以外はseleniumに即移行!」とすることにしました。 nokogiriの基本的な使い方 Webページ「https:// ○○○.
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが(個人的には)どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
仕事でHTMLコーディングする人の約7割が、Sass(SCSS)を使用しているという調査結果があるように、コーディングする上でSass(SCSS)は欠かせない便利なものとなってきています。今回はSass(SCSS)の基本情報からメリット・デメリットもふまえて紹介していこうと思います。 Sassとは? まず、Sassを使ったことがない方に向けて、簡単にSassの使い方を説明します。Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。 SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSS
ページ変数の .NextInSection や .PrevInSection を使用すると、同じセクション内の次のページ、前のページを参照することができます。 同じ階層にある「前のページ」「次のページ」へのリンクを表示する下記のテンプレートコードは、前のページへのリンクと、次のページへのリンクを表示するシンプルな例です。 テンプレートコード(抜粋) {{ with .PrevInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} {{ with .NextInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} Page 変数の .PrevInSection や .NextInSection には、同じセクショ
僕はプログラマだ。 だが仕事はフロントエンドとOSの間のあたりを主にやっているため、HTMLやJavaScriptのとこらへんは長らく触ってこなかった。 それに、仕事では古くてカビの生えたものをずっと使い続けているから、2000年代初期のテーブルレイアウトとfunctionだらけのJavaScriptを触ってきていた。 プライベートのプログラミングタイムも、レイヤーが低い部分、例えば通信とか形態素分析とかやったり、なにか必要なものがあればコマンドでの形で済ませたりする。 たとえWEB画面が必要でも、軽くjQueryで済ませるような簡単なものしか作ってこなかった。 最近、故あってプライベートでvue.jsというフレームワークをさわることになり、一気に現代に引き戻されることになった。 感想:全然知らない言語で新しいもの作ってる感じ 最近のフロントエンドを見た古代人の感想 古代人のフロントエンド
tr:nth-child(even)または、tr:nth-child(2n)で偶数行の背景色を灰色に変えられます。 html <table class="s-tbl"> <tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr> <tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr> <tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr> <tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
スクレイピング等を行う場合、スクリプト言語が大きく威力を発揮します。 例えばブログの様にタイトルと本文の組が反復される様なページをスクレイピングする場合 URLからHTMLを得る HTMLからDOMオブジェクトを得る エントリとなるDOMノードを検索する エントリノードでループする エントリノードからタイトルとなるDOMノードを探索しテキストを得る エントリノードから本文となるDOMノードを探索しテキストを得る この様になるかと思います。こういった処理を一般的なコンパイル型言語を使って実行しようとすると エラーチェック 反復処理 検索処理 といったコードをゴリゴリ書かなければいけなかったりします。もちろんそれ専用のライブラリを使えば出来きますが、コンパイル型言語ではなかなか良い物がないのは事実です。javascriptに到っては jQuery を使えば簡単に出来ますが、コンパイル型言語向け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く