-webkit-box-align: center; /* safari, Chrome対応 */ -moz-box-align: center; /* Firefox対応 */ -o-box-align: center; /* Opera対応 */ -ms-box-align: center; /* IE対応 */ box-align: center; /* ベンダープレフィックス無しも併記する */ が使える。 liタグの中にaタグがある場合（←本題） これには手間取った。 liタグ：ブロック属性 aタグ：インライン属性 であり、どうやらブロック属性の中にインライン属性があるときそのままだと縦位置中央揃えができないらしい。 結論、以下のような操作をすることで縦位置中央にすることができた。 まず、li要素（ブロック属性）をボックス属性に変換 li { display: -webkit-b

直前の記事「ジーン・ウェブスターの父親による『ハックルベリー・フィンの冒険』の出版　The Publication of _Adventures of Huckleberry Finn_ by Charles L. Webster」で、表紙のことを「カヴァー」と書いて、待てよ、日本語でカバーというと表紙ではなくてジャケットだな、と書き改めました。かねて、古書の記述を読んだりして興味をおぼえるところありましたので、なかば自分のメモとして書き留めておこうと思います。 日本の本、ならびに日本語の名称については、大阪府立中之島図書館の「「本」の部分の名称」というページ <http://www.library.pref.osaka.jp/nakato/osaka/book_bui.html#orikaeshi> がたいへんわかりやすく有益だと何年も前から思っておりました。まことに勝手ながら、そこと自

Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

クソッ！ IEのクソッ！！ 失礼しました。 最近、Wordpressのテーマを作りました。 でもIEを考えてなかったので一応確認したら案の定レイアウトは崩れてます。 面倒くさいし、ブスだからインターネットエクスプローラーは無視しようと思ってたんですが、チラチラ|ω・｀)（←IE）こっちを見やがるから、 いやいやだけど対応させてみました。 ということで今回は、html5とcss3で作ったレスポンシブサイトを、 ブラウザ界のブスことInternetExplorerにも対応させてみようって話。 手を煩わせるんじゃないよ。まったく。 あんたかわいくないんだよ！ で、世間の方々を参考にしようと検索するとたくさん出て来ました。 [browser-shot width=”200″ url=”http://www.arch-web.jp/archives/771/” target=”_blank”] IE

こんにちは。うっかりチカッパです。 前回ご紹介したAdobe Brackets。おすすめしたい機能がとても多くて一度では紹介しきれませんでした…。 その中のひとつがショートカット！ Bracketsのショートカットは必要なものだけ搭載されていると言われていますが、既存で十分なほど機能が備わっています。 また、新しいエディタに乗り換えた時に一番戸惑うところはショートカットと機能の違いです。 私は今までSublime Text派だったので、「これBracketsにもあるのかな…」とさぐりさぐり使っていたのですが、案外共通の機能やショートカットが多く、乗り換え後もすぐに親しめました。 また、ショートカットをカスタマイズすることができますので、今まで慣れ親しんだショートカットをBracketsでも使用することができます。 では、まずは私がよく使用しているショートカットからご紹介します。 覚えると便

Sassは、CSSを拡張した言語で、利用する主な目的としては「CSSを管理しやすくするため」です。 平面にベターっと並ぶCSSはとてつもなく見づらく管理しずらい圧倒的なデメリットがあります。CSSが数千、数万行となったときにとてもじゃないけど、どこに何が書いてあるか把握することは困難だと思います。あとから修正しようと思ったときに必ずといっていいほど修正漏れが起こりやすいのがCSSです。 Sassを使えば、「CSSの管理しずらい」という問題を少なからず解決してくれます。 今ではSassを使っていないWeb制作会社の方が少ないってくらいに使われる言語なので、Webコーディングを仕事とするなら必ず覚えておかないと仕事にならない可能性があります。 この記事では、最低限で理解しておきたいSassの使い方を紹介していきます。サクッと覚えて使えるようにしておきましょう！ Sassを使うメリット 冒頭でも

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。 リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。 今回は、2023年最新のおすすめリセットCSSや、リセットCSSの基本と使い方をご紹介していきたいと思います。 リセットCSSとは？ リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのことを

こんにちは、Akros Web & Business Design Academy 札幌校の三本です。 CSSも最近は、プログラミング言語化しており、オブジェクト指向の発想が必要になってきています。 それに伴って、コーディングの負担も増えつつあるのが現状です。 CSSのコーディングを効率化するツールのひとつに「Sass（SCSS）」がありますが、これはコンパイルという変換作業が必要になります。 このコンパイルを簡単にしてくれるソフトを今回はご紹介したいと思います。 「Koala」とは Koalaは、Sass（SCSS）を自動的にコンパイルしてくれるとても便利なツールです。 Compassモードも実装されていますし、mapファイルの作成やcssファイルの圧縮（compressed）も簡単に行ってくれます。 インストール方法 まず、Sass（SCSS）を使ってコーディングするためには、Ruby