HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
requestsで取得できないWebページをスクレイピングする方法 - ガンマソフト
ブログ requestsで取得できないWebページをスクレイピングする方法 ［ＰＲ］ 2019/12/20 2020/10/7 | Python Webスクレイピング スクレイピングの定番の方法と言えば「requests + BeautifulSoup」の組み合わせです。一般的はWebページであれば、大抵はスクレイピングできます。 しかし、この方法で読み取れないWebページに遭遇することがあります。特にYahoo!やTwitterなど頻繁に更新されるサイトによくあります。 その原因は、「ダウンロードしたHTMLファイル」と「ブラウザに表示されるHTML」が異なるからです。そのため、requestsでサーバーから直接ダウンロードしたHTMLファイルをBeautifulSoupで解読してもブラウザで見ている内容と違うのでスクレイピングできません。 Yahoo! JAPANが運営しているYaho
HTML5でのSVGファイル操作のおさらい - Qiita
最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。 数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。
git commit するまでに自分がやっていること
git-study-sample.md コミットするまでの流れ 前回のコミットから何も変更を加えていない状態。 $ git status # On branch masternothing to commit, working directory clean エディタでファイルを編集する $ vim app/views/hello/list.html 編集後、git statusで変更部分を確認。 $ git status # On branch master # Changes not staged for commit:# (use "git add <file>..." to update what will be committed) # (use "git checkout -- <file>..." to discard changes in working directory
拡張子とMIMEタイプ - とほほのWWW入門
ファイル名の最後のドット（.）から後ろの部分を『拡張子』と呼びます。index.html の拡張子は .html で、title.gif の拡張子は .gif です。拡張子はそのファイルが何であるかを示します。例えば、.html はHTML文書、.txt はテキスト文書、.gif は GIF画像、.jpg は JPEG画像のファイルであることを示しています。 Windows では、標準の設定では拡張子は表示されません。[スタート]-[（すべての）プログラム]-[アクセサリ]-[エクスプローラ] を起動し、[ツール]メニューの [フォルダオプション]-[表示] で、[登録されている拡張子は表示しない] のチェックをオフにしてください。 また、Windows では、ファイルをダブルクリックした時の動作はこの拡張子によって決まります。例えば .txt のファイルをダブルクリックすると [メモ帳]
HTML を始めよう - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
新人コーダーに知っておいて欲しいリダイレクトの基本｜クロノドライブ
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | DevelopersIO
CORS(Cross-Origin Resource Sharing)って何？ CORS(Cross-Origin Resource Sharing)は、その名の通り、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。各社のブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。Aというサイトに訪問したのに、Bというサイトに向けて個人情報を送っていたというのは困りますよね。例えば、オリジンから読み込んだHTML内のJavaScriptでJSONデータを読み込むとしましょう。JSONデータが同じサーバにあれば普通に読み込めますが、別のサーバにある場合は読み込めません。まぁ実際のところはJSONPという仕組みを使ってできちゃったりしますが、抜け道的なやり方で使われていました。CO
セレクトボックスを選択したらサブミット - Qiita
セレクトボックスを選択したらサブミットしてほしい時がありませんか？ （例えば、名古屋事業所と福岡事業所とで表示させる内容を変えたい時とか） 忘れるといけないので、書き留めておこうと思います。 ①submit()関数をonchangeイベントで呼び、this.formのアクションを実行させる方法 <form method="post" action="#"> <select name="office" onchange="submit(this.form)"> <option value="名古屋">名古屋</option> <option value="福岡">福岡</option> </select> </form>
JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでセレクトボックスの値を動的に生成する方法について現役エンジニアが解説しています。セレクトボックスは複数の選択肢から1つ選ぶHTMLタグになります。JavaScriptで条件によって、セレクトボックスを動的に生成する方法を解説します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
labelタグとは｜コーディングのプロが作るHTMLタグ辞典
「LABEL」とは、フォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル（もしくはラベルのアクセスキー）をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。 <label>タグの指定方法には2つあり、1つは<label>タグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができます。もう一つは、<label>～</label>内に部品とラベルを配置するという方法です。 ただし、この方法はInternet Explorer6以前のブラウザには対応していないので、できるだけ前者を用いた方がよいでしょう。
HTMLタグ/イメージタグ/画像のサイズを指定する - TAG index Webサイト
この属性を指定することで、画像の表示サイズを変更することができます。 しかし、データ量そのものは変化しないので、巨大な画像を扱う際（サムネイルとして縮小する場合など）には注意が必要です。また、この属性で表示サイズを変更すると、画質が悪くなってしまう場合があります。（画像サイズの変更には、画像編集ソフトを使用した方がいいでしょう） 大きさを変更しない場合でもサイズ指定を行う 画像の大きさを変更しない場合でも、サイズの指定を行っておくことをお勧めします。 （193×130） 例えば、幅193ピクセル×高さ130ピクセルの画像を読み込む場合は、そのサイズをそのまま次のように指定しておきます。 <img src="rainbow.jpg" alt="写真" width="193" height="130"> 画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。
【無料】ポートフォリオHTMLテンプレート（ベーシック） | 未経験からWebデザイナーへ！【2024年版】
シンプルでベーシックなポートフォリオサイト用のHTMLテンプレートです。挙動はデモをご確認ください。 デモ ダウンロード テンプレートをご利用の際は、自分なりにカスタマイズをしてみてください。そのまま利用してしまうと採用担当の方は「あ、この人、手抜きしてるなぁ…」と思ってしまいます。 配色やレイアウト、フォントなどを変えて「自分のポートフォリオ」を作り込みましょう！ Webデザイナー向けポートフォリオチェックリスト84項目。ここを直せば一気に良くなる！ ポートフォリオのチェックリストをnoteで販売中です！激安のワンコイン500円です。ポートフォリオが完成したらぜひチェックしてみてください。ポートフォリオの質が低いと、選べる会社の選択肢が減ってブラック企業に入ってしまう可能性が高まります。今まで何人もそんな人を見てきました…。このチェックリストで改善点を見つけて少しでもポートフォリオを質を
headerとfooterの使い方とデザイン例まとめ【HTML初心者必見】 - WEBCAMP MEDIA
「header」と「footer」っていつ使うの？ 「header」と「footer」は名前の通り、サイトのヘッダー部分とフッター部分を作るときに使います。 では、ヘッダーとフッターが何のためにあるのかからみていくことにしましょう。 ヘッダーを作るためのheaderタグ headerタグは、その名前の通りサイトのヘッダー部分を作るために使われるタグです。 ヘッダー部分はサイトの一番上にくる、大切な部分です。 ヘッダー部分が大切な理由は、２つあります。 １つは、「サイトのイメージを作る」ということです。 どのページを開いてもヘッダーが一番上にくるので、ユーザーにどのサイトをみているのか？を意識してもらうことができます。 もう１つの理由は、「目次をおくことができる」ということです。 サイトの一番上にくる部分に目次を置くことで、ユーザーの使いやすさをあげることができます。 この「DMM WEBC
Visual Studio CodeにLaravel用おすすめExtension(拡張機能)を導入する - Qiita
この記事は、「【連載】初めてのWindows用Laravel 5.7開発環境構築入門」の孫記事です。環境などの条件は、親記事をご覧ください。 この記事は、「XAMPP上にLaravel 5.7をインストールする 2018年12月版」の子記事です。 今回はVisual Studio CodeにLaravel用のExtension(拡張機能)を入れます。筆者のおすすめですが、拡張機能については好みによるので、好きなのを入れればよいかと。 Laravel用Extensionを導入するには Visual Studio Codeを開き、Extensionsを開いて、検索文字にlaravelと入力します。 Laravel用Extensionがたくさん出てくるので、好きなのを入れます。 Laravel 5 Snippets Auth::, Config::, Session:: などのスニペットを提供し
Progate(プロゲート) | Learn to code, learn to be creative.
中級編では、ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを作っていきます。WEBデザインの応用知識を身につけ、よりモダンなWEBページを作ってい...
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
日本の行政機関等が公開しているAPIについてのまとめ（2016年8月17日暫定版。随時更新） - Qiita
この記事は下記のURLにあるコミックマーケット90で頒布した同人誌と自分が管理するブログの記事を微修正し、転載したものです。 南関東開発機構 : 同人誌「日本の行政機関が公開中のAPIについて調べてみた本」を公開しました http://blog.livedoor.jp/south_kanto_dm/archives/52143201.html 南関東開発機構 : 日本の行政機関が公開中のAPIについてのまとめ（2016年8月17日暫定版） http://blog.livedoor.jp/south_kanto_dm/archives/52143463.html 前書き この記事の目的は、日本の行政機関等が公開しているAPIを紹介する事です。 日本の情報技術は他国と比較して、立ち遅れている部分があり、これを立て直すのが喫緊の課題であると言えます。 日本政府もこの問題に危機意識を持ち、先日、経
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで横並びメニューの設置方法
<input>の使い方とtype属性の一覧をサンプル付きで紹介