サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
ponsyon.com
タイトル画像のようなものです。海外もののクールなデザインのブログテーマで結構見かけますね。 この記事はスマホサイズでは調整しておりません。 その1: marginとwidthで指定する 左右に50pxずつはみ出して配置する 親要素をdiv.parent01、子要素をdiv.child-test01とします。 ここでは子要素を親要素より左右に50pxずつはみ出させてみます。 <div class="parent01"> 親要素ここから <div class="child-test01">子要素</div> 親要素ここまで </div> HTMLはclassの違いはありますが、基本的にこの形です。 この投稿記事内でデモもやるため、実際にはpタグが無駄に混じっていますがお見逃しください。WordPressでpタグを自動挿入させないテクもあるようですが。。 div.parent01 { backg
見出し周りでたまに見かけるんですが、行(幅100%)ではなく、テキストの後ろにだけ背景色を敷きたい場合、どうしたらいいのか? HTMLは? CSSは? 調査してみました! とちょっとふざけてスタートしましたが、改行が入った場合も崩れない方法を模索します。 その1:デフォルト(pタグにbackground-color指定) 普通の普通にpタグにbackground-colorを指定してみます。 <p class="text-background-test01">1行だけのテキスト</p> <p class="text-background-test01">複数行のテキストの場合はどうかな?改行してもちゃんとなっていてほしいな?どうかな?</p> .text-background-test01 { font-size: 2.5rem; font-weight: 600; line-height
アイソメトリック図法とは 等角投影図とも呼ばれ、立体を斜め上から見た状態の表現方法です。 等角というだけあって、ここが全て等しく120°(下図参照)。また座標の軸がともに30°傾いています。 建築やテクニカルイラストで使用されていますが、WEBデザインのトレンドになったことでWEB上でもよく見かけるようになりました。 アイソメ図と略されていたりします。 step1:アイソメトリック図法のガイドとなる升目を作成する まずは作図のためのベース作りです。 長方形グリッドツール(直線ツールのあたりにある)を選択した状態でドキュメント内をクリックすると「長方形グリッドツールオプション」が開きます。 幅と高さを同じ数値に、分割の線数も水平・垂直同じ数値にします。分布は0%のまま。 下のオプションは両方外してOK。
まずはIEユーザーの方へ 万が一、IEユーザーがこのページにアクセスされたときのために。 Googleが開発した世界で一番使用率が高いChromeをオススメします(Edgeでも構わないんですけど)。軽いし、表示崩れなんて起きませんよ? この機会にブラウザの乗り換えなんてどうでしょうか? 下記サイトからタダでダウンロードできます。
なぜ「slick.js」がいいのか レスポンシブ対応 IE11でも問題なく動く カスタマイズ性が高い 王道プラグインだけあって、JavaScriptも活用した質の高い解説ブログが山ほど見つかる←重要! slick.jsの準備 A: slick.jsをダウンロードする 公式サイトからダウンロードします。 色んなパターンのスライドが実装できまっせ〜なサンプルを上に流して流して、設置方法の説明も流して、settingの解説も流して流して、だいぶ下の方にダウンロードボタンがあります。 急ぎのときは、グロナビの「get it now」をクリックするとダウンロードボタンのところまで一気にスクロール移動できます。 解凍後、slick.min.js、slick.css、slick-theme.css、ajax-loader.gif、fontsフォルダをそれぞれ格納(UP)します。 fontsフォルダはsl
ここでは便宜上PNGを貼っていますが、SVGアニメーションで必要なのはimgタグで貼り付けるSVGファイルではなく、SVGコードの方です。 SVGファイルをテキストエディターで開くか、Illustratorでファイル>別名で保存...からファイル形式:SVG(svg)として保存をクリックします。 上記SVGオプションのウインドウになるので下のSVRコード…ボタンをクリックすると、SVGコードが表示されます。 必要なのは<svg>内になります。sample01.四角のSVGコードはこうなりました。 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" st
このページを最初にブックマークしてみませんか?
『yanagi's memo』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く