[B! HTML][javascript] ajinorichanのブックマーク

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

HTML・CSS・JavaScriptを独学するにはこの本たち！！ WEBサイトを制作したり、ブログのカスタマイズをしたりするために学ばなくてはいけないのが、HTML・CSS。そして、複雑な動きを付けるために必須なのがJavaScriptです。これらの情報はネット上にたくさん転がっていますが、その多くは断片的なものばかりです。知識をしっかり身につけたいのなら、ある程度参考書を買って学習するのが効率的です。 HTML・CSS・JavaScriptを独学で勉強するには、参考書で学習→ネットの情報で補完というフローが良いかと思います。私はそのように学んでいます。今回は、独学でコーディングスキルを磨きたい人におすすめの参考書を紹介していこうと思います。当記事は以下のような人におすすめです。 HTML・CSS・JavaSctipの勉強を始めたけど、どうやって学べばいいのか分からない WEB

ajinorichan 2016/09/15

リンク

Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現) - kojika17

置換前の文字と検索、置換の対応特定の文字からHTMLを作成 (.*)と$による呼び出しを覚えれば、様々なことに応用ができます。下記の文字から、HTMLのリストを作成してみましょう。 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing https://www.bing.com/ Yandex https://www.yandex.com/ 百度 http://www.baidu.com/ 用意した文字は「タイトル」「スペース1つ」「URL」というルールになっています。タイトルとURLを(.*)に置き換えて検索し、li要素とa要素に置き換えます。例置換前の文字 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing ht

ajinorichan 2016/05/24

リンク

フロントで迷ったら読む自分用！javascript,css,htmlの命名規則やコメントの書き方・ルール・規約・ガイドラインについてとかとか - tweeeetyのぶろぐ的めも

はじめにサーバサイドの人間ですが、だからこそ大事にしたいフロント側のルール。フロント側を一切を触らないのなら構いませんが触ることも多分にあるでしょう。フロント大好きなのでそっちメインで触りたい時もあるでしょう。ってことで、そんな自分がフロントのお作法として守っておきたいというときに参考にする自分用メモですこんなかんじってことでjavascript,css,htmlについてそれぞれ自分が見返せるように参考サイトとティップスをメモ javascript 命名規則コメントまとめ系 CSS 命名規則 id,class名のサンプルコメントまとめ系 HTML 文書構造コーディング規約とかルールとか全般 ※HTMLは命名規則て感じではないですね注釈お作法といっても命名規則、コメントなどを主としてまとめました（htmlは文書構造) 部分的でも命名規則について参考になれば参考とさ

ajinorichan 2016/04/08

リンク

[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes

スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。

ajinorichan 2016/02/22

リンク

検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog

HTMLファイ部のほんだです。気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当するエンジニアを集めた部署「HTMLファイ部」では、制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜と気づきを得るというフローでスキルアップしていくことがもっぱらだと思うのですが、学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜と気づきを得る ▼ 3. 制作の際に導入していくというフローを繰り返し実践していくことで、検索では気づけないことを学び、実装力アップ

ajinorichan 2015/02/03

リンク

【HTML/CSS/Javascript】ドロップメニューが隠れてしまった時の打開策 | 低すぺっく-Blog改

打開策と言っても僕の場合ある場所のあるコードが埋め込まれていることに気づかず4,5時間苦戦しただけなんですけどもねｗその苦戦したおかげで少しまた新たな知恵も着いたことも事実なので色々と復習として更新しようと思います(｡･ω･) 何事も諦めないことが大切なんだな・・・と実感したのでもしこの記事タイトルのようなキーワードで検索して困ってる方が居ましたら参考になるかわかりませんがお助けできたら幸いです(o*｡_｡)oﾍﾟｺｯ僕の場合ドロップメニューが記事下に隠れてしまいどうしようもなくなってしまったので色々と検索してみました。その時にみたのはz-index指定だったりposition:relative;を一緒に使ったりみたいなページを見てきましたがその前の大前提に、ドロップメニューを設置している場所が一体どこの面しているのかが重要だったりします。僕の場合だとこのブログを見て解るようにドロ

ajinorichan 2014/08/13

リンク

HTML/CSS/JavaScript初歩の初歩

最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加導入編🐠 Webサイトを作ることは楽しい！プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかにプログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ

ajinorichan 2014/03/26

リンク

What Is The DOM? | CSS-Tricks

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A reader recently wrote in asking me what the DOM was. They said they’ve heard it mentioned and alluded to, but aren’t sure they really understand it. We can fix that. But the HTML you write is parsed by the browser and turned into the DOM. View Source just shows you the HTML that makes up t

ajinorichan 2014/01/02

リンク

Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧

Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素）隣接セレクタ（要素1 + 要素2）間接セレクタ（要素1 ~ 要素2）属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c

ajinorichan 2013/11/03

リンク

一歩進んだHTML/CSS/JSを目指すために | 1000ch.net

2013/08/01 一歩進んだHTML/CSS/JSを目指すために「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s

ajinorichan 2013/08/02

リンク

[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect

フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。フィルタリングのサポート。キーボードナビゲーション。テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。まずは、一つ目。