[B! css][html] adstyのブックマーク

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記

adsty 2023/01/25

丁寧に記述すると量が多く管理も大変だ。

リンク

無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】

﹃無料コーディング練習所﹄では、完全無料のコーディング教材を提供しています。入門編から上級編まで6サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。デザインカンプと完成版コーディングデータ付きです。この教材は制作会社の新人コーダーの教育にも使用されています。さぁ、楽しみながら一緒に勉強していきましょう♪

adsty 2022/04/27

HTML・CSS・jQueryの基礎スキルが身に付くカリキュラム。

リンク

HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ﹁TablesNG﹂で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにTablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

adsty 2021/07/09

テーブルの不整合の修正を目的とした再アーキテクチャの取り組み。

リンク

よく見かけるレイアウト・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

adsty 2021/02/18

それだけを実装するためコードやカスタマイズは簡易的。

リンク

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミックデザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。LEGOブロックの考え方を

adsty 2017/01/11

LEGOブロックの考え方で学ぶモジュール式Webデザイン。

リンク

Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

先日﹁Chrome デベロッパーツールの使い方﹂で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。デベロッパーツールの便利な使い方タブ﹁Elements﹂を選択 DOM要素を選択右パネルのタブ﹁Computed﹂を選択﹁Computed﹂には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。これは大きなサイトを制作している時に、非常に有用です。

adsty 2015/10/30

Chromeのデベロッパーツールの便利な使い方を紹介。

リンク

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集指定した行番号に移動すべての子ノードを展開デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット複数のカーソル画像をData URIとしてコピー疑似クラスのトリガー複数のコラムをドラッグで選択「$0」で現在の要素を手に入れる要素の表示「Event Listeners」の表示イージングのプレビュー Media Queriesの検証ネットワークをフィルム

adsty 2015/09/26

Chromeのデベロッパーツールの活用術。

リンク

各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター

Twitter, Facebook, Google+, Pocketなど、各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなHTML/CSSのコードで生成するジェネレーターを紹介します。

adsty 2014/06/17

ボタンのデザインやサービスを選択するとシンプルなHTML/CSSのコードを生成。

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

adsty 2013/10/31

コードの種類別に用意された整形機能のまとめツール。

リンク

コーディング規約を作ろう

2017年1月6日 Webサイト制作, 便利ツールコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「

adsty 2013/08/01

コーディング規約の作成で抑えておくべきポイント。

リンク

使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋

さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet

adsty 2013/07/31

技術系チートシートのリンク集・第二弾。

リンク

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）

初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました︵2013年1月現在︶。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？私が

adsty 2013/01/05

WordPressのオリジナルテーマの制作フロー。

リンク

HTML, CSS, jQueryから、Ruby, PHP, Java, Python, Git, 正規表現などウェブ制作・開発に役立つチートシートのまとめ -OverAPI

ウェブ制作・開発時に使用するさまざまな言語・サービスのチートシートをまとめた﹁OverAPI﹂を紹介します。 HTML, CSS, jQuery, JavaScriptなどのフロントエンドから、Ruby, PHP, Python, MySQL, Javaなどのバックエンド、正規表現、Gitなども揃っています。

adsty 2012/11/30

様々な言語やサービスのチートシートをまとめたサイト。

リンク

JavaScriptなしで地域ごとに色が変わる日本地図を作る

HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。デモページを別のタブで開く　　このデモをダウンロード︵ZIP︶ 2009年に仕事で﹁日本地図をクリックすると地域ごとに違うページに飛ぶ﹂ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PCに入っていなかったので、HTML と CSS だけで作ってみました。このデモはDOCTYPE宣言が HTML5になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。ですので、特殊なタグやプロパティは使わず

adsty 2012/11/21

HTMLとCSSだけで実現する日本地図の解説。

リンク

ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ

ウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。 HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。

adsty 2012/10/15

主にフロントエンドの開発者に役立つチートシートいろいろ。

html
css

リンク

HTMLやCSSでのプロトコル表記（http:、https:）の省略について

HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。埋め込みリソースからプロトコル表記（http:,https:）を省略する。  <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ

adsty 2012/05/11

プロトコル表記を省略するメリット等。

html
css

リンク

CSS3やHTML5などのコードを書く様子を再現し、徐々に出来上がっていく様を見ながら学べるチュートリアルサイト・TheCodePlayer

一つの形として面白かったのでシェア。実際にコードを書いていきながら徐々に出来上がっていくさまを見ながら学べるチュートリアルサイト。動画のチュートリアルより見やすく頭に入りやすい気もしないでもないです。こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。ブログ形式でチュートリアルを公開しています。説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど

adsty 2012/03/24

書いたコードが即時反映されるのを見ながら学べるサイト。

リンク

HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup

Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。

adsty 2012/03/21

整形と共に文法上のエラーチェックもしてくれる。

リンク

[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス

画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ実装デモデモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。4つデモは、全て画像を使用していません。デモページ‥ホバー時実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>

adsty 2012/01/25

画像を使用せずにパンくずリストを実装する方法。

リンク

[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル

画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。デモ実装デモデモはChrome, Safari, Firefox, Operaでご覧ください。IEはたぶんIE10で対応するはずです。デモページ実装まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと

adsty 2012/01/13

画像を使用せずリスト要素で実装したHTMLで実現。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (18)

cssとhtmlに関するadstyのブックマーク (54)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス