一気に教えるプログラマーのためのレスポンシブHTMLコーディング
レスポンシブデザインのHTMLコーディングに悪戦苦闘しているデザイナーは多いと思う。絵的な意味でのデザインと、あまりにかけ離れたロジカルな処理が必要だからだ。 そこでプログラマーにお鉢が回ってくることがあるのだが、今一つCSSがわからず苦戦することが多いと思う。 プログラマーだからこそ扱いやすいレスポンシブ そんな状況に陥っても、あわてる必要はない。ほんの少しのコツをつかめば、レスポンシブデザインなんて恐れるに足りないのだ。 まず正しくは【レスポンシブ】だ よく「レスポンシブ ( responsive ) 」と「レスポンシブル (responsible) 」の混同を見かけるが、レスポンシブが正解だ。 レスポンシブ ( responsive ) 形容詞 反応する レスポンシブル ( responsible ) 形容詞 責任のある レスポンシブル・デザインだと、だいぶ意味が違ってしまうようだか
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
作って理解するWebフレームワーク - きしだのHatena
前回、簡単なDIコンテナを作ってみたので、次はこれを使ってWebフレームワークを作ってみたいと思います。 Webサーバーをつくる まず、WebフレームワークなのでHTTPサーバーが必要ですね。なので簡単なものを作ります。 とりあえずブラウザからリクエストを受け取ったら200 OKとHTMLを返すだけのサーバーです。 今回は、そこらのブラウザからアクセスできればいいや、ということで、RFCとかの仕様に準拠することは考えません。 public class Server { public static void main(String[] args) throws IOException { ServerSocket serverSoc = new ServerSocket(8989); for (;;) { Socket s = serverSoc.accept(); new Thread((
PowerPointのスライドをWebに公開する [パワーポイント(PowerPoint)の使い方] All About
PowerPointのスライドをWebに公開するプレゼン終了後に、使用したスライドをWebに公開する人が増えています。スライドをWeb用に保存する方法を解説します。 大きな規模のプレゼンでは、会場でのプレゼン終了後に、説明に利用したPowerPointのスライドをWebに公開して、聞き手の方にあとからじっくり見てもらうというケースが多いようです。 ただし、PowerPointのファイルのままではWebに公開できません。スライドをWeb用のファイルとして保存し直す操作が必要です。 スライドを「Webページとして保存」する Webに公開したいスライドを表示し、「ファイル」メニューから「Webページとして保存」をクリックします。 PowerPoint2007では、左上の「Officeボタン」から「名前を付けて保存」-「その他の形式」をクリック。「名前を付けて保存」画面で、「ファイルの種類」を「単
![PowerPointのスライドをWebに公開する [パワーポイント(PowerPoint)の使い方] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.ituore.com/entry/html-css-basic
Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek