タグ

ブックマーク / webcre8.jp (4)

  • [HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者

    web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで

    [HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
  • ファイル形式変換サービスはCloudConvertが最強ぽい

    ファイル形式の変換の必要があることって画像でもテキストでも結構あると思うんですけど、そのほぼどれもに対応してくれるCloudConvertが便利なので紹介します。 別に新しくできたってわけではなく前からあるんですがほんとに便利だったので紹介します。 ファイル形式の変換って色々やりますよね。私がやることがあるのは例えば動画をGIFにとか、WordのファイルをPDFにということもありますね。そういったことにはこのCloudConvertが便利です。 CloudConvertの機能 CloudConvertはやろうと思ったことのある、たいていのファイル形式の変換に対応しているファイル形式変換サービスです。対応しているファイルの種類は以下の通り。 アーカイブファイル 音声 CAD 文書 ebook フォント 画像 プレゼンスライド スプレッドシート ベクターデータ 動画 Webサイト これらを更に

    ファイル形式変換サービスはCloudConvertが最強ぽい
  • [CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)

    先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー!★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですw 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ:box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、

    [CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
  • [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)

    figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端:リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

    [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
  • 1