[B! html] ayakohiroeのブックマーク

ayakohiroe id:ayakohiroe

htmlに関するayakohiroeのブックマーク (22)

imgタグの変化 - 気づいたら時代遅れなHTMLを書いてた - Qiita
( 2022年、仕事中であった事例からいろいろまとめた資料を Qiita に記載 ) 私は自社開発の会社に勤めるサーバーサイドエンジニア。去年(2022年)、フロントエンドエンジニアが書いてたHTMLを見てたら以下のようなコードを見つけた。
ayakohiroe 2023/08/21
html
リンク
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。広義のHTML5 / 狭義のHTML5HTML5
ayakohiroe 2021/06/21
html

html5

web制作
リンク
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
ayakohiroe 2021/06/01
html

webマーケティング
リンク
CSSで実装されたこのサラブレッド、気持ちよく走るぞ -Clip Clop Clippity Clop
デモを紹介する前に、その動きをGIFアニメーションにしてみました。脚をはじめ、頭や首、胴体、尻尾、土煙まで、すべてがCSSで動きます。実際の動作は、下記でお楽しみください。アニメーション中にクリックすると、スローモーションに変わります。
ayakohiroe 2019/08/07
css

アニメーション

html
リンク
CSSで画像などをホバーした時に回転させる方法
2017/06/22 画像などにホバーした時、回転させるにはtransf ormプロパティを利用します。その他諸々、回転を綺麗に見せるために調整しなければいけません。サンプルコードホバー時に90度回転させる例です。 div:hover .target { transf orm: rotateZ( 90deg ) ; }デモZ軸Z軸を基軸とした回転をする例です。コンテナとなる要素(.container)で囲まないと上手く回転しません。2箇所あるrotateZの部分を、rotateX(水平方向)、またはrotateY(垂直方向)にすることで回転方法を変更できます。  <!DOCTYPE html> <html> <head> <style> .container { width: 100px ; height: 100px ; line-height:
ayakohiroe 2018/04/16
“transform: rotateZ( 90deg ) ;”

css

画像

html
リンク
【徹底検証】音声入力でHTMLのタグ打ちはできるのか？？ | FREE SWORDER
音声入力でHTMLのタグ打ちもできたら最強どうも、Linです。犬と、起床しました。音声入力という技術が最近進歩してきています。音声入力を用いれば、タイピングせずとも入力できるので手打ちよりも数倍はやく文字を書けるのです。この音声入力でブログを執筆するというのはもちろんのこと、ぜひトライしてみたかったのが、 HTMLのタグ打ちです。なぜ、このような発想に至ったのかというと、﹁沈黙のWebライティング﹂という本で時給500万円のマーケッターのボーンが音声入力でHTMLタグ打ちを行なっていたからです。
ayakohiroe 2018/04/10
HTML

考え方
リンク
HTTPステータスコードチェッカー｜複数URL一括検索&転送経路調査もOK
HTTPステータスコードチェッカー｜一括検索&転送経路調査もOK 複数の任意URLからHTTPステータスコードを一度に取得・確認する事ができるwebツールです。 200や404コードはもちろんの事、301や302リダイレクトの転送経路検索も同時に表示可能です。 ▼URLを入力（1行に1URL） NOコードURL 1
ayakohiroe 2017/10/17
**マーケティング

HTTP

サイト

HTML

チェック
リンク
AMPの対応方法まとめ
Googleが﹁Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)﹂という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
ayakohiroe 2016/05/26
html

amp

Web制作
リンク
View HTTP Request and Response Header
Check out our new free Web-Sniffer desktop app for Windows and Mac. Möchtest du bei deinem nächsten online Einkauf sparen, sind Rabattcodes ein heißer Tipp. Mit einem OTTO Gutschein kannst du in beinahe allen Bereichen des Lebens sparen: Von Fashion über Möbel bis zu Multimedia. For more information on HTTP see RFC 2616 HTTP(S)-URL: (IDN allowed) HTTP version: HTTP/1.1 HTTP/1.0 (with Host header)
ayakohiroe 2016/05/09
SEO

Webサービス

html

HTTP

Header

Tool

web制作
リンク
CPIでBASIC認証がうまく動かない現象の原因と解決法 | Web備忘箱
2つの問題があります。︻概要︼ 1. .htaccessのファイルパスが独特 2. .htpasswdの暗号形式に注意︻問題1︼ .htaccess ファイルシステム上のパスは /usr/home/(アカウントID)/html/ ですが、Basic認証の際は /home/(アカウントID)/html/ と記述する必要があります。︻問題2︼ .htpasswd パスワードの暗号化形式をいろいろ試してみてください。 Apacheのベーシック認証用パスワード発行フォームでパスワードを生成し、MD5形式のものを利用すると解決できました。︻参考︼ CPI レンタルサーバの Basic 認証パスワードでハマる Apacheのベーシック認証用パスワード発行フォーム http://www.cityjp.com/cript/crpt.cgi
ayakohiroe 2016/03/23
.htaccess

htaccess

apache

html

cpi

basic

パスワード

BASIC認証
リンク
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
ayakohiroe 2015/12/04
html

ブラウザ
リンク
構造化データとは？非エンジニアでもよく分かる！初心者向け徹底解説！ | ナイルのマーケティング相談室
これだけは押さえてほしい構造化データ2つのポイント難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。検索エンジンがページの内容を理解しやすくなる検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニアルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま
ayakohiroe 2015/09/28
seo

HTML

schema.org

構造化データ
リンク
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。いろいろ調査した結果、以下の考え方で理解できると思う。まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
ayakohiroe 2015/06/24
HTML5

Web制作

html
リンク
CSSで図形を描く仕組み - Qiita
borderを使って三角形を描く方法まとめ釣りのためにタイトルはああなっているけど、原理を知る上で重要なのは台形の描き方。まずは、よくサンプルで見かけるものから。 <div style="width: 0px; height: 0px; border-top: 20px solid #000; border-right: 20px solid #F00; border-bottom: 20px solid #0F0; border-left: 20px solid #00F;"> </div>
ayakohiroe 2015/06/19
css

まとめ

重要

html
リンク
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。とにかく、ページのめくれ具合ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いですこうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"></div> <div class="page"></div> <div class="
ayakohiroe 2015/05/15
html

jquery

css

Webデザイン

絵本

ページめくり
リンク
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
ayakohiroe 2015/04/06
html

HTML・CSS
リンク
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。コードを修正→ファイルの保存→ブラウザで更新→確認この手順を繰り返すのですが、これがなかなか面倒です。できれば、コードを修正したタイミングですぐに確認できるとベストですよね。そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ﹁Liveweave﹂です。﹁Liveweave﹂は、ブラウザ上で動作するHTMLエディタです。コーディングエリアとレン
ayakohiroe 2014/05/20
html

css

エディタ

web制作

コーディング
リンク
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート︵SASSも有り︶を紹介します。40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方使い方は非常に簡単です。 Step 1: 外部ファイル当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
ayakohiroe 2014/01/07
html
リンク
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
ayakohiroe 2013/10/01
アニメーション

html

デザイン

jQuery
リンク
DocumentRootを指し示すURLにアクセスがあったときに，mod_rewriteを使ってDocumentRootに含まれる別ディレクトリのコンテンツを表示させたい - yuu_nkjm blog(2010-05-17)
[Apache][.htaccess] DocumentRootを指し示すURLにアクセスがあったときに，mod_rewriteを使ってDocumentRootに含まれる別ディレクトリのコンテンツを表示させたい DocumentRoot(ドキュメントルート)を指し示すURLにアクセスがあったときに，mod_rewriteを使ってDocumentRootに含まれる別ディレクトリの下のコンテンツを表示させたいと思った． URLと違うディレクトリにアクセスさせる(http://yuu.nkjm.info/hoge/へのアクセスをhttp://yuu.nkjm.info/diary/にするとかね)ことは，DocumentRootそのものじゃないときは，Aliasやシンボリックを使ってなんとかしてきた．「だけど，DocumentRootそのものへのアクセスをDocumentRootに含まれる別ディレ
ayakohiroe 2013/09/04
.htaccess

apache

html
リンク
1 2 次のページ