外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか？ 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で
正規表現入門(1) – 正規表現を使ってみよう
はじめまして。4月から入社した宇都宮と申します。アシアルではPHPエンジニアですが、前職では、HTMLコーダー兼PHPエンジニア、必要に応じて(Action|Java)Scriptと、色々やってました。 様々な言語を書いてたわけですが、言語を問わずいつも使っていた便利ツールがあります。それが「正規表現」。というわけで、今回は正規表現について書きます。 正規表現とは 正規表現とは、 (Action|Java) といった感じで、文字列をパターン化して表現する方法のことをいいます。この例だと、「”Action”又は”Java”のいずれか」という意味になります。 この記事において、「正規表現」とは、各種ソフトウェアやプログラム言語で利用できる特殊な文字列パターンのことを指します。 正規表現を使うのに、プログラミングの知識・経験は必要ありません。日々大量のテキストと格闘している人であれば、正規表現を
画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)
<div class="wrap"> <a href="#"> <div><a href="https://www.asial.co.jp100-100.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp100-100.png"></a></div> <p>画像アリ一行テキスト</p> </a> <a href="#"> <p>画像ナシ一行テキスト</p> </a> <a href="#"> <div><a href="https://www.asial.co.jp100-100.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp100-100.png"></a></div> <p>画像アリ複数行テキスト画像アリ複数行テキスト画像アリ複数行
CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> メディアクエリとはメディアタイプとメディア特性を必要とする一つ以上の条件式からなりたちます。メディアタイプには様々なものがあり、それぞれの条件にあったときに特定のスタイルを適応することができます。 参考：メディアクエリ 今回はスマートフォンやタブレットなどを想定した画面サイズの違いによって、適応するスタイルを変更するといったことをおこないます。簡単なサンプル用のHTMLとメディアクエリを記載したCSSを用意して説明致します。 sample.html <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta cha
CSSだけで作るアイコン付きボタンの作り方
<body> <a href="#" class="button normal">ボタン</a> </body> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0; padding: 0; } a { /* サイズ指定 */ width: 200px; height: 50px; display: block; box-sizing: border-box; margin: 20px; /* 縦横中央揃え */ text-align: center; line-height: 50px; /* 色指定 */ background-image: -webkit-linear
イラストでわかる！git入門の入門
こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット？ジット？俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの？なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは？と思い、 今回はgit入門の入門、gitってなんだ？というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに？ プログラムを書いていて、こんなことありませんか？私はあります…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！