シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルな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
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
WordPressが使いにくいなら静的サイトジェネレーターを使えばいいじゃない｜meow｜note
本格的にブログを作るならWordPress、というのが合言葉になりつつありますが、みなさんWordPress好きですか？わたしはめっちゃ嫌いです。理由は以下の通り。 使いづらい（管理画面わけわかめ、重い、定期アップデートが面倒） コスパが悪い（無料テンプレートが雑魚、有料コンテンツが多い） 自由度が大して高くない（最新サービスの反映が遅い、フォークできない）かと言ってフルスクラッチでブログを作るのは悪手です。ページを増やすたびにhtmlファイルを作って、記事一覧をひとつずつずらして...この面倒くさい作業をぜんぶやってくれるのがWordPressや静的サイトジェネレーターです。 （追記）フロントエンドエンジニアやWebデザイナーの方でもWordPressやめて静的サイトジェネレーターに移行したよ！という声も多く。誰でも簡単に便利に、が謳い文句のWordPressの便利さ簡単さが何回使っても
阿部寛のホームページ並にはっや～い！ FC2ブログ、一瞬でブログが開く「爆速テンプレート」を開発
ブログサービス「FC2ブログ」に、「爆速テンプレート」が導入されました。これを利用して制作されたブログは、「回線が速度規制中でも一瞬で開くほど軽い」ことで有名な、「阿部寛のホームページ」並に高速で表示されます。冗談みたいな話ですが、試しに公式のサンプルブログを開くと、割とマジで体感できます。 本当にマッハで開く公式サンプルブログ 各エントリーも一瞬で表示されます 阿部寛さん級に速いのもそのはず、このテンプレートは、同サイトやDEV.toなど、表示速度で話題になったサイトを参考に開発されたもの。広告表示まで省いて、ブログの表示速度を追求したといいます。 本当に「阿部寛さんのサイトを参考に」と明言されている（傍線は編集部の加工） 速度最優先の設計ゆえ、作れるブログのレイアウトはごくシンプルで、4種類のテーマカラーと1列表示か2列表示かが選べるだけで、制限事項もあり自由度は低めです。それでも、ブ
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
前から気になってたHTML5について色々調べてみました - もとまか日記
先日、ドコモのAndroid端末である「GALAXY S」を予約したわけですが、そうなると気になるのが、ずーっと前から気になってたHTML5について。これからスマートフォンが普及するにつれて、無視出来ない技術であるのは誰の目にも明らかなのではないでしょうか。 てことで、HTML5について調べてみたメモです。 HTML5の概要まずは難しいことは抜きにして、概要を読んでみると分かりやすいです。 HTML5, きちんと。この記事だけで十分です。長くもなく、文字も少ないので非常に入りやすいです。 HTML5仕様関連一応ですが、仕様について。 HTML5.JP - 次世代HTML標準 HTML5情報サイトHTML 5 ― HTML 4 からの変更点 (http://www.w3.org/TR/html5-diff/ 日本語訳) 必要に応じてみればいいので、細かくは見てません。 基礎知識概要が理解出来
cite属性再論 | Torisugariの日記 | スラド
数年前、「cite属性は(法的な意味も含めて)引用元の明示とみなせるのか」という論争がありました。当時、私は全く興味がなく、この件を知ったのは随分と後になりましたが、今読んでも面白いので、未読の人は検索してみることをお勧めします。ちなみに、私はどちらかというと肯定派、つまり「cite属性だけで十分だ」と思っています。 何分、古い話なので、議論の多くはネット上から散逸(というか湮滅というか)してしまっています。そんな中、野嵜健秀氏の『闇黒日記』にこんな記述がありました。 http://noz.hp.infoseek.co.jp/diary/20020505.html Netscape 6/Mozilla Browserでは、blockquoteのプロパティでcite屬性のURIを參照出來ますし、そこから出典の文書にジャンプする事も出來ます。 野嵜氏の結論は、ジャンプの可否に関わらず変わらない
alt属性の使い方が厳密に規定されたHTML5のimg要素
HTML5では、新要素が追加されただけではなく、HTML4からある既存の要素についても、再定義しているのが特徴です。その中でも、img要素は、他の要素に比べても、すごい力の入れようで、定義されています。 特筆すべき点として、alt属性が挙げられます。 HTML4のimg要素の仕様では、alt属性は、イメージをレンダリングできないブラウザーの場合に表示する代替テキストとして使われ、イメージの簡単な説明を入れる、という程度にしか、定義されていませんでした。そして、もし詳細な説明を入れたい場合は、オプションで、longdesc属性を使うこととなっていました。これまでは、アクセシビリティの観点から、alt属性の使い方についてガイドラインや、業界のコンセンサスはありましたが、HTML準拠要件という形では存在していませんでした。 ところが、現時点でのHTML5のimg要素の仕様では、longdesc属
ナビゲーションのマークアップとCSSデザイン
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 これまでの記事では、クロスブラウザなCSSデザインをするうえで知っておきたいポイントとして、「ブラウザの表示モード」や「CSSハック」、「デフォルトスタイルの初期化」など、ブラウザの実装差異に関する基本的な事項を紹介してきました。今回から次回にかけて、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。 ナビゲーションのマークアップに使われる代表的な要素には、a要素とリスト関連の要素（ul要素、ol要素）がありますが、今回は、これら要素のプレゼンテーションをコントロールする代表的なCSSプロパティを押さえておきましょう。 対象読者 XHTMLとCSSの基本を理解して
HTML5/CSS3は最新Webブラウザでどれだけ実装が進んでいるか？ － Publickey
グーグルがHTML5の機能を駆使したGoogle Waveを発表したことなどをきっかけに、HTML5への関心がこのところ急速に高まっています。以前の記事「いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0」で紹介したように、HTML5やCSS3ではWebアプリケーションの構築に有用な機能が数多く含まれており、策定は現在もW3Cで進んでいます。 最近相次いで登場した最新のWebブラウザ、Firefox 3.5やSafari 4、Google Chrome 2.0などでは、策定中のHTML5やCSSの機能を取り入れ始めています。Video/AudioタグがFirefox 3.5でもサポートされ、プラグインがなくても動画や音声の再生が可能になったことは最近話題になりました。最新のWebブラウザでは、すでにいくつものHTML5の機能が使える状態です。
遊びごころ満載、横罫線「hr」のクリエイティブなデザインいろいろ
Smashing Magazineでは現在、楽しくてクリエイティブな横罫線「hr」のデザインのコンテストを行っており、最終選考に残った25作品を紹介します。
一般の人はウェブサイトがWordのようなものでできていると思っているらしい
昨日のこと、会社の同じ部署のＴ姉さんが Webの部署じゃない人に 「ホームページってどんな風に作っているのか？」 的名ことを聞かれたらしい。 Ｔ姉さんはデザインとHTMLとかの話をして、 その質問した人にHTMLのソースを見せたらしい。 そしてそのソースをみてかなり驚いたそうだ。 「ホームページってこんなの（タグや文書）でできているんですね。」 どうやらHTMLを知らない人にとっては、 WebがHTMLとかCSSで書かれているなんてことがわからないそうだ。 つまり、WebはWordのようなので、 画像と文字を貼り付けているものだと思っているらしい。 もしくは一枚の画像がベタって張られているような感覚。 でもそれが普通なんだろうなって思う。 専門じゃない人の感覚 少しでもWebの知識がある人にとっては、 ウェブサイトがHTMLやCSSでできていることは知っているようだが、 知識もなく、ただネ
Buzzurl、本文引用を拒否するためのMETAタグ用意 - buzzurl noindex :: SEM R
Buzzurl、本文引用を拒否するためのMETAタグ用意 - buzzurl noindex Buzzurl、ブックマーク登録時に本文引用を拒否するためのMETAタグ用意。 公開日時：2008年06月19日 11:04 株式会社ECナビは2008年6月18日、ソーシャルブックマーク「Buzzurl」にページを登録する時に、本文引用を拒否するためのMETAタグを用意した。18日19時30分以降に新規ブックマークされたページに指定のMETAタグが含まれている場合に、引用を拒否することができる。 ページに『<meta name="Buzzurl" content="noindex"/>』と記述すると、Buzzurlにてページがブックマークされた時に、本文引用がされなくなる。contentの値はnoindex/noarchive/nosnippetどれでも可能。 ただし、現実にはサイト運営者はあら
横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット
概要 Web ページのデザインで、ヘッダ部分やフッタ部分の横幅がウィンドウに対して100% になっているとき、~inner のような不要な div を使わないでこれを実現する方法です。 動作確認用の demo 構造 動作確認用の demo のページの構造は body 要素 div#document div#header div#content div#footer となっています。 HTML のソースコード 動作確認用の demo の HTML のソースコードは最小限で抜き出すと <body> <div id="document"> <div id="header">ヘッダ領域</div> <div id="content">コンテント領域</div> <div id="footer">フッタ領域</div> </div> </body> となっています。 CSS のソースコード Fire
Gmailを使ってPDFやWord文書をHTMLに変換する方法 - sta la sta
Convert PDF to HTML - Free Online Conversion PDFファイルやWord文書をGmailのみを使ってHTMLファイルに変換する方法の紹介です。 やり方は、 1. Gmailで自分宛にPDFやWordのファイルを添付して送信 2. メールを開く 3. 「View as HTML」というリンクをクリック(表示されない場合は言語をEnglishに変更) 4. 添付したファイルがHTMLで表示される と実に簡単なステップです。 GmailがHTMLに変換してくれるファイルタイプは、 .pdf、.doc、.xls、.ppt、.rtf、.sxw、.sxc、.sxi、.sdw、.sdc、.sdd、.wml と非常に多くのファイル形式に対応しています。 ただし、ファイル内に含まれるイメージは再現されないようです。 このテクニックを使えば、PDFをGmailでHTM
MTとタグ打ちに通じる真理。エクセルは重宝します | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） 心得其の六十四 オートマティックかマニュアルか弊社のスタッフが免許を取ったので、練習を兼ねて社用車でお使いを頼みました。1時間ほどして帰ってくると「足がつりそう」とクタクタです。右足は常にかかとを宙に浮かせた「片足上げ」の状態で、アクセルやブレーキはつま先で踏むといいます。1時間も「片足上げ」をすれば足もつります。「昭和時代」では考えられない「片足上げ走法」に「世代差」という文字がポッカリと浮かびました。 イン
「Webページの表示速度を向上させる最新研究結果」 米Yahoo!がプレゼン資料公開：CodeZine
米Yahoo!は、開発者向けWebサイト「Yahoo! Developer Network」内のブログで、Webページのパフォーマンスを向上させる最新研究結果について解説したプレゼン資料を公開した。 これは先週開催されたPHP Quebec Conferenceのセッションにおいて、同社のStoyan Stefanov氏が使用した資料を公開したもの。Yahoo!が研究を続けている「より速くWebページを表示させるテクニック」として、既存の14種類に加え、新しく20種類のルールが明かされている。 改善対象はサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルとなっており、同社が提供するFirefox拡張機能YSlowなどを利用して検証する。YSlowで「A判定」が出ていないようであればこれらの改善に取り組むよう推奨しており、A判定が出ている場合でも新しい20のルールを
寄せては返す館主専用 - なぜ人はテーブルタグで日本地図を作るのか(コメント欄)
そこにテーブルタグがあるからだ。……ということなのだろうか。 とかく人はテーブルタグで日本地図を作りたがる。テーブルタグで作った日本地図がちゃんと日本地図になっているというのも考えてみればふしぎではある。 というわけでテーブルタグ日本地図の紹介。 「Template:日本 - Chakuwiki」を追加 (3/10) 「地図の検索 - goo 地図」を追加 (3/11) 「道州制」を追加 (3/11) 「『A day of rest』」を追加 (3/12) 「いつもガイド」を追加 (3/13) 「トップページだけでもなんとかしたいのよ」を追加 (4/10) 素材散策：資料＆テキスト／日本地図（HTML）（TSUKURUの素材散策より） 自分の見た限りではもっとも出来のよい日本地図。テーブルタグという制約の中で最大限日本地図たりえんと創意工夫を凝らしている。至極の出来栄え。地域ごとに色分けし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Example Domain
